Open AutoComplete dropdown on entering the control

1 Answer 1105 Views
AutoComplete
Pieter
Top achievements
Rank 1
Iron
Iron
Pieter asked on 21 Jul 2021, 01:07 PM

Hi,

Is it possible to open the "dropdown" for the AutoComplete component by default when entering the contol (giving it focus/clicking on it)?

So for example: in the samples of the Getting started of the AutoComplete (https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/) that you just click on the control and that it shows all countries instead of only showing those after you start typing?

Regards,

Pieter

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Jul 2021, 05:01 AM

Hello, Pieter,

This can be done by updating the component internal state, during the onFocus event:

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

I made an example showcasing this:

https://stackblitz.com/edit/react-ad8mdw?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Pieter
Top achievements
Rank 1
Iron
Iron
commented on 22 Jul 2021, 05:29 AM

Thanks for the example, this works when the control doesn't have the focus yet, but how do I solve this when the control already has the focus (in your example: click on the control and hit escape)?
Stefan
Telerik team
commented on 22 Jul 2021, 06:49 AM

If the requirement is to open it each time the user clicks on in:

- get the component ref

- wrap the component in a span element and open it during the onClick of the span.

I updated the example:

https://stackblitz.com/edit/react-ad8mdw-gvivk9?file=app/main.jsx

Tags
AutoComplete
Asked by
Pieter
Top achievements
Rank 1
Iron
Iron
Answers by
Stefan
Telerik team
Share this question
or