Нажатие клавиши табуляции закрывает диалог пользовательского интерфейса материала, который открывается из подменю

Question

Мне нужно создать строку меню с несколькими меню, которые имеют подменю. Когда я открываю диалог из пункта меню верхнего уровня, все работает так, как нужно / ожидаемо. НО, когда я открываю диалог из подменю, нажатие клавиши табуляции закрывает диалог.

Я испробовал несколько разных способов реализации вложенных меню и остановился на подходе, обсужденном здесь: https://github.com/mui-org/material-ui/issues/11723

Я создал пример кода, чтобы продемонстрировать проблему здесь: https://codesandbox.io/s/loving-heisenberg-rvwwb Вы увидите, что это раздвоено из примера подменю, который я нашел на GitHub. Было несколько вещей, которые я изменил, потому что я не знал, как добавить открытие диалога из этого примера, поэтому я не уверен, что то, как я это сделал, является правильным.

Answer 1

Проблема в том, что Tab вызывает закрытие родительского меню, что приводит к отключению диалога.Вы можете использовать состояние, чтобы предотвратить закрытие родительского меню при каждом открытии диалога, но это оставляет другую проблему.Независимо от того, закрывается ли родительское меню, при возникновении Tab он вызывает event.preventDefault(), что затем не позволяет Tab изменить местоположение фокуса (поведение браузера по умолчанию).

Вы можете исправить это, остановив распространение Dialog ключевого события Tab .Это предотвращает получение Menu, поэтому Menu не будет пытаться закрыться и не будет вызывать event.preventDefault().Я не могу гарантировать, что это не приведет к появлению некоторых новых проблем, но это устраняет описанную проблему.

const stopPropagationForTab = (event) => {
  if (event.key === "Tab") {
    event.stopPropagation();
  }
};

      <Dialog
        onKeyDown={stopPropagationForTab}

В моем форкеВаша песочница, я обновил версию Material-UI с 1.2 до 4.0 только потому, что хотел убедиться, что проблемы не связаны с аспектами, которые изменились.Это отбросило некоторые стили, но основное поведение, о котором идет речь, казалось, работало одинаково в обеих версиях.

---

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