dead-brownD
Refine4mo ago
30 replies
dead-brown

Select in ant dropdown filter

I'm building a custom table column dropdown filter using ant design components that uses a <Select> component as the filter input, and I'm having trouble with it rendering correctly. Initially, it displays all the options and, when an option is selected, it filters correctly, but subsequently, when I open the <DropdownFilter> again, the select displays the internal value of the selected option, not the label. Here's the relevant code:

<FilterDropdown {...props}>
<Select placeholder={filterPrompt} options={columnProps.filterProps?.enumerations}
allowClear value={props.selectedKeys?.[0] || undefined}
onChange={(val) => {
props.setSelectedKeys(val ? [val] : []);
props.confirm();
}} />
</FilterDropdown>

How can I get the select to always render the label of the selected option?
Was this page helpful?