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

[Nikita Bayev]

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

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

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

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

Создадим компонент <MoneyInput showCurrency hint="Safari With showCurrency" /> и поставим туда фокус:

Для примера создадим компонент без showCurrency — <MoneyInput showCurrency={ false } hint="Safari With showCurrency" />:

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

Что-то из этой же области, по всей видимости, было выявлено и решено в #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

[German Sigutov]

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

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

[Nikita Bayev]

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

[German Sigutov]

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

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