This is a migrated thread and some comments may be shown as answers.

Native DropDownList issues

6 Answers 394 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
Wayne Hiller asked on 30 Jan 2020, 11:37 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 03 Feb 2020, 11:45 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
1
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
answered on 03 Feb 2020, 04:02 PM

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

 

This shows the issue.

0
Dimitar
Telerik team
answered on 05 Feb 2020, 03:09 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
answered on 11 Feb 2020, 05:58 PM
Yes those are the issues I am seeing. Any idea how I can get around the issue?
0
Accepted
Plamen
Telerik team
answered on 12 Feb 2020, 01:57 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
answered on 13 Feb 2020, 12:21 AM

That fixed it, thank you very much :)

 

Wayne

Tags
General Discussions
Asked by
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
Answers by
Plamen
Telerik team
Wayne Hiller
Top achievements
Rank 1
Veteran
Iron
Dimitar
Telerik team
Share this question
or