Написал я компонент TagSelector, который позволяет выбрать из выпадающего списка несколько значений. Но вот беда: выпадающий список «выпадал» иногда после первого клика, а иногда после второго или третьего, и воспроизвести баг не получалось.

Вводные: - TagSelector реализован на базе компонентов command и popover из shadcn. - TagSelector рендерится внутри слайда библиотеки Swiper.

Расследование. У Swiper есть механизм, который позволяет отличить свайп от обычного клика по слайду. Этот механизм помечает клики в фазе capture (e.preventDefault()), если между событиями mouseDown и mouseUp указатель мыши сместился. А далее компонент Popover под капотом проверяет: если e.defaultPrevented === true, то обработчик клика по триггеру не вызывается и выпадающее окно с опциями не открывается.

В моем случае мышь находится на деревянном столе (неровной поверхности), и, вероятно, из-за этого иногда создается эффект движения мыши, а Swiper решает, что я не кликаю, а свайпаю слайд.

Решение. Так как у меня в настройках Swiper возможность свайпа отключена (allowTouchMove={false}), я принял решение отключить эту проверку (preventClicks={false}).

Надеюсь, этот случай займет свое место в копилке фронтендерского опыта каждого, кто прочтет пост.