Angular Элемент управления автозаполнением материала после открытия не закрывается для внешних действий, таких как прокрутка уровня страницы - PullRequest
Новая
       132

Angular Элемент управления автозаполнением материала после открытия не закрывается для внешних действий, таких как прокрутка уровня страницы

1 голос
/ 03 августа 2020

Как показано в stackblitz , я столкнулся с проблемой с Angular элементом управления автозаполнением материалов, в котором элемент управления остается открытым при внешних событиях, таких как прокрутка страницы, как показано в прилагаемом образце, и даже при возникновении проблем. встречается в Angular демо-материалах на сайте . Issue Screenshot

Steps to reproduce:

  1. Click on Autocomplete control and let it stay expanded.

  2. Try to do page level scroll to the bottom (https://v7.material.angular.io/components/autocomplete/examples), элемент управления автозаполнением не сворачивается / не закрывается.

  3. Я попытался разместить событие фокусировки, как в примере (https://stackblitz.com/edit/angular-jfuvpb?file=app%2Fautocomplete-overview-example.html), хотя элемент управления «Автозаполнение» сворачивается при нажатии на прокрутку на уровне страницы (https://stackblitz.com/edit/angular-jfuvpb?file=app%2Fautocomplete-overview-example.ts), но возникла дополнительная проблема, например, выбранный параметр не применяется к элементу «Автозаполнение».

Ожидаемое поведение : при любом действии вне элемента управления автозаполнением, например, прокрутка уровня страницы должна закрывать элемент управления автозаполнением

Фактическое поведение : элемент управления автозаполнением остается развернутым и не является удобным для пользователя.

1 Ответ

1 голос
/ 03 августа 2020

Это хорошо известная проблема в github

Обходной путь для этого - поместить cdkScrollable в вашу оболочку, у которой есть прокрутка и переопределение MAT_AUTOCOMPLETE_SCROLL_STRATEGY провайдера.

html

<div class="content-container" cdkScrollable>

Убедитесь, что вы импортировали import {ScrollingModule} from '@angular/cdk/scrolling';

Примечание: ставить не нужно cdkScrollable, если это основной свиток

app.module.ts 

import { Overlay, CloseScrollStrategy } from '@angular/cdk/overlay';

export function scrollFactory(overlay: Overlay): () => CloseScrollStrategy {
    return () => overlay.scrollStrategies.close();
}

@NgModule({
  ...
  providers: [
    { provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
  ]
})
export class AppModule {}

Forked Stackblitz

...