How can I use a kendo-dropdownlist inside an ngbDropdown

[Simon]

I'm implementing a search form using an ngbDropdown and the form contains a kendo-dropdownlist (to select what object type they want to search)

Unfortunately, when I select an option from the dropdown list, the menu closes. "autoClose" set to "false" works, but gives unwanted behaviour (in that the form itself almost never goes away). Worse, "autoClose" set to "outside" makes no difference.

Is there something I'm doing wrong?

Just to give an idea of what I'm doing, this is the beginning of the code (using Kendo 17.3.12):

<div ngbDropdown [autoClose]="'outside'" #searchMenu="ngbDropdown">
  <div id="searchMenuInner" ngbDropdownToggle>
    <span class="fa-solid fa-magnifying-glass"></span>
  </div>
  <div ngbDropdownMenu aria-labelledby="searchMenuInner">
    <div ngbDropdownItem>
      <div class="menu-header">Search</div>
      <div class="menu-item">
        <kendo-dropdownlist #searchType [data]="searchableItems"

 

[Zornitsa]

Hi Simon,

Thank you for the code snippet provided.

The explained behavior of the ngbDropdownMenu closing upon selecting an item from the DropDownList component is expected because the DropDownList popup is rendered outside the boundaries of the ngbDropdownMenu. This is because by default the popup of the DropDownList is appended to the root component.

Thus, setting autoClose to "outside" will trigger the closing of the ngbDropdownMenu since the click inside the DropDownList popup is actually outside the boundaries of the ngbDropdownMenu. For a better understanding of this behavior, you can inspect the DOM of the page and observe where the DropDownList popup gets positioned in the DOM when it is opened.

With the above being said, what could be done in order to prevent the closing of the ngbDropdownMenu when selecting an item from the DropDownList popup, the developer can use the appendTo property of the DropDownList's popupSettings and append the popup to the container of the <kendo-dropdownlist> component:

<kendo-dropdownlist #dropdownlist [data]="searchableItems" [popupSettings]="{ appendTo: dropdownlist.container }">
</kendo-dropdownlist>

To demonstrate the results from the above suggestion, I am linking below a StackBlitz example that uses your code snippet to implement an identical scenario to the explained one and has the suggested appendTo approach applied:

• https://stackblitz.com/edit/angular-5duduglj

I hope the provided information sheds some light on the matter. Let me know if any further assistance is needed.

Regards,
Zornitsa
Progress Telerik

[Simon]

That's absolutely perfect, thank you.