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
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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
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.
Rank 1