Ioni c 4 - ion-select не прокручивает до выбранного элемента в оповещении - PullRequest
Новая
       21

Ioni c 4 - ion-select не прокручивает до выбранного элемента в оповещении

0 голосов
/ 28 января 2020

Я использую ionic 4.7.0.

Проблема, о которой я сообщаю, возникает на Chrome и Firefox.

Фактическое поведение:

Использование ion-select с большим списком параметров, при открытии оповещения ion-select не прокручивается автоматически до выбранного значения. Пользователь видит первое значение в списке опций и может подумать, что ничего не выбрано

Ожидаемое поведение:

Когда предупреждение открыто, представление автоматически центрируется на выбранном значении

Я создал этот stackblitz , чтобы выделить поведение, мы можем видеть на stackblitz, что при загрузке представления выбрано значение 11:00, но когда вы открываете предупреждение (нажав на select), я ожидаю, что представление будет автоматически прокручиваться на выбранном значении.

Это ожидаемое поведение с ion-select?

Я нашел несколько вопросов, говорящих о той же теме, но ничего, что действительно отвечает на вопрос:

1 Ответ

2 голосов
/ 28 января 2020

В настоящее время эта функция не доступна в Ioni c, но существует открытый выпуск . Поднимите палец вверх, чтобы увеличить его приоритет.

На данный момент вы можете использовать обходной путь: 

window.addEventListener('ionAlertDidPresent', e => {
  const selected = (e.target as HTMLElement).querySelector('[aria-checked="true"]');
  selected && selected.scrollIntoView();
});

Этот слушатель будет срабатывать каждый раз, когда устанавливается предупреждение. Затем он ищет (первый) выбранный элемент с помощью атрибута aria-checked HTML и прокручивает его в поле зрения.

Возможно, вы захотите взглянуть на параметры scrollIntoView(), например, для прокрутки, чтобы выбранный элемент находился внизу.

Чтобы повлиять только на оповещения ion-select, вы можете проверить, имеет ли оповещение класс select-alert (или single-select-alert). Чтобы повлиять только на одно предупреждение, вы можете назначить ему идентификатор, передав его в свойстве interfaceOptions ion-select.

Как уже упоминалось, это обходной путь, который может перестать работать, если компонент изменится.

...