Bootstrap 5 offcanvas with filterable dropdown

Radzen.Blazor Components
1

Hi,

I'm trying to use filterable Radzen drop down with bootstrap 5 offcanvas component ,when I'm using it the input search of the dropdown is not focusable ,here page code:


<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
    Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
    Button with data-bs-target
</button>

<div class="offcanvas offcanvas-end w-50" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <RadzenDropDown AllowClear="true" TValue="string" Style="width:300px" AllowFiltering="true"
                        Data=@(customers.Select(c =>c.CompanyName).Distinct())
            />
</div>
</div>
@code {
    public class Customer
    {
        public int CustomerId { get; set; }
        public string CompanyName { get; set; }
    }

    private List<Customer> customers = new List<Customer>();

    protected override Task OnInitializedAsync()
    {
        customers.Add(new Customer { CustomerId = 1, CompanyName = "Company 1" });
        customers.Add(new Customer { CustomerId = 2, CompanyName = "Company 2" });
        customers.Add(new Customer { CustomerId = 3, CompanyName = "Company 3" });
        customers.Add(new Customer { CustomerId = 4, CompanyName = "Company 4" });
        return base.OnInitializedAsync();
    }


}```
![radzen|690x392](upload://wXpPqyP3ExxyNx2oLYIihxWbF4m.gif)
2

It is probably a z-index issue. You can increase the z-index of the RadzenDropDown like this:

.rz-dropdown-panel {
  z-index: 2000 !important;
}
3

Thanks for your reply.
It doesn't work with me,z-index for canvas =1050

image
image1048×454 28.7 KB

4

You can then inspect the CSS applied to the <input> element which represents the filter textbox.

5

Hi Korchev,

I tried to remove applied CSS on input one by one but no luck ,the input can't be focused ,appreciate your input.

6

I am afraid I don't have any other input. If you prepare a reproduction I can probably try and troubleshoot further.

7

@korchev
DropDownInCanvas.zip (800.3 KB)

Thanks

8

The Bootstrap offcanvas does not allow focus in elements that are not its children (such as the popup of RadzenDropDown which appends to the body element).

9

will adding optional parameter to dropdown component (popup Container Selector) solve my issue? if this parameter has value then the popup will be appended to this selector(in my case offcanvas body) ,if no value then it will be appended to body, what do you think? is this solution applicable?

10

I can't tell for sure and unfortunately time does not permit to test it any time soon.

11

Thanks for your help @korchev ,i will try to find alternative solution

12

Is this problem already fixed in the current version of Radzen?

13

No and it can't be fixed in Radzen.Blazor. It is how Bootstrap is implemented.

14

I understood. What a shame. I tested it by changing the z-index of the .rz-dropdown-filter (input) but without success. I don't know if there is any other way around it.

15

You can use Radzen's dialog or sidebar instead of bootstrap.

16

@korchev Hello, I'm using the latest version of Radzen library but still I'm having this issue. Could you please advise anything helpful?

17

@Ali013 as I've said before this is how Bootstrap works. We can'd to anything to influence its behavior. You can use Radzen's components instead which don't cause such problems.

18

Got it, thank you for response.