fix(PasswordInput): focus input after clicking on the eye icon

[JackUait]

fixes IF-472

При повторном клике на иконку глаза в PasswordInput перестал возвращаться фокуc (см. видео)

2022-05-19.03.18.50.mov

Это было вызвано двумя причинами:

1. После смены иконки не вызывался onClick. Это полечилось добавлением pointer-events: none на обе иконки (на самом деле достаточно добавить эти стили на одну иконку, но для уверенности добавил на обе)

2. После фикса первого пункта, при потере фокуса инпут стал мгновенно переходить в режим скрытых символов. Из-за чего при ручном переходе из открытых символов в скрытые пользователь попадал в бесконечный цикл (см. видео)

   2022-05-25.13.19.40.mov

   Это удалось полечить проверкой того, что пользователь в данный момент сфокусирован на инпуте перед переходом в режим скрытых символов при блюре (эта логика выполняется в setTimeout так как при клике на иконку с глазом инпут на некоторое время теряет фокус)

---

Не уверен, насколько легальны обращения к document.activeElement (в том плане не упадут ли они в SSR окружении) без дополнительных проверок, но увидел несколько мест в публичных компонентах где также используется объект document без проверок, так что не стал добавлять и к себе. Но хотелось бы понять благодаря чему такой код не упадёт в SSR

---

Добавил новый тест, отрефакторил существующие, удалил лишние. Не получилось отрефакторить тест с использованием CapsLock, вероятно, это баг в библиотеке user-event, так как при использовании "специального символа" {capslock} буквы при вводе не заменяются на буквы верхнего регистра, при этом другие специальные символы, например {backspace} отрабатывают как ожидается

[zhzz]

Как воспроизвести бесконечный цикл? У меня не получается. Есть какое-то особое условие?

[JackUait]

Чтобы воспроизвести бесконечный цикл нужно убрать setTimeout со 163-ей строки в PasswordInput:

setTimeout(() => {
  // @ts-expect-error: private property
  if (document.activeElement !== this.input?.input) {
    this.setState({ visible: false });
  }
}, 200);

---

Обновил описание и видео у второй причины

[zhzz]

Все проблемы от того, что при нажатии на иконку у инпута тоже происходит blur. А blur в #2766 стал переключать видимость пароля, что и вызывает все перечисленные эффекты.

Но, вместо того, чтобы фиксить следствия, лучше пофиксить саму причину. Нам не нужно, чтобы при клике на иконку blur менял видимость.

У меня есть пара варинтов:

1. Детектить только тот blur, который происходит за пределы компонента. Это основная специализация компонента RenderLayer.
2. Фильтровать все blur на основе e.relatedTarget. Если фокус переходит на элемент, который может иметь фокус, то этот элемент попадает в relatedTarget (иначе там null). Но с этим вариантом проблема в том, что пока иконка не фокусируема, и в relatedTarget она не попадает. Можно было бы завернуть ее в кнопку и улучшить a11y заодно.

Текущее решение не работает, если на иконку кликать медленно, отпуская клик через >200 мс.

---

Вот здесь статейка по основам поддержки SSR.

[JackUait]

Можно было бы завернуть ее в кнопку и улучшить a11y заодно.

Мне второй вариант нравится больше, но оборачивание иконки в кнопку вызовет ряд других проблем, которые я описал в #2779. Так что пока предлагаю отложить реализацию до "лучших времён" (до того, пока не начнём переосмыслять стилизацию в библиотеке)

Детектить только тот blur, который происходит за пределы компонента. Это основная специализация компонента RenderLayer.

Крутая штука! Не понимал что конкретно она делает до этого момента (звучит как тема для тех. ревью internal компонентов, на тех. ревью также можно затронуть тему публичности некоторых internal компонентов/утилит, а также поговорить об эквивалентах этих компонентов/утилит на хуках, в общем с моей точки зрения эту тему можно растянуть на три тех. ревью)