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:
Now it displays but clicking out side the dropped down list will not close it.
6 Answers, 1 is accepted
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.
This shows the issue.
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.
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.
That fixed it, thank you very much :)