This is a migrated thread and some comments may be shown as answers.

onFilterChange not firing on React ComboBox 2.6.1 or 2.7.1

3 Answers 489 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
IT Dept
Top achievements
Rank 1
IT Dept asked on 07 Mar 2019, 03:58 PM

I'm attempting to use a kendo React ComboBox and implement filtering, but the onFilterchange event isn't firing when I type info into the search, just the OnChange event when I select an item from the full dropdown list.

 

function MyComponent(props) {
const { value, data } = props;
const [filteredData, setFilteredData] = useState(data);
const handleChange = (e: ComboBoxChangeEvent) => {
const value: any = e.target.value;
if (value === null || typeof value === 'string') {
props.onChange(value);
} else if (typeof value === 'object') {
if (value.hasOwnProperty(props.valueField)) props.onChange(value[props.valueField]);
} else {
props.onChange(e);
}
};
const filterChange = (e: ComboBoxFilterChangeEvent) => {
setFilteredData(filterBy(data, e.filter));
};
return (
<KendoComboBox
style={{ width: '100%' }}
data={filteredData}
textField={props.textField.toString()}
onChange={handleChange}
onFilterChange={filterChange}
disabled={props.disabled}
name={props.name}
placeholder={props.placeholder || ''}
suggest={true}
value={(value && data.find(d => d[props.valueField] == value)) || value || ''}
itemRender={props.itemRender}
onBlur={props.onBlur}
/>
);
}

3 Answers, 1 is accepted

Sort by
0
IT Dept
Top achievements
Rank 1
answered on 07 Mar 2019, 04:16 PM
Nevermind, I wasn't setting filterable={true}
0
IT Dept
Top achievements
Rank 1
answered on 07 Mar 2019, 04:20 PM

A related issue is that Minimum Filter Length (https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-minimum-filter-length) doesn't seem to prevent the dropdown from opening, it just prevents the first characters from doing any filtering.

Confirmed here: https://qvn9e1.run.stackblitz.io

0
Stefan
Telerik team
answered on 08 Mar 2019, 08:24 AM
Hello, Eric,

Thank you for the details.

This is made by design, so the user can see the current options.
Still, it can be controlled using the opened property. It requires programmatically controlling one the list will be opended based on a boolean flag:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/ComboBoxProps/#toc-onopen

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/ComboBoxProps/#toc-onclose

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/ComboBoxProps/#toc-opened

I made an example demonstrating this:

https://stackblitz.com/edit/react-ijteef?file=app/main.js

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
IT Dept
Top achievements
Rank 1
Answers by
IT Dept
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or