NbContextMenu on NbUser not showing on Safari iOS

[clasqui]

Issue type

I'm submitting a ...

• bug report
• feature request

Issue description

Current behavior:

When using Nebular with a layout, placing an nb-user with context menu on header, clicking it on Apple iOS Safari doesn't open de context menu. Depending on the screen size, for responsive behaviour, you have to put the phone/tablet in landscape mode.

Expected behavior:

Opening the NbContextMenu when clicking on the NbUser

Steps to reproduce:

Create a Nebular App with layout. Place an nb-user with context menu on the header. Open application with Safari on iOS, and try to click on the user to show the menu.

Related code:

  <nb-action>
    <nb-user [nbContextMenu]="userMenu" [title]="rol" [name]="user.name" [picture]="picture"></nb-user>
  </nb-action>

Other information:

npm, node, OS, Browser

Node: v8.10.0, npm: 5.6.0
OS: iOS 12.2
Browser: Safari on iOS

Angular, Nebular

Angular: v7.2.6
Nebular: v3.4.2

[Kshitij-Banerjee]

I have the same issue.

This used to work in Rc-04 and started failing after I upgraded to 2.0.2 . That may hopefully narrow the problem down.
I couldn’t fix it and resorted to showing a separate modal from Nb user

[nilpaco]

Same here.

I work around it by adding a click event and then toggling the menu in the parent component using ViewChild, like so:

<nb-user name="username"
	title="email"
	[nbContextMenu]="items"
	nbContextMenuTag="profile-menu"
	**(click)="toggleMenu()"
	nbContextMenuTrigger="noop"**></nb-user>

@ViewChild(NbContextMenuDirective) contextMenu: NbContextMenuDirective;

toggleMenu() {
	this.contextMenu.toggle();
}

Hope it helps.

[cpw999cn]

Also on Safari iOS, you can't close a datepicker by clicking outside.

[yggg]

Looks like it's related to Safari odd behavior for click events bubbling. See this article for details.
Since nb-user doesn't meet criteria described here events don't bubble up and overlay triggers don't work.

As a workaround until we fix this, I can suggest using one of 3 options:

1. Use technique described in this comment. Thanks, @nilpaco.
2. Just add a click event handler to the nb-user element.
3. Add nb-user { cursor: pointer; } in styles 🙂.