Material UI Popover - проблема моделирования события нажатия клавиш - PullRequest
Новая
       28

Material UI Popover - проблема моделирования события нажатия клавиш

3 голосов
/ 27 апреля 2020

Задача состоит в том, чтобы перемещаться в раскрывающемся списке с помощью клавиш со стрелками вместо TAB / TAB + SHIFT. Одна из идей состояла в том, чтобы заменить события нажатия клавиш со стрелками для имитации нажатия клавиши TAB / TAB + SHIFT. Мой подход сводится к приведенному ниже коду, который успешно предотвращает события по умолчанию для клавиш со стрелками и запускает код для клавиши TAB, показывающий предупреждение.

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

Есть идеи, почему оно не работает? 

handleKeyDown = (e) => {
let element  = e.currentTarget;

switch (e.keyCode) {
  case 40:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: false });
  element.dispatchEvent(event);
  break;
}
switch (e.keyCode) {
  case 38:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: true });
  element.dispatchEvent(event);
  break;
}

// the switch case 9 is only used for debugging purposes
     switch (e.keyCode) {
          case 9:
          e.preventDefault();
          alert ("You pressed the 'TAB' key!");
          break;
        }

<Popover onKeyDown={this.handleKeyDown}>

1 Ответ

0 голосов
/ 27 апреля 2020

Поскольку вы обрабатываете e.keycode==9 и предотвращаете событие по умолчанию в этом блоке, 

switch (e.keyCode) {
  case 9:
  e.preventDefault();
  alert ("You pressed the 'TAB' key!");
  break;
}

Когда вы нажимаете клавишу 9, когда в строке нажата кнопка вниз или вверх, 

const event = new KeyboardEvent("keydown", 
                               { view: window,
                                 bubbles: true,
                                 cancelable: true,
                                 keyCode: 9,
                                 shiftKey: true });

Вы фактически запускаете case 9 вашего блока, где e.preventDefault() не позволяет ему выполнять его поведение по умолчанию.

Решение было бы удалить e.preventDefault() для случая 9 Но когда нажатие на вкладку на этом элементе это также будет работать.

Предложение: Используйте один переключатель со многими случаями, как я упомянул в комментарии выше. Это правильный синтаксис для случаев переключения в Javascript.

...