Custom Values In Antd Select Widget

[Yash95Garg]

I'm working on a use case where the user can select from a pre-populated list or enter a custom value. Additionally, they can use the "contains" operator to filter values.

I implemented this functionality using Ant Design’s Select component with a custom dropdown. The dropdown works as expected when selecting from the existing list of values. However, when a custom value is added, it returns null and doesn't work as expected.

Can anyone help me resolve this issue? I would appreciate any guidance on how to ensure that added values are correctly handled in the filtering logic.

@ukrbublik pls help
`
return (
<Select
disabled={readonly}
placeholder={placeholder}
size={renderSize}
value={value !== undefined ? String(value) : undefined}
onChange={handleChange}
{...omit(customProps, [""])}
style={{ width: 300 }}
showSearch
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: "8px 0" }} />
<Space style={{ padding: "0 8px 4px" }}>
<Input
placeholder="Please enter item"
ref={inputRef}
value={inputValue}
onChange={handleInputChange}
onKeyDown={(e) => e.stopPropagation()}
/>
<Button
type="text"
icon={}
onClick={handleAddOption}
>
Add item


</>
)}
>
{options.map(({ key, value }) => (

{value}

))}

);

const handleAddOption = (e) => {
e.preventDefault();
if (inputValue && !options.some((option) => option.key === inputValue)) {
const newOption = { key: inputValue, value: inputValue };
setOptions((prevOptions) => [...prevOptions, newOption]);
setInputValue("");
setValue(inputValue);
setTimeout(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, 0);
}
};

`

[ukrbublik]

Have you tried fieldSettings.allowCustomValues?

[Yash95Garg]

I tried this but working only in multiselect component, I want the same functionality in select widget. could you please share an example of customwidget

[ukrbublik]

Using this option with select component can help to bypass validation which by default allow only values in listValues

[Yash95Garg]

Giving this kind of response, showing no data

actionType: { label: "Action Type", type: "select", valueSources: ["value"], fieldSettings: { listValues: [ { value: "action1", title: "Action1" }, { value: "action2", title: "Action2" }, { value: "action3", title: "Action3" } ], allowCustomValues: true, } },