Предотвращение закрытия выпадающего меню, если внутри выпадающего меню происходит щелчок

Question

Я использую bootstrap с угловым режимом и использую выпадающий модуль начальной загрузки. Я пытаюсь держать раскрывающееся меню открытым, если щелчок происходит внутри.

Я смог добиться этого, используя event.stopPropagation(). Однако, если у меня есть 2 выпадающих списка, и я делаю следующее, это не работает:

Сценарий 1: (правильное поведение)

1) Open Dropdown 1
2) Click anywhere inside the dropdown menu, it works perfectly and the menu does not close.
3) Click outside. Menu Closes. Correct behavior.

Сценарий 1: (неожиданное поведение)

1) Open Dropdown1
2) Open Dropdown2

В этом сценарии раскрывающееся меню1 должно было закрыться в тот момент, когда я щелкнул раскрывающееся меню2. Но этого не происходит.

Вот мой код:

<div class="container">
  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

</div>

Вот мой метод openDropdown :

  openDropdown(e){
    e.stopPropagation();
  }

Вот ссылка на Stackblitz: Stackblitz

Мой вопрос заключается в том, как сохранить раскрывающееся меню открытым, если щелчок происходит внутри раскрывающегося раскрывающегося списка, но закрыть его, если щелчок происходит где-либо снаружи. В моем случае, если внешний щелчок является другим раскрывающимся списком, ранее открывшееся раскрывающееся меню не закрывается.

Answer 1

Я обновил ваш HTML-файл (см. Ниже), чтобы метод event.stopPropagation () вызывался сразу после того, как пользователь щелкнет раскрывающийся список. Кажется, работает, я нашел ответ здесь: Как предотвратить закрытие раскрывающегося углового загрузчика (событие Unbind, которое было связано с директивой)

Метод openDropdown () можно удалить из файла ts. Надеюсь, это поможет!

<div class="container">
  <div>
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

  <div>
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

</div>