fix(Autocomplete, ComboBox): disable browser autofill

[sashachabin]

Проблема

Нативный браузерный autofill дублирует и перекрывает подсказки в <Autocomplete> и <ComboBox>

Autocomplete

ComboBox

Решение

• В <ComboBoxView> для <input> указал атрибут autocomplete="off".
• В <Autocomplete> добавил атрибут для десктопной и мобильной версии

P.S. Не стал добавлять аналогичный атрибут в <TokenInput>, который использует <textarea>. Не смог воспроизвести autofill-поведение <textarea> в Chrome, Firefox и Safari

Ссылки

• https://yt.skbkontur.ru/issue/IF-1624/
• https://kontur.slack.com/archives/C013HTCE18Q/p1705926378481079

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ⬜ unit-тесты для логики
   ⬜ скриншоты для верстки и кросс-браузерности
   ✅ нерелевантно

2. Добавлена (обновлена) документация
   ⬜ styleguidist для пропов и примеров использования компонентов
   ⬜ jsdoc для утилит и хелперов
   ⬜ комментарии для неочевидных мест в коде
   ⬜ прочие инструкции (README.md, contributing.md и др.)
   ✅ нерелевантно

3. Изменения корректно типизированы
   ⬜ без использования any (см. PR 2856)
   ✅ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

[sashachabin]

@zhzz, как считаешь, приемлемо будет оставить этот кейс без unit-тестов?

Если лучше добавить, то вижу 2 варианта:

• Простой тест. Для механики Autofill нет клиентского JS API, можем сделать только проверку на наличие атрибута autocomplete="off". Однако он прямо в render() и, наверное, его не так просто потерять при рефакторинге. Наверное, по этой же причине сейчас нет проверок на работу атрибута spellCheck.

• Сложный тест. В Chrome DevTools Protocol есть тестирование Autofill и внедрено в Puppetter. Но добавлять и поддерживать единственный тест для компонента с Jest+Puppetter кажется оверинжинирингом (в React UI увидел только smoke-тест SSR). Это было бы более релевантно в контексте задач по a11y.
  Оффтоп: кстати, призываю лайкнуть аналогичную Issue в Playwright!

[lossir]

@sashachabin, выдал контребьюторских прав, чтобы ты мог нормальный ПР создать (без форка). Тогда можно будет тесты на ТС запустить.
Проверь инвайты на почте и подожди минут 10-20)

[zhzz]

Права появились. Теперь нужно пушнуть еще разок, чтобы CI стартанул.

[zhzz]

Я думаю можно добавить простых тестов по первому варианту. Пойти не так и сломаться может много разного, особенно учитывая, что тут задействована интеграция нескольких компонентов.

[sashachabin]

@zhzz
Добавил тесты для обоих компонентов, но они покрывают кейсы только на десктопе.

Заметил, что сейчас тесты с media-выражениями есть всего в 4 местах:
https://github.com/search?q=repo%3Askbkontur%2Fretail-ui+__tests__+mediaQuery&type=code

Тесты для адаптивности — это какой-то отдельный пласт?

Но если будем добавлять, то мне нужен совет, как лучше назвать/сгруппировать их в describe / it. С учётом того, что в том же <ComboBox> уже есть тест с формулировкой 'mobile comboBox'.

[zhzz]

👍 Круто, спасибо!

[zhzz]

@zhzz Добавил тесты для обоих компонентов, но они покрывают кейсы только на десктопе.

Заметил, что сейчас тесты с media-выражениями есть всего в 4 местах: https://github.com/search?q=repo%3Askbkontur%2Fretail-ui+__tests__+mediaQuery&type=code

Тесты для адаптивности — это какой-то отдельный пласт?

Но если будем добавлять, то мне нужен совет, как лучше назвать/сгруппировать их в describe / it. С учётом того, что в том же <ComboBox> уже есть тест с формулировкой 'mobile comboBox'.

Заметил коммент уже после влития. Не то, чтобы тесты адаптивности у нас были какие-то отдельные. Особых правил именования и группировки у нас нет. Если проблема проявляется и на мобильных, то можно дофиксить и дописать тестов где-то там же, да.