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

[Autocomplete] onInputChange it's fired in wrong moments #18568

Closed
2 tasks done
sclavijo93 opened this issue Nov 25, 2019 · 3 comments · Fixed by #18571
Closed
2 tasks done

[Autocomplete] onInputChange it's fired in wrong moments #18568

sclavijo93 opened this issue Nov 25, 2019 · 3 comments · Fixed by #18571
Labels
component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@sclavijo93
Copy link
Contributor

I don't know if I'm not understanding how it works or it's a bug, but onInputChange is executed when the component is mounted and when the TextField loses the focus.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

onInputChange is been fired when the component is mounted and when the TextField loses the focus.

Expected Behavior 🤔

onInputChange has to be fired only when the TextField has really fired

Steps to Reproduce 🕹

Steps:

  1. codesandbox.io reproduction
  2. The alert shows up when the page is fully loaded.
  3. Click on the TextField and then click outside.
  4. The alert shows up again.

Your Environment 🌎

Tech Version
Material-UI v4.7.0
React v16.10.2
Browser Chrome v78.0.3904.108 (64 bits)
@oliviertassinari
Copy link
Member

@sclavijo93 How does it cause an issue in your end?

@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Nov 25, 2019
@oliviertassinari
Copy link
Member

I guess we could only trigger the event if the value actually changes. Would it solve your problem?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index f833a0c0c..cc44ea60a 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -210,6 +210,10 @@ export default function useAutocomplete(props) {
       newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
     }

+    if (inputValue === newInputValue) {
+      return;
+    }
+
     setInputValue(newInputValue);

     if (onInputChange) {
@@ -635,6 +639,10 @@ export default function useAutocomplete(props) {
       handleOpen(event);
     }

+    if (inputValue === newValue) {
+      return;
+    }
+
     setInputValue(newValue);

     if (onInputChange) {

@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 25, 2019
@sclavijo93
Copy link
Contributor Author

@oliviertassinari it's referenced by #18559 because I'm trying to show the CircularProgress when the user types in the text field, but right now the CircularProgress is showed not only when the user types

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants