starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-03 21:29:20 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Filter option input for dropdown is not clickable on bootstrap modal #149

New Issue
Closed
opened 2026-01-29 17:32:21 +00:00 by claunia · 6 comments
claunia commented 2026-01-29 17:32:21 +00:00
Owner
Copy Link

Originally created by @notiqq on GitHub (Jul 8, 2021).

Describe the bug
Hi,
I have faced with the issue of embedding Radzen Blazor DropDown with virtualization using IQueryable on bootstrap modal window. In general the dropdown works fine inside modal, it reacts on click and allows to scroll and to select something. However, the search filter option is not clickable. When I click on it does not react in any way and therefore does not allow to type anything inside filter input.

To Reproduce
Steps to reproduce the behavior:

  1. Embed dropdown with AllowFiltering="true" in any bootstrap modal window
  2. Click on dropdown
  3. Click on filter text input
  4. See bug

Code example:
https://appp.me/xlnUrg

Expected behavior
Expected text input for filter will be clickable and will allow to enter text for filtering purposes.

Screenshots
If applicable, add screenshots to help explain your problem.
https://i.imgur.com/hAsSkTT.png

Desktop (please complete the following information):

  • OS: Ubuntu Latest
  • Browser: Chrome
  • Version: Latest
Originally created by @notiqq on GitHub (Jul 8, 2021). **Describe the bug** Hi, I have faced with the issue of embedding Radzen Blazor DropDown with virtualization using IQueryable on bootstrap modal window. In general the dropdown works fine inside modal, it reacts on click and allows to scroll and to select something. However, the search filter option is not clickable. When I click on it does not react in any way and therefore does not allow to type anything inside filter input. **To Reproduce** Steps to reproduce the behavior: 1. Embed dropdown with AllowFiltering="true" in any bootstrap modal window 2. Click on dropdown 3. Click on filter text input 4. See bug Code example: https://appp.me/xlnUrg **Expected behavior** Expected text input for filter will be clickable and will allow to enter text for filtering purposes. **Screenshots** If applicable, add screenshots to help explain your problem. https://i.imgur.com/hAsSkTT.png **Desktop (please complete the following information):** - OS: Ubuntu Latest - Browser: Chrome - Version: Latest
claunia commented 2026-01-29 17:32:23 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Jul 8, 2021):

It is probably the "feature" of the Blazor modal which prevents focus of other elements. More info here: https://forum.radzen.com/t/bootstrap-5-offcanvas-with-filterable-dropdown/8359/8

@akorchev commented on GitHub (Jul 8, 2021): It is probably the "feature" of the Blazor modal which prevents focus of other elements. More info here: https://forum.radzen.com/t/bootstrap-5-offcanvas-with-filterable-dropdown/8359/8
claunia commented 2026-01-29 17:32:24 +00:00
Author
Owner
Copy Link

@notiqq commented on GitHub (Jul 8, 2021):

Thank you for reply. However, I have significant doubts regarding z index. It's already there, and it applies on entire container. In container we have 2 divs, one for filter and another one for options. It's possible to select options, but impossible to select filter even that all of them are inside div with the same z-index.
https://i.imgur.com/OpVsObj.jpg

Also, I have tried to add z-index !important to filter div and input, but it still does not work.

@notiqq commented on GitHub (Jul 8, 2021): Thank you for reply. However, I have significant doubts regarding z index. It's already there, and it applies on entire container. In container we have 2 divs, one for filter and another one for options. It's possible to select options, but impossible to select filter even that all of them are inside div with the same z-index. https://i.imgur.com/OpVsObj.jpg Also, I have tried to add z-index !important to filter div and input, but it still does not work.
claunia commented 2026-01-29 17:32:25 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Jul 8, 2021):

The issue is not the z-index. Check my reply in the forum thread.

@akorchev commented on GitHub (Jul 8, 2021): The issue is not the z-index. Check my reply in the forum thread.
claunia commented 2026-01-29 17:32:25 +00:00
Author
Owner
Copy Link

@notiqq commented on GitHub (Jul 8, 2021):

ah, ok, thanks.
FYI I have been previously using KendoUI with bootstrap modal, as far as I may remember, there was no such issue. So it was handled somehow.

@notiqq commented on GitHub (Jul 8, 2021): ah, ok, thanks. FYI I have been previously using KendoUI with bootstrap modal, as far as I may remember, there was no such issue. So it was handled somehow.
claunia commented 2026-01-29 17:32:25 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Jul 8, 2021):

I am pretty sure Kendo UI attaches to the body by default so it will suffer from the same problem unless you set the appendTo option. We may introduce such a setting in Radzen.Blazor in a future release.

@akorchev commented on GitHub (Jul 8, 2021): I am pretty sure[ Kendo UI attaches to the body](https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.popup.js#L90) by default so it will suffer from the same problem unless you set the appendTo option. We may introduce such a setting in Radzen.Blazor in a future release.
claunia commented 2026-01-29 17:32:25 +00:00
Author
Owner
Copy Link

@Cristhianmassa commented on GitHub (Oct 30, 2024):

ah, ok, thanks. FYI I have been previously using KendoUI with bootstrap modal, as far as I may remember, there was no such issue. So it was handled somehow.

Pls can you share the code i have the the same bug

@Cristhianmassa commented on GitHub (Oct 30, 2024): > ah, ok, thanks. FYI I have been previously using KendoUI with bootstrap modal, as far as I may remember, there was no such issue. So it was handled somehow. Pls can you share the code i have the the same bug
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#149
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?