Native DropDownList issues

[Wayne Hiller]

I have started using the new Vue Native DropDownList and found a few issues when it is used inside a popup (bootstrap-vue modal).

 

The dropdown list will not display. I can make it display by adding:

.k-animation-container {
    z-index: 100000;
}

 

Now it displays but clicking out side the dropped down list will not close it.

 

Wayne

 

[Plamen]

Hello,

Would you please elaborate the scenario by isolating the issue in a sample Stackblitz or Codesandbox example? Here is a sample where the Native Vue DropdownList worked correctly in a Modal Kendo window for example - https://stackblitz.com/edit/bmcc9y-2deemy?file=index.html

I will be looking forward to your reply.

Regards,
Plamen
Progress Telerik

[Wayne Hiller]

https://stackblitz.com/edit/bmcc9y-1z9jsn

 

This shows the issue.

[Dimitar]

Hello,

Thank you for providing a reproduction sample.

On my side I see that a dropdownlist with filter opens and closes as expected. The issue I observe is related to having dropdownlist with filter inside bootstrap vue dialog - on opening the dropdownlist, the filter input is not focused and then clicking somewhere else inside the dialog does not collapse the dropdownlist. Is this the problematic behavior you are describing? If not, please clarify it.

Note that the same scenario is not reproducible when using kendo vue dialog - example - on opening the dropdown the filter input is focused as expected, then clicking outside the dropdown closes it.

Regards,
Dimitar
Progress Telerik

[Wayne Hiller]

Yes those are the issues I am seeing. Any idea how I can get around the issue?

[Plamen]

Hello,

It seems like the bootstrap-vue modal allows focusing an input that is outside of the model element only if you set the ignore-enforce-focus-selector prop as it is described in the Keyboard navigation section here - https://bootstrap-vue.js.org/docs/components/modal. In our case the popup is indeed rendered outside of the model element and we need to add :ignore-enforce-focus-selector="'.k-list-filter input'" . Here is an example stackblitz - https://stackblitz.com/edit/bmcc9y-ruxttr?file=index.html.

Regards,
Plamen
Progress Telerik

[Wayne Hiller]

That fixed it, thank you very much :)

 

Wayne