Как я могу получить раскрывающееся меню React, чтобы сосредоточиться на клавиатуре

Question

Я работаю над поведением выпадающего списка React с поддержкой ARIA и пытаюсь сфокусировать событие keydown на списке связанных меню. В настоящее время, когда происходит событие нажатия клавиши, весь документ перемещается вниз. Мне нужно следующее поведение:

1. Нажать кнопку раскрывающегося списка
2. Сосредоточиться на первом элементе в списке при нажатии клавиши
3. Перейти к следующему элементу в списке на основе нажатия или нажатия клавиши ,

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

Может ли кто-то дать некоторое представление о том, как я поддерживаю поведение, которое я хочу, и как я go добиваюсь этого? Должен ли я обрабатывать событие keydown самостоятельно? Если да, то как мне go сосредоточиться на правильном div?

Текущий код:

    <div id="dd-wrapper" ref={wrapper} className="dropdown" style={{ position: 'relative' }} onClick={onClick} >
      <button
        id="dd-button"
        className="dropdown-toggle dropdown-toggle--shadow background-white pt-2 pr-3 pb-2 pl-3"
        type="button"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-labelledby="dd-label dd-button"
        aria-expanded={isOpen}
      >
        <p className="dropdown-toggle--text text-large text-left m-0">
          <strong>$29</strong>
        </p>
      </button>
        <ul
          className={`dropdown-menu list-style-none pl-0 mt-0 mb-0 ${!isOpen && 'hidden'} ${isPoppedTop && 'dropdown-menu--poptop'}`}
          aria-labelledby="dd-button"
          tabIndex={isOpen ? 0 : -1}
          role="listbox"
          ref={optionEl}
        >
          {staticData.map(option => (
            <li id={`dd-${option}`} role="option" key={option} className="dropdown-item pl-0 pt-2">
              <p className="pl-3 m-0">{option}</p>
            </li>
          ))}
        </ul>
    </div>