fix: selectField state issue

vlinderclimate · Sep 14, 2022 · a152730 · a152730
1 parent c843f7d
commit a152730
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 28 deletions.
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -67,7 +67,21 @@ const StyledMuiSelect = styled(MuiSelect)<SelectProps>(({ theme }: { theme: Them
 
 const Select: React.FC<SelectProps> = forwardRef(
   (
-    { id, value, placeholder, disabled = false, onChange, onBlur, inputProps, variant, endAdornment, ...props },
+    {
+      id,
+      value,
+      placeholder,
+      disabled = false,
+      onChange,
+      onOpen,
+      onClose,
+      onBlur,
+      inputProps,
+      error,
+      variant,
+      endAdornment,
+      ...props
+    },
     ref
   ) => {
     return (
@@ -79,10 +93,12 @@ const Select: React.FC<SelectProps> = forwardRef(
         disabled={disabled}
         onChange={onChange}
         onBlur={onBlur}
+        onOpen={onOpen}
+        onClose={onClose}
         inputRef={ref}
         input={<Input {...{ size: "xs", variant: variant, color: "primary", endAdornment: endAdornment }} />}
         MenuProps={{
-          id: `menu-${id ?? ""}`,
+          id: `menu-${id ?? "select"}`,
           anchorOrigin: {
             vertical: "bottom",
             horizontal: "left"
@@ -91,8 +107,10 @@ const Select: React.FC<SelectProps> = forwardRef(
             vertical: "top",
             horizontal: "left"
           },
-          hideBackdrop: true
+          hideBackdrop: true,
+          onClick: onClose
         }}
+        error={error}
         {...props}
       />
     )

diff --git a/src/components/SelectField.tsx b/src/components/SelectField.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, ReactNode, useState } from "react"
 import { styled, Theme } from "@mui/material/styles"
 import FormControl, { FormControlProps as MuiFormControlProps } from "@mui/material/FormControl"
-import { ClickAwayListener, InputLabel } from "@mui/material"
+import { InputLabel } from "@mui/material"
 
 import IconButton from "./IconButton"
 import Select, { SelectProps } from "./Select"
@@ -35,30 +35,30 @@ const SelectField: React.FC<SelectFieldProps> = forwardRef(
     }
 
     return (
-      <ClickAwayListener onClickAway={() => setIsOpen(false)}>
-        <StyledFormControl error={!!error} {...formControlProps}>
-          {label && <InputLabel>{label}</InputLabel>}
-          <Select
-            id={id}
-            aria-describedby={`${id}-select`}
-            endAdornment={
-              <IconButton
-                iconProps={{
-                  iconKey: "dropdown",
-                  color: isOpen ? "primary" : "secondary",
-                  rotate: isOpen ? -180 : 0,
-                  size: "xs"
-                }}
-              />
-            }
-            onOpen={() => setIsOpen(true)}
-            onClose={() => setIsOpen(false)}
-            {...selectProps}
-          >
-            {children}
-          </Select>
-        </StyledFormControl>
-      </ClickAwayListener>
+      <StyledFormControl error={!!error} {...formControlProps}>
+        {label && <InputLabel>{label}</InputLabel>}
+        <Select
+          id={id}
+          aria-describedby={`${id}-select`}
+          endAdornment={
+            <IconButton
+              iconProps={{
+                iconKey: "dropdown",
+                color: isOpen ? "primary" : "secondary",
+                rotate: isOpen ? -180 : 0,
+                size: "xs"
+              }}
+            />
+          }
+          open={isOpen}
+          onOpen={() => setIsOpen(true)}
+          onClose={() => setIsOpen(false)}
+          error={error}
+          {...selectProps}
+        >
+          {children}
+        </Select>
+      </StyledFormControl>
     )
   }
 )