Ng-zorro popover closes when it's showed on hover and then hover the dropdown menu of a select component

Question

Reproduction link

https://stackblitz.com/edit/angular-tru7hd-xqtrkw?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html

Steps to reproduce

1. Hover the button
2. Click on the select
3. List item
4. List item

Hover one choice

What is expected?

Popover stay visible and we can click on the select choice

What is actually happening?

Popover disappears

Environment	Info
ng-zorro-antd	16.2.0
Browser	Firefox, Edge

Any idea how to workaround this ? Maybe with playing with some z-index ?
PS: I can't use click trigger instead of hover in my use case.

Answer 1

The reason the popover disappears is because after you select an item, you are no longer hovering.

You would need to make it so that the popover is the equal to or larger than the height of the select element when it is expanded.

To illustrate this solution you can modify the stackblitz example by wrapping the select element in a div with a large height.

For example:

  <div style="height: 300px;">

    <select nzPlaceholder="test">
      <option value="123" label="123"></option>
      <option value="46" label="46"></option>
    </select>
    </div>