fix autocomplete sets previous value using onInputChange #9243
Conversation
tdnl
force-pushed
the
fix-autocomplete-effect
branch
from
80d961f
to
4de3980
Compare
| @@ -440,33 +447,14 @@ If you provided a React element for the optionText prop, you must also provide t | |||
| useEffect(() => { | |||
| if (!multiple) { | |||
| const optionLabel = getOptionLabel(selectedChoice); | |||
| if (typeof optionLabel === 'string') { | |||
| setFilterValue(optionLabel); | |||
There was a problem hiding this comment.
I believe the issue was happening because of this effect.
Removing the call to setFilterValue solves the problem as long as handleInputChange (called by MUI's onInputChange) does it.
I'm keeping the useEffect to throw an error if the user does not provide inputText along with optionText, but it could probably be moved in handleInputChange or finalOnBlur.
| >['onInputChange'] | ||
| >( | ||
| (event, newInputValue, reason) => { | ||
| setFilterValue(newInputValue); |
There was a problem hiding this comment.
MUI fires onInputChange when the component is mounted. In the previous iteration, event could be null resulting in setFilterValue not being called properly.
| @@ -583,7 +583,7 @@ const CompanyInput = () => { | |||
| choices={choicesWithCurrentCompany} | |||
| optionText="name" | |||
| disabled={isLoading} | |||
| onInputChange={e => setFilter({ q: e.target.value })} | |||
| onInputChange={(_, newInputValue) => setFilter({ q: newInputValue })} | |||
There was a problem hiding this comment.
Could you also add this prop to the list of props in the 'Props' section, and create a new dedicated section for this prop with an example (similar to the other props)?
|
@Tdni any news on this one? |
tdnl
force-pushed
the
fix-autocomplete-effect
branch
from
4de3980
to
bc7c571
Compare
Problem
When providing
onInputChangeto an AutocompleteInput, auseEffectis run and resets the Textbox's value to the previous value.As a result, users can not manually type a value when
onInputChangeprovided.Solution
It turns out the
useEffectis not necessary if React-Admin's customonInputChangeproperly sets the Textbox's state whenever it is called.