I have a container div with input field and hidden div inside. And when input is in focus I need to open second div with dropdown. How to hide that second div only when clicked outside parent container?

<div class="container" >
    <div class="_search-type">
      <button [nzDropdownMenu]="menu"
      >
        <div class="t-text-xs">
          <i *ngIf="!searchTypeItem" class="fa fa-user t-mr-2"></i>
          <i *ngIf="searchTypeItem?.label === SearchValue.LEAD" class="fa fa-user t-mr-2"></i>
          <i *ngIf="searchTypeItem?.label === SearchValue.EMAIL" class="fa fa-envelope t-mr-2"></i>
          <i *ngIf="searchTypeItem?.label === SearchValue.COMPANY" class="fa fa-building t-mr-2"></i>

          {{ !searchTypeItem ? 'Lead' : searchTypeItem?.label }}
        </div>
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul>
          <li>
            <i>1</i>
            <i>2</i>
            <i>3</i>
          </li>
        </ul>
      </nz-dropdown-menu>
    </div>
    <input
      id="searchInput"
      placeholder="Search"
      type="search"
    />
    <button class="t-hidden" type="submit" name="submit"></button>
  </div>

1st div

When in focus