Native DropDownList issues

7 posts, 1 answers
  1. Wayne Hiller
    Wayne Hiller avatar
    77 posts
    Member since:
    Sep 2005

    Posted 30 Jan Link to this post

    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

     

  2. Plamen
    Admin
    Plamen avatar
    3040 posts

    Posted 03 Feb Link to this post

    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
  3. Wayne Hiller
    Wayne Hiller avatar
    77 posts
    Member since:
    Sep 2005

    Posted 03 Feb in reply to Plamen Link to this post

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

     

    This shows the issue.

  4. Dimitar
    Admin
    Dimitar avatar
    463 posts

    Posted 05 Feb Link to this post

    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
  5. Wayne Hiller
    Wayne Hiller avatar
    77 posts
    Member since:
    Sep 2005

    Posted 11 Feb in reply to Dimitar Link to this post

    Yes those are the issues I am seeing. Any idea how I can get around the issue?
  6. Answer
    Plamen
    Admin
    Plamen avatar
    3040 posts

    Posted 12 Feb Link to this post

    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
  7. Wayne Hiller
    Wayne Hiller avatar
    77 posts
    Member since:
    Sep 2005

    Posted 12 Feb in reply to Plamen Link to this post

    That fixed it, thank you very much :)

     

    Wayne

Back to Top