[Autocomplete] adding getOptionForValue property #27442
Labels
component: autocomplete
This is the name of the generic UI component, not the React module!
duplicate
This issue or pull request already exists
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.
The text was updated successfully, but these errors were encountered: