Angular 5 отключить состояние фокусировки CDK на мобильном телефоне

Question

Существует ошибка (я полагаю) на мобильном телефоне, которая, когда вы щелкаете по боковому навигационному меню и затем выбираете маршрут для перехода, он закрывает sidenav, но оставляет кнопку меню в состоянии фокуса.Также происходит с кнопками, которые открывают модалы, или фактически с чем-либо, имеющим состояние фокуса (боковая навигация, элементы навигации, кнопки и т. Д.)

, вы можете видеть это в примере углового навигационного материала (симуляция мобильного устройства)устройство): https://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts

Или вы можете увидеть скриншот ниже (кнопка переключения sidenav фокусируется после того, как я нажал на нее)

Я хотел бызнать, как отключить фокусное состояние CDK на мобильном телефоне (или при определенных условиях) на угловом уровне 5

Answer 1

То, что я в итоге сделал, чтобы удалить эффект, использует следующую CSS:

.mat-button,
.mat-icon-button {
  &.cdk-focused,
  &.cdk-program-focused {
    background-color: none !important;

    .mat-button-focus-overlay {
      display: none !important;
    }
  }
}

Answer 2

Эта ошибка связана с использованием пользовательского элемента кнопки Angular в браузере. Решением будет обнаружение щелчка пользователя с использованием Javascript и отключение фокуса вручную.

Вы можете попробовать что-то вроде:

scope.clickActive = false;
element.on('click', function() {
    scope.clickActive = true;
    $timeout(function(){
      scope.clickActive = false;
    }, 100);
  })
  .on('focus', function() {
    if(scope.clickActive === false) { element.addClass('md-focused'); }
  })
  .on('blur', function() { element.removeClass('md-focused'); });