-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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.
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
fix autocomplete sets previous value using onInputChange #9243
base: master
Are you sure you want to change the base?
Conversation
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
MUI fires onInputChange
when the component is mounted. In the previous iteration, event
could be null resulting in setFilterValue
not being called properly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Other than that it looks good to me, thanks and well done!
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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? |
4de3980
to
bc7c571
Compare
Problem
When providing
onInputChange
to an AutocompleteInput, auseEffect
is run and resets the Textbox's value to the previous value.As a result, users can not manually type a value when
onInputChange
provided.Solution
It turns out the
useEffect
is not necessary if React-Admin's customonInputChange
properly sets the Textbox's state whenever it is called.