Особенности событий порталов в React ⚛️

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

createPortal

Метод createPortal позволяет рендерить компонент вне текущей DOM-иерархии, но при этом он остаётся частью React-дерева.

Теперь читаем документацию

События из порталов распространяются в соответствии с деревом React, а не деревом DOM. Например, если вы нажмёте внутри портала, и портал обёрнут в <div onClick>, сработает этот обработчик onClick. Если это вызывает проблемы, либо остановите распространение события (stopPropogation()) внутри портала, либо переместите сам портал выше в дереве React.

Что у нас случилось❓

В проекте мы недавно переписали тулбокс — панель, из которой можно перетаскивать элементы при создании workflow.

Из-за ограничений мы отказались от нативного drag-and-drop и использовали старый кастомный хук на обычных mousedown/mousemove.

Что фиксили? 🪲

В общем, всё работал, но пользователь мог начать перестаскивать элемент нажав на всплывающую подсказку (описание на картинке).

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

Причина в том, что React-ивенты всплывают по React-дереву, а не DOM. Всё как в доке. А пофиксили это простым добавлением stopPropogation() в onMouseDown компонента подсказки.