Skip to content

fix: add ...rest props into async autocomplete to customize component #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smarcet merged 1 commit into from
Jun 23, 2026
+3 −1
Merged

fix: add ...rest props into async autocomplete to customize component #272

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/mui/formik-inputs/mui-formik-async-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const MuiFormikAsyncAutocomplete = ({
formatOption = (item) => ({ value: item.id.toString(), label: item.name }),
formatSelectedValue = null,
queryParams = [],
isMulti = false
isMulti = false,
...rest
}) => {
const [field, meta, helpers] = useField(name);
const [options, setOptions] = useState([]);
Expand Down Expand Up @@ -133,6 +134,7 @@ const MuiFormikAsyncAutocomplete = ({
{option.label}
</li>
)}
{...rest}

@coderabbitai coderabbitai Bot Jun 23, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find call sites that may pass colliding props into this wrapper.
rg -n --type-add 'jsx:*.js' --type jsx -C2 \
  '<MuiFormikAsyncAutocomplete[^>]*(onChange|onInputChange|value|options|renderInput|getOptionLabel|isOptionEqualToValue)\s*=' src

# Confirm current prop ordering in the wrapper component.
sed -n '90,150p' src/components/mui/formik-inputs/mui-formik-async-select.js

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 178

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find the file with flexible search
fd -i "mui-formik-async-select" . --type f

# Also search for variations
fd -i "async.*select" src --type f 2>/dev/null | head -20

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 424

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Read the component file to see prop ordering
cat -n src/components/mui/formik-inputs/mui-formik-async-select.js

# Then search for actual usages
echo "=== Searching for MuiFormikAsyncAutocomplete usage ==="
rg -n "MuiFormikAsyncAutocomplete" src --type js --type jsx

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 5301

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Search for usage of MuiFormikAsyncAutocomplete without type specification
rg -n "MuiFormikAsyncAutocomplete" src --type-list | head -20

# Try simple grep
grep -rn "MuiFormikAsyncAutocomplete" src 2>/dev/null | head -30

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 568

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Search for usage of MuiFormikAsyncAutocomplete
grep -rn "MuiFormikAsyncAutocomplete" src --include="*.js" --include="*.jsx" 2>/dev/null | grep -v "node_modules"

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 846

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Read the test file to see how MuiFormikAsyncAutocomplete is being used
cat -n src/components/mui/__tests__/mui-formik-async-select.test.js

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 3899

Move {...rest} before core Autocomplete props to prevent overrides of critical handlers.

Spreading {...rest} last at line 137 allows callers to override onChange, onInputChange, value, options, and renderInput, which would break Formik state updates and async fetch behavior. Move the spread operator before these critical props so custom properties merge without shadowing essential wiring.

Suggested fix 
   return (
     <Autocomplete
+      {...rest}
       options={options}
       value={value}
       onChange={handleChange}
       loading={loading}
       multiple={isMulti}
       fullWidth
       getOptionLabel={(option) => option.label || ""}
       isOptionEqualToValue={(option, value) => option.value === value.value}
       onInputChange={(e, newInput) => setSearchTerm(newInput)}
       renderInput={(params) => (
         <TextField
           {...params}
           placeholder={placeholder}
           variant="outlined"
           error={Boolean(error)}
           helperText={error || ""}
           slotProps={{
             input: {
               ...params.InputProps,
               endAdornment: (
                 <>
                   {loading && <CircularProgress color="inherit" size={20} />}
                   {params.InputProps?.endAdornment}
                 </>
               )
             },
             inputLabel: { shrink: false }
           }}
           sx={{
             "& input::placeholder": {
               color: "`#00000061`",
               opacity: 1
             }
           }}
         />
       )}
       renderOption={(props, option, { selected }) => (
         <li {...props}>
           {multiple && <Checkbox checked={selected} sx={{ mr: 1 }} />}
           {option.label}
         </li>
       )}
-      {...rest}
     />
   );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{...rest}
return (
<Autocomplete
{...rest}
options={options}
value={value}
onChange={handleChange}
loading={loading}
multiple={isMulti}
fullWidth
getOptionLabel={(option) => option.label || ""}
isOptionEqualToValue={(option, value) => option.value === value.value}
onInputChange={(e, newInput) => setSearchTerm(newInput)}
renderInput={(params) => (
<TextField
{...params}
placeholder={placeholder}
variant="outlined"
error={Boolean(error)}
helperText={error || ""}
slotProps={{
input: {
...params.InputProps,
endAdornment: (
<>
{loading && <CircularProgress color="inherit" size={20} />}
{params.InputProps?.endAdornment}
</>
)
},
inputLabel: { shrink: false }
}}
sx={{
"& input::placeholder": {
color: "`#00000061`",
opacity: 1
}
}}
/>
)}
renderOption={(props, option, { selected }) => (
<li {...props}>
{multiple && <Checkbox checked={selected} sx={{ mr: 1 }} />}
{option.label}
</li>
)}
/>
);
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/formik-inputs/mui-formik-async-select.js` at line 137, The
MuiFormikAsyncSelect component is spreading {...rest} after the core
Autocomplete props, which lets callers override critical handlers and break
Formik/async behavior. Update the MuiFormikAsyncSelect render props so the
{...rest} spread happens before the essential Autocomplete wiring, keeping
onChange, onInputChange, value, options, and renderInput defined by the
component itself. Preserve the existing custom prop passthrough, but ensure the
component’s internal handlers remain the final authoritative props.

/>
);
};
Expand Down
Loading