Multiselect header/footer

1 Answer 13 Views
MultiSelect
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan asked on 18 Dec 2025, 02:28 PM | edited on 19 Dec 2025, 09:12 AM
Hi Telerik Team,

How can I force on header/footer click to not to close a dropdown?
I want "Select All" to be a part of header, not to be a part of list of items as mentioned here:
https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-hfkoyn?file=app%2Fmain.jsx

Btw, this (if all dependencies updated) doesn't work anymore:
https://stackblitz.com/edit/react-7vxshz-mo7jrl?file=app/main.jsx

Regards,
Bohdan

1 Answer, 1 is accepted

Sort by
0
Yanko
Telerik team
answered on 19 Dec 2025, 10:52 AM

Hi, Bohdan,

Yes, you can keep the KendoReact MultiSelect dropdown open when clicking a custom header or footer element (such as a "Select All" button). You need to stop the propagation of the click event of the KendoReact Button. This ensures the dropdown does not blur and close when the button is clicked. I prepared an example to demonstrate this solution:

You mentioned that the linked StackBlitz does not work with updated dependencies. This is due to a version mismatch between KendoReact(v4.4.0)  and Kendo Themes(latest). Here is the fixed version:

Please do not hesitate to ask if I can further help.

Regards,
Yanko
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.

Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
commented on 19 Dec 2025, 05:28 PM | edited

Hi Yanko,
thank you for the provided examples.

I have a couple of follow-up questions regarding the MultiSelect architecture:

    1. Why are the header and footer not treated as part of the dropdown “user interaction area”?
From what I see, any focusable element (input, textarea, etc.) placed in the header or footer will inevitably cause the popup to close due to the blur logic. This effectively means that header/footer can only contain non-focusable controls (like buttons), which does not fit our design and UX requirements.

    2. This behavior makes it impossible to place interactive, focusable UI (e.g. a search input) inside the header or footer. From our perspective, this looks like a limitation of the MultiSelect’s extensibility rather than a misuse of the component.

In your opinion:
-Is this behavior intentional and unlikely to change due to multiselect component's architecture?

-Or is there a chance that header/footer could be treated as part of the interactive popup area in the future?

-Otherwise, would you recommend recreating MultiSelect-like functionality using Popup / lower-level components for such use cases where we want to have a field with dropdown component like this https://www.telerik.com/kendo-react-ui/components/grid/filtering/advanced-filtering
?
(the popup of grid's filtering)

I’d appreciate your honest take on whether this is a supported scenario or something we should explicitly avoid with the current MultiSelect.

Best regards,
Bohdan

Tags
MultiSelect
Asked by
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Yanko
Telerik team
Share this question
or