Hi, I am using the Autocomplete Dropdown component and I should not show the dropdown if there is a special character typed and instead display a message. I achieved that but I am unable to fix the dropdown display. Can someone help me out please?
Basic behavior to achieve is dropdown shouldn't be shown initially, and should show ONLY when user starts typing in something and do not show dropdown in case user enters special characters and show a message.
P.S: I might have multiple autocomplete on a page. Any way to simplify my code?
Stackblitz: https://stackblitz.com/edit/react-dvpfg5?file=app/main.js
4 Answers, 1 is accepted
0
Arun
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2019, 11:50 PM
I achieved using this method.
https://stackblitz.com/edit/react-dvpfg5-za1o4l?file=app/main.js
Any optimizations can be done?
0
Hi,
The example looks correct and I don't think that any optimization is required. You can just simplify the code in the onChange handlers of the AutoComplete components. Here is an example for onChangeName:
Regards,
Nikolay
Progress Telerik
The example looks correct and I don't think that any optimization is required. You can just simplify the code in the onChange handlers of the AutoComplete components. Here is an example for onChangeName:
onChangeName = (event) => { const value = event.target.value; const isNameDropdownOpen = !this.containsSpecialCharacters(value); this.setState({ data2: this.filterData(value, source2), name: value, isNameDropdownOpen });}Regards,
Nikolay
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
0
Arun
Top achievements
Rank 1
Rank 1
answered on 18 Mar 2019, 12:09 PM
One thing missing is the dropdown doesnt close after selecting a value. How do I handle it?
0
Hello, Arun,
The list is not closed, as the "this.state.isCountryDropdownOpen" is set to false only on blur, not on close.
If the same logic is executed on the onClose event, the list will close after selecting a value:
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-onclose
https://stackblitz.com/edit/react-dvpfg5-4fsm7y?file=app/main.js
Regards,
Stefan
Progress Telerik
The list is not closed, as the "this.state.isCountryDropdownOpen" is set to false only on blur, not on close.
If the same logic is executed on the onClose event, the list will close after selecting a value:
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-onclose
https://stackblitz.com/edit/react-dvpfg5-4fsm7y?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