[MenuItem] Не всегда срабатывает onMouseLeave в состоянии disabled

[wKich]

export function SuiteLink({ title, suite }: SuiteLinkProps): JSX.Element {
  const [hover, setHover] = useState(false);

  const handleMouseEnter = (): void => setHover(true);
  const handleMouseLeave = (): void => setHover(false);

  return (
    <MenuItem
      state={hover ? 'selected' : null}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      disabled={/* condition */}
    >
    {/* content */}
    </MenuItem>
  );
}

[zhzz]

Возможно связано c #1422

[dzekh]

а в состоянии disabled пункт меню должен вообще подсвечиваться

[wKich]

@dzekh дело же не в подсвечивании, а в том что обработчик не вызвался

[JackUait]

Вообще странно, что он когда-то срабатывал. На DOM элементах, которые могут находиться в состоянии disabled (button, input, select, textarea, optgroup, option и fieldset) не должны вызываться никакие события, в том числе onMouseEnter и onMouseLeave.

Сейчас, если в MenuItem передаётся проп disabled, то MenuItem принудительно превращается в кнопку и нативно отключается.

[lossir]

Это старый баг в React - facebook/react#10109

Суть его в том, что есть обернуть выключенную кнопку, например, в спан, то на этом самом спане перестанут вызываться некоторые события мыши.

<span onMouseEnter={/* если кнопка занимает всю площадь, то никогда не вызовется */}>
   <button disabled>button</button>
</span>

В нативных элементах такого нет. Там события нормально всплывают.
Сделал небольшой пример: react-bug-mouseenter-button-disabled

[JackUait]

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

Пример №1: Элементы стоят вплотную друг к другу
На видео: навожу мышку на активную кнопку (вызывается событие onMouseEnter), затем перевожу мышку на отключенную кнопку, затем возвращаю мышку на активную кнопку (событие onMouseEnter уже не вызывается).

2022-02-11.11.27.07.mov

Пример №2: Между элементами есть два пикселя расстояния
На видео: навожу мышку на активную кнопку (вызывается событие onMouseEnter), затем перевожу мышку на отключенную кнопку, затем возвращаю мышку на активную кнопку (снова вызывается событие onMouseEnter).

2022-02-11.11.39.09.mov

В этом issue как раз происходят события из первого примера.

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

Пример №3: Элементы стоят вплотную друг к другу, но уже внутри библиотеки
На видео: навожу мышку на активную кнопку (вызывается событие onMouseEnter), затем перевожу мышку на отключенную кнопку, затем возвращаю мышку на активную кнопку (снова вызывается событие onMouseEnter).

2022-02-11.12.07.26.mov

То есть поведение из этого issue действительно не воспроизводится в текущей версии библиотеки, по крайней мере на MenuItem.

---

Как ты отметил, это происходит потому, что ломается стандартное поведение и событие onMouseEnter не всплывает, но на самом деле нас не особо волнует юзкейс с оборачиванием в span и вызыванием onMouseEnter непосредственно на этом span'е, так как это ломает очень многие механизмы внутри HTML, которые в основном связаны с доступностью интерфейсов. В текущей реализации события происходят там, где они должны происходить - непосредственно на элементе кнопки.

Механизм всплытия событий в принципе нужен HTML для внутреннего пользования, мы - как пользователи HTML должны прикасаться к нему, только если по-другому никак.

[JackUait]

P.S.

Не уверен, что это поведение когда-либо пофиксят внутри самого React, а если и пофиксят это случится минимум в 19-ой версии React, то есть через 2-3 года. Уже предпринимались попытки исправить это поведение, но они не увенчались успехом.

[lossir]

У нас не воспроизводится, потому-что я пофиксил это 3 года назад ))
1c88969

[JackUait]

Хах, тогда тем более, зачем держать открытое issue)