I am using react-select/creatable library to display dropdowns with options. I wanted to make use of the formatCreateLabel prop which displays a label. This label is based on the topmost option in the dropdown, so essentially in the formatCreateLabel function, I am sorting my list which is dynamic, and based on the topmost option I am showing the create option. Few things to note here — the create option is dependent on the topmost option in the dropdown list. I also wanted to show the create option even if there is an exact match.
Snippet of the format function:
const formatCreateLabel = (input) => {
const options = getSortedList(input, list); // using sort-matcher library for sorting
const firstItem = _.first(options);
const label = _.get(firstItem, 'label');
if (!_.isNil(firstItem)) return `Create wildcard "${label}"`;
};
/** My list option looks something like this (eg.)
const listOptions = [
{ label: 'alpha', key: 'a', value: 'a' },
{ label: 'alpea', key: 'ae', value: 'ae' },
{ label: 'beta', key: 'b', value: 'b' },
{ label: 'user.name', key: 'user.name', value: 'user.name' },
{ label: 'name', key: 'name', value: 'name' },
];
**/
<CreatableSelect
key={key}
options={list}
value={value}
onChange={onChange}
placeholder="Select..."
formatCreateLabel={formatCreateLabel}
{...props}
/>
The issue is the label is sometimes shown and sometimes it is not although I can see that a valid value is being returned from the formatCreateLabel function. What could be the issue here?
Also is there a way to continue showing the create new option even if there is an exact match?