Как отловить событие нажатия клавиш для клавиш со стрелками на iPad с мобильным сафари?

Question

Наша команда создала угловой выпадающий компонент, который также должен отлично работать на iPad!

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

Основные части dropDown (мы называем это autosuggest-control)

1. Текстовое поле, в котором пользователь может ввести текст, который ищет пользователь
2. Кнопка непосредственно в правой части текстового поля, где пользователь может переключать список предложений (в случае, если пользователь хочет видеть результаты, не вводя текст для поиска)
3. Список предложений, который появляется внизу текстового поля.

Задача / Цель: когда пользователь покидает элемент управления, предложения должны исчезнуть!

Что мы делаем: Мы ловим набор onKeyPress - События для текстового поля ввода, чтобы перемещаться, например, с помощью клавиш со стрелками внутри списка предложений. И мы ловим нажатие клавиши табуляции, чтобы скрыть список предложений.

Что мы в настоящее время не можем сделать: Невозможно скрыть список предложений, когда в текстовом поле было запущено событие размытия. Зачем? Событие размытия сработает, когда

• пользователь нажимает кнопку
• пользователь нажимает на один элемент в списке предложений.

Если бы я скрыл его в событии размытия элемента управления вводом, то событие размытия будет запущено первым, событие щелчка не будет обработано, поскольку список предложений больше не доступен ...

Все отлично работает для настольного пользователя. Но для пользователей iPad, на которых установлено Safari, управление работает не идеально. Пользователь iPad использует клавиши со стрелками в верхней части клавиатуры на правой панели, чтобы переключаться между элементами управления.

Проблема: я не могу поймать onKeyDown - событие для этих клавиш со стрелками! Как я могу узнать, что клавиши со стрелками были нажаты пользователем?

<ng-container *ngIf="state$ | async as state">
    <div class="auto-suggest-container"
         [ngClass]="{ 'disabled' : disabled, 'active': active, 'has-focus' : active && !readonly}">
        <div #inputgroup
             class="auto-suggest-input-group">
            <input #input
                   class="input-control"
                   #input
                   type="text"
                   autocomplete="off"
                   autocorrect="off"
                   autocapitalize="off"
                   [disabled]="disabled"
                   (focus)="onFocus($event)"
                   (blur)="onBlur()"
                   (keydown)="inputOnKeydown($event)"
                   [(value)]="state.searchValue"
                   (keyup)="onKeyUp($event)"
                   tabindex="{{ tabindex }}"
                   placeholder="{{placeholder}}"
                   [attr.readonly]="readonly ? 'readonly' : null" />
            <button #suffixButton
                    type="button"
                    [disabled]="disabled"
                    (click)="onSuffixClickAsync()"
                    tabindex="-1">
                <div class="arrow-icon"></div>
            </button>
        </div>
    </div>
</ng-container>

<ng-template templateName="selectList"
             let-stateObs="stateObs">
    <ng-container *ngIf="stateObs | async as state">
        <div #dropdown
             class="auto-suggest-dropdown"
             [ngClass]="{'flipped': state.flipped}">
            <div *ngFor="let item of state.items; let itemIndex=index"
                 class="auto-suggest-listitem"
                 (click)="onSuggestionClick(item, $event)"
                 [attr.autosuggest-item-index]="itemIndex"
                 [ngClass]="item.isHighlighted ? 'active-item' : ''">

                <span *ngIf="!state.listItemTemplate">{{ item.stringFormattedValue }}</span>
                <ng-container *ngIf="state.listItemTemplate">
                    <ng-template *ngTemplateOutlet="state.listItemTemplate, context: {item: item.dataItem, index: itemIndex}"></ng-template>
                </ng-container>
            </div>
        </div>
    </ng-container>
</ng-template>