fix: add ...rest props into async autocomplete to customize component#272
Conversation
Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
📝 WalkthroughWalkthroughThe async Formik autocomplete component now accepts additional incoming props and forwards them to the underlying MUI ChangesAsync autocomplete passthrough
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with 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.
Inline comments:
In `@src/components/mui/formik-inputs/mui-formik-async-select.js`:
- 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.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2678ead6-3f2e-4a99-a6cc-530bf33177ea
📒 Files selected for processing (1)
src/components/mui/formik-inputs/mui-formik-async-select.js
| {option.label} | ||
| </li> | ||
| )} | ||
| {...rest} |
There was a problem hiding this comment.
🎯 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.jsRepository: 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 -20Repository: 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 jsxRepository: 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 -30Repository: 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.jsRepository: 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.
| {...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.
2 participants
ref: https://app.clickup.com/t/86b9pc89t
Signed-off-by: Tomás Castillo tcastilloboireau@gmail.com
Summary by CodeRabbit