Skip to content

MoneyInput: в Safari скользит hint/error при включенном showCurrency #1231

Open
drugoi opened this issue Nov 9, 2020 · 3 comments

Comments

@drugoi
Copy link
Contributor

drugoi commented Nov 9, 2020

В Safari (iOS/MacOS) при включенном пропе showCurrency hint/error начинают сколзить туда-сюда по мере ввода/стирании поля.

Ожидаемое поведение

Ничего никуда не скользит, остаётся на своём месте.

Шаги для воспроизведения

Создадим компонент <MoneyInput showCurrency hint="Safari With showCurrency" /> и поставим туда фокус:
Screen Shot 2020-11-09 at 13 09 34

Для примера создадим компонент без showCurrency<MoneyInput showCurrency={ false } hint="Safari With showCurrency" />:
Screen Shot 2020-11-09 at 13 09 51

Возможное решение

Что-то из этой же области, по всей видимости, было выявлено и решено в #803, но PR не был влит в проект.
По всей видимости проблема кроется в работе display: inline-table в Safari, но точнее пока не разбирался.

Окружение

  • Используемая версия библиотеки: 18.4.0

  • Имя и версия браузера на десктопе: Safari, Version 14.0 (15610.1.28.1.9, 15610)

  • Имя и версия ОС: MacOS 10.15.7

  • Имя и версия браузера на мобильном: Safari 14.0.1

  • Имя и версия ОС: iOS 14.2

@Concide
Copy link
Contributor

Concide commented Nov 9, 2020

Главное решать проблему в общем Input, а не только в компоненте который от него наследуется т.к. проблема со съезжающими хинтами есть в них всех) Проблема заключается в табличной верстке и в том что Сафари с ней плохо дружит. У нас (анкета КН) используется такое решение.

/** Фикс бага с прыгающей подсказкой в Safari */
.input__inner {
    display: flex !important;
    flex-direction: column;
}
.input__box,
.input__sub {
    display: block !important;
}

@drugoi
Copy link
Contributor Author

drugoi commented Nov 9, 2020

@Concide значит связь с showCurrency — это просто совпадение? А то в обычном инпуте на демке нет проблемы с хинтом.

@Concide
Copy link
Contributor

Concide commented Nov 9, 2020

Это совпадение. Общая структура элементов компонента одна и та же и в разных компонентах стреляет по разному. У нас были проблемы в InputAutocomplete из-за rightAddons. Там как-то стакаются элементы и Сафари это не вывозит)

Когда искал решение находил открытое issue у команды Сафари датированное толи 2009, толи 2012 годом. Заниматься им они видимо не собираются

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants