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] adding getOptionForValue property #27442

Closed
rajaspatil opened this issue Jul 26, 2021 · 2 comments
Closed

[Autocomplete] adding getOptionForValue property #27442

rajaspatil opened this issue Jul 26, 2021 · 2 comments
Labels
component: autocomplete This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists

Comments

@rajaspatil
Copy link

rajaspatil commented Jul 26, 2021

Suppose options = [{id:'Id1', description:'desc 1', addFld1: 'additional Field 1' addFld2:'Additional Field 2'},
{id:'Id2', description:'desc 2', addFld1: 'additional Field 1' addFld2:'Additional Field 2'},
{id:'Id3', description:'desc 3', addFld1: 'additional Field 1' addFld2:'Additional Field 2'}, ...]
Where Id is unique and output of PK from database then any option can be uniquely selected by ID Field.

At present as per documentation "The value must have reference equality with the option.", so any single object from options has to be set as value. In our use case the form is suppose to pass only id as a Form Field value but autocomple needs whole object to be set as value to function properly. I have tried functionality given below with existing getOptionSelected property but the Input shows undefined since getOptionLabel gets option parameter as undefined since value given as Id is not satisfying "The value must have reference equality with the option." hence internal state for "currently selected option" is undefined. so if following property is provided and if it gets called to update internal state for "currently selected option" instead of using value as it is to check "referential equality" within options to set the state then our use case can be satisfied.

if user provides getOptionForValue(options, value) as follows then use to set internal state otherwise go for referential equality
getOptionForValue= {(
(options, value) => (
options.find((optionObj) => (optionObj.id === value)
// here optionObj with "referential equality" is being returned as per present working
// which can be used to set internal state of selected Option as full object and
// can be passed to getOptionLabel, renderOption, getOptionSelected etc. etc.
)
)}

onChange = { (e,newOptionObj) => setState(...state, state.formFld: newOptionObj.id)}
// here we can have value set as ID

defaultVale = state.formFld;
// we will set here ID value and it should trigger call to getOptionForValue to set internal state of selected option.

@rajaspatil rajaspatil added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 26, 2021
@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Jul 26, 2021
@eps1lon
Copy link
Member

eps1lon commented Aug 2, 2021

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-next), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

@eps1lon eps1lon added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 2, 2021
@oliviertassinari oliviertassinari added duplicate This issue or pull request already exists and removed status: waiting for author Issue with insufficient information labels Aug 12, 2021
@oliviertassinari
Copy link
Member

Duplicate of #23708

@oliviertassinari oliviertassinari marked this as a duplicate of #23708 Aug 12, 2021
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! duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants