Added autocompleteValue useState variable to store full newValue and …

…show value in getOptionLabel not value if dropdownOptions initially has array ob objects structure: [{value, label}] (#972) Co-authored-by: Dmitrii Zolotukhin <dmitrii.zolotukhin@sportion.net>
KevinVandy · Feb 5, 2024 · 99ff761 · 99ff761
1 parent b248acf
commit 99ff761
Showing 1 changed file with 35 additions and 30 deletions.
diff --git a/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
@@ -30,6 +30,7 @@ import {
   type TimePickerProps,
 } from '@mui/x-date-pickers/TimePicker';
 import {
+  type DropdownOption,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -434,37 +435,41 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             },
           }}
         />
-      ) : isAutocompleteFilter ? (
-        <Autocomplete
-          freeSolo
-          getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) =>
-            handleChange(getValueAndLabel(newValue).value)
-          }
-          options={
-            dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
-          }
-          {...autocompleteProps}
-          renderInput={(builtinTextFieldProps) => (
-            <TextField
-              {...builtinTextFieldProps}
-              {...commonTextFieldProps}
-              InputProps={{
-                ...builtinTextFieldProps.InputProps,
-                startAdornment:
+      ) : isAutocompleteFilter ? (() => {
+          const [autocompleteValue, setAutocompleteValue] = useState<DropdownOption | null>(null);
+          const handleAutocompleteChange = (newValue: DropdownOption) => {
+            setAutocompleteValue(newValue);
+            handleChange(getValueAndLabel(newValue).value);
+          };
+          return <Autocomplete
+            freeSolo
+            getOptionLabel={(option) => getValueAndLabel(option).label}
+            onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
+            options={
+              dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
+            }
+            {...autocompleteProps}
+            renderInput={(builtinTextFieldProps) => (
+              <TextField
+                {...builtinTextFieldProps}
+                {...commonTextFieldProps}
+                InputProps={{
+                  ...builtinTextFieldProps.InputProps,
+                  startAdornment:
                   commonTextFieldProps?.InputProps?.startAdornment,
-              }}
-              inputProps={{
-                ...builtinTextFieldProps.inputProps,
-                ...commonTextFieldProps?.inputProps,
-              }}
-              onChange={handleTextFieldChange}
-              onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-            />
-          )}
-          value={filterValue}
-        />
-      ) : (
+                }}
+                inputProps={{
+                  ...builtinTextFieldProps.inputProps,
+                  ...commonTextFieldProps?.inputProps,
+                }}
+                onChange={handleTextFieldChange}
+                onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+              />
+            )}
+            value={autocompleteValue}
+          />;
+        }
+      )() : (
         <TextField
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}