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] inputValue is always undefined in the renderOption prop #18254

Closed
2 tasks done
raducanb opened this issue Nov 7, 2019 · 2 comments · Fixed by #18268
Closed
2 tasks done

[Autocomplete] inputValue is always undefined in the renderOption prop #18254

raducanb opened this issue Nov 7, 2019 · 2 comments · Fixed by #18268
Labels
bug 🐛 Something doesn't work 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

@raducanb
Copy link

raducanb commented Nov 7, 2019

  • 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 😯

In the renderOption prop, the second parameter's key, inputValue, is always sent as undefined.

Expected Behavior 🤔

In the renderOption prop, the second parameter's key, inputValue, should be the text the user entered in the input field.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-8q8zf?fontsize=14

Steps:

  1. Write something in the input field.
  2. The list is filtered accordingly, but in the console the value of inputValue is always undefined.

Context 🔦

I'm trying to implement the Highlights behaviour described in the documentation: https://material-ui.com/components/autocomplete/#highlights.

Your Environment 🌎

Tech Version
Material-UI/core v4.6.0
Material-UI/lab v4.0.0-alpha.30
React v16.11.0
Browser Chrome (v77.0.3865.90)
@raducanb raducanb changed the title [Autocomplete] inputValue is never sent in the renderOption prop [Autocomplete] inputValue is always undefined in the renderOption prop Nov 7, 2019
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. component: autocomplete This is the name of the generic UI component, not the React module! labels Nov 7, 2019
@oliviertassinari
Copy link
Member

@raducanb Oops, thank you for the report. It's a leftover from the extraction of the core logic in useAutocomplete. What do you think of this diff?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
index 4160b0152..ad1503a2d 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -163,6 +163,7 @@ export default function useAutocomplete(
   getListboxProps: () => {};
   getOptionProps: ({ option, index }: { option: any; index: number }) => {};
   id: string;
+  inputValue: string;
   value: any;
   dirty: boolean;
   popupOpen: boolean;
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 72d7c84c3..396f5bb1a 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -731,6 +731,7 @@ export default function useAutocomplete(props) {
       };
     },
     id,
+    inputValue,
     value,
     dirty,
     popupOpen,

Do you want to work on a pull request? Thanks.

@raducanb
Copy link
Author

raducanb commented Nov 8, 2019

Sorry, I just saw the message. Thank you for the fast response and for the fix @AbdallahElroby & @oliviertassinari !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work 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