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

KendoReact DropDownButton Auto-Close Prevention

4 Answers 632 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 28 May 2020, 07:53 PM

Hello,

I currently am working on a project where we need a dropdownbutton that displays a checklist list where multiple items can be selected/checked before the list closes.

I know that several other Kendo React components have an auto-close flag or similar feature, but so far I have been unable to prevent the DropDownButton component from auto-closing whenever one of the items in the dropdown is selected.

Is there some way (either some existing parameter or known workaround) to prevent the close event from happening "onItemClick" for the DropDownButton as I only want it to happen "onBlur"?

4 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 29 May 2020, 01:44 PM

Hello, Andrew,

Currently, this can be done by using the custom rendering and stoping the on click event propagation:

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

Please have in mind that this will stop the onItemClick event as well, but as we are using custom renders, we can execute the same logic on the onClick that we use to prevent the propagation.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
CARLOS
Top achievements
Rank 1
answered on 23 Apr 2021, 05:42 PM

Hello Stefan,

I have a similar use case, except a regular text input instead of a checkbox. However focusing on the text field triggers the blur and closing of the dropdown. How can I prevent this? 

Here's what I've been able to do so far: https://stackblitz.com/edit/react-recfdf-sosv2j?file=app/main.jsx

0
Stefan
Telerik team
answered on 26 Apr 2021, 09:23 AM

Hello, Carlos,

This is expected as in this case the input is taking the focus and causes the popup the blur.

In general, this is a Button type component and it is expected and design to work as a button. Even if it has render props, it is not designed to render other interactable elements inside of it.

If the requirement is to render different elements inside of it, we can suggest using a regional button component, with a Popup component attached to it. This will allow full control over the close/open functionality of the Popup and allow rendering inputs in it:

https://www.telerik.com/kendo-react-ui-develop/components/popup/

 

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.

0
CARLOS
Top achievements
Rank 1
answered on 26 Apr 2021, 07:54 PM
I see. Thanks! 
Tags
General Discussions
Asked by
Andrew
Top achievements
Rank 1
Answers by
Stefan
Telerik team
CARLOS
Top achievements
Rank 1
Share this question
or