tgoop.com/htmlshit/3657
Last Update:
#баг дня
Кажется, когда-то я уже использовал свой немногочисленный медийный ресурс, чтобы продвигать библиотечные баги, которые напрямую меня касаются.
Пришло время повторить! С небольшим историческим экскурсом :)
Итак, некая библиотека компонентов Radix. И написана она в технике bring your own styles. То есть буквально стыкуются с чем угодно, не навязывая своё оформление (темы есть, но они — отдельно).
В чём же тогда смысл таких UI-китов? Ну, собственно, создание своих компонентов и дизайн-систем не ограничивается наложением стилей на стандартные input да button, это большая работа по объединению их в доступные группы, в задание нужного поведения и так далее.
А уже потом как, например, в нашем случае — можно хоть Tailwind накинуть. Ирония какая.
Так вот, среди UI-китов есть некое подобие конкуренции и моды. Как и везде. И одна из модных тенденций — пытаться сделать работу интерфейса быстрее. Неважно как, визуально или фактически.
И один из достаточно неожиданных способов этого добиться — это поменять обработчик onClick на onMouseDown.
И вуаля, на мобильных устройствах как будто бы стало на 300 мс быстрее!
Но, конечно, это достаточно спорное решение. Как минимум, нельзя отменить клик, убрав курсор с элемента.
А тут я обнаружил ещё одну проблему: https://github.com/radix-ui/primitives/issues/3600
Там есть и видео, и демо.
Суть: на вкладках тоже применена техника onMouseDown. В итоге, когда мы анмаунтим вкладку с полем ввода, на котором висит onBlur, это событие — не срабатывает. В нашем случае это приводит к проблемам с форматированием полей, которое как раз на onBlur и повешено.
Почему так происходит? Потому что во всех браузерах обработка событий происходит в таком порядке:
0. mousedown
1. change
2. blur
3. focus
4. mouseup
5. click
...остальное посмотрите по ссылке.
Логично, что при замене mousedown на click всё прекрасно работает. Но кому-то в Radix очень захотелось, чтобы на мобилах их UI-кит казался быстрее других.
Выстрелили себе в ногу получается.
В общем, как обычно, прошу ваших комментариев и реакций на issue в GitHub!
#ui #kit #radix #onmousedown
BY Будни разработчика
Share with your friend now:
tgoop.com/htmlshit/3657