Angular material paginator label not hiding on mobile

Question

Just wondering if anyone has run into this issue? On mobile devices, the label/tooltips on the paginator are not hiding after being activated. I believe it should hide after a delay but it stays on the screen. This mainly seems to be an issue on iPad. Any suggestions would be appreciated. Thanks.

Answer 1

What happens when you tap somewhere outside of paginator area? Labels should disappear. When you tap on a region that toggles labels they are shown and will be shown until you tap somewhere else. From device's perspective, you're still interacting with the paginator as your last tap was on it. If you want to auto hide labels after X amount of time you could, for example, dispatch an event (e.g touchend) to release focus from labels.

After 10 seconds, send event to paginator, to release the labels

 @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    setTimeout(() => {
      this.paginator.dispatchEvent(new Event('touchend', { bubbles: true }));
    }, 10000);
  }