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}
/>
);
}