Issue with compareOption Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
See original GitHub issueI found an issue with compareOption function when changes getOptionValue and getOptionLabel to a different (value|label) structure.= using with AsyncCreatable.
Follow the example to replicate.
The options are loaded from an endpoint using callback handler, with the JSON structure: [{ id: 1, name: 'teste1' }, { id: 2, name: 'teste2' }, { id: 3, name: 'teste3' } ]
const customFilter = createFilter({
ignoreCase: false,
ignoreAccents: false,
trim: false,
matchFrom: 'any',
});
<AsyncCreatableSelect
name="tag"
id="tag"
isMulti
isClearable
placeholder="Marque algumas tags para este registro"
getOptionValue={option => option.id}
getOptionLabel={option => option.id}
filterOption={customFilter}
loadingMessage={e => `Carregando opções próximas de '${e.inputValue}'`}
noOptionsMessage={e => `Sem opções disponíveis para escolha`}
formatCreateLabel={e => `Criar uma nova tag com rótulo '${e}'`}
components={{ Option: Option, ...makeAnimated() }}
loadOptions={loadOptions}
/>
Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined at compareOption (Creatable.js?067d:40) at eval (Creatable.js?067d:51) at Array.some (<anonymous>) at isValidNewOption (Creatable.js?067d:50) at Creatable.componentWillReceiveProps (Creatable.js?067d:133) at callComponentWillReceiveProps (react-dom.development.js?cada:11528) at updateClassInstance (react-dom.development.js?cada:11720) at updateClassComponent (react-dom.development.js?cada:13154) at beginWork (react-dom.development.js?cada:13825) at performUnitOfWork (react-dom.development.js?cada:15864)
When I got the function:
var compareOption = function compareOption(inputValue, option) { var candidate = inputValue.toLowerCase(); return option.value.toLowerCase() === candidate || option.label.toLowerCase() === candidate; };
Issue Analytics
- State:
- Created 5 years ago
- Reactions:25
- Comments:10 (3 by maintainers)
Same issue here. Cannot use
Creatable
because it doesnt respectgetOptionValue
andgetOptionLabel
props.I think, it has already multiple PR about that subject …
I also did it by overriding :