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 defaultvalue and value for options with checkbox only works if options reference is passed #18499

Closed
DarkKnight1992 opened this issue Nov 22, 2019 · 11 comments · Fixed by #18516
Labels
component: autocomplete This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@DarkKnight1992
Copy link
Contributor

Autocomplete defaultvalue for checked options only works if options reference is passed

I created a demo to represent this issue
https://codesandbox.io/s/material-demo-4imuq

In the example, both Autocompletes are able to show the selected values in the input field correctly the issue arises in the second autocomplete when you open the autocomplete you can only see checkbox for the only one value.

Current Behaviour
image

Expected Behaviour
image

My apology if i didn't articulate the bug precisely

@eps1lon
Copy link
Member

eps1lon commented Nov 22, 2019

We document this for the Select component https://material-ui.com/api/select/#props (see value). We need to document it for the Autocomplete component as well.

@eps1lon eps1lon added docs Improvements or additions to the documentation component: autocomplete This is the name of the generic UI component, not the React module! labels Nov 22, 2019
@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 22, 2019
@oliviertassinari
Copy link
Member

This is related to #18443. An update of the documentation would be great. Maybe something like this?

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 3b1fe0368..99b6ac4f4 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -597,6 +597,9 @@ Autocomplete.propTypes = {
   renderTags: PropTypes.func,
   /**
    * The value of the autocomplete.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   * You can customize the equality behavior with the `getOptionSelected` prop.
    */
   value: PropTypes.any,
 };

@ChawinTan
Copy link

Hey @oliviertassinari !

Can I take this up if no one is working on it?

@oliviertassinari
Copy link
Member

Sure :)

ChawinTan pushed a commit to ChawinTan/material-ui that referenced this issue Nov 23, 2019
@ChawinTan
Copy link

@DarkKnight1992
Copy link
Contributor Author

thanks @eps1lon

@DarkKnight1992
Copy link
Contributor Author

is there a way to handle this without passing the reference object ?

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 25, 2019

@DarkKnight1992 we have two follow-up issues open about this problem. One is about adding a prop to customize the equality check. One is about adding a warning so developers can find this prop. They are good to take, in case you want to push them forward and open pull requests :).

@DarkKnight1992
Copy link
Contributor Author

@oliviertassinari would be glad to since i need it one way or another.

@florleb
Copy link

florleb commented Nov 27, 2019

I had the same problem i had to hack the renderOption :/
image

@oliviertassinari
Copy link
Member

See #18514 and #18443 as two good follow up on this problem.

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! docs Improvements or additions to the documentation 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.

5 participants