Bug: Dropdown menu item doesn't receive focus on click in iOS

[k-spen]

Bug description:

The dropdown menu items don't receive focus on click in iOs, multiple versions.

Link to minimally-working code that reproduces the issue:

https://ng-bootstrap.github.io/#/components/dropdown/examples

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7

ng-bootstrap: 4.0.2+ (still a bug on your code example)

Bootstrap:4.4.1+

Multiple browser on iPhone including Safari, Chrome, FireFox and DuckDuckGo

This can also be repro'd on your site today in desktop at the mobile breakpoint (Chrome):

[haoolii]

I have the same question, I removed renderer.appendChild(dropdownElement, dropdownMenuElement); in dropdown.ts, it works, but I don't know what is this effect.

 private _resetContainer() {
    const renderer = this._renderer;
    const menuElement = this._menuElement;
    if (menuElement) {
      const dropdownElement = this._elementRef.nativeElement;
      const dropdownMenuElement = menuElement.nativeElement;

      // renderer.appendChild(dropdownElement, dropdownMenuElement);
      renderer.removeStyle(dropdownMenuElement, 'position');
      renderer.removeStyle(dropdownMenuElement, 'transform');
    }
    if (this._bodyContainer) {
      renderer.removeChild(this._document.body, this._bodyContainer);
      this._bodyContainer = null;
    }
  }

[maxokorokov]

Indeed the (focus) on the dropdown menu item is not triggered neither on desktop nor on mobile Safari 13

[maxokorokov]

Looks like the same issue with clicking on <button> as in #2780

[maxokorokov]

Actually I don't see anything we should fix on ng-bootstrap side here.

• Focus is not triggered on many browsers on <button> elements. That's just how they work, ex. see → https://stackoverflow.com/questions/42758815/safari-focus-event-doesnt-work-on-button-element
• The fact that the element is highlighted after closure is a long-standing mobile and iOS issue. It is not limited to dropdown, but to any element that will be hidden on click. ex. see → https://stackoverflow.com/questions/47802530/a-click-in-ios-safari-triggers-a-hover-state-on-element-underneath-where-you-t

Any comments are welcome

[maxokorokov]

Closing, please reopen if necessary