Skip to content
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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

tdnl
Copy link
Contributor

@tdnl tdnl commented Sep 5, 2023

Problem

When providing onInputChange to an AutocompleteInput, a useEffect 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 custom onInputChange properly sets the Textbox's state whenever it is called.

@@ -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);
Copy link
Contributor Author

@tdnl tdnl Sep 5, 2023

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);
Copy link
Contributor Author

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.

@tdnl tdnl marked this pull request as ready for review September 5, 2023 14:32
Copy link
Contributor

@slax57 slax57 left a 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 })}
Copy link
Contributor

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)?

@djhi
Copy link
Collaborator

djhi commented Dec 22, 2023

@Tdni any news on this one?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants