[BUG] @prizm-ui/components - Focus stuck within `InputLayoutDateTime`

[AleksandrSibiakov]

Библиотека

• @prizm-ui/core
• @prizm-ui/components
• @prizm-ui/install
• @prizm-ui/icons
• @prizm-ui/flag-icons
• @prizm-ui/theme
• @prizm-ui/charts
• @prizm-ui/ast
• @prizm-ui/nx-plugin

Компонент

InputLayoutDateTime

Версия

➜ npm ls @prizm-ui/components

@prizm-ui/components 5.8.0

Скрин / Видео проблемы

Воспроизведение проблемы

• Перейти на демо страничку компонента
• очистить значение
• поставить фокус на первый инпут, так чтобы оторбазилась маска (___)
• перевести фокус на инпут времени (через tab, либо кликом лкм)

Описание проблемы

Фокус "застревает" внутри компонента <prizm-input-layout-date-time>, таким образом на странице могут быть несколько элементов в фокусе, как на скриншоте.

Примечательно, что компонент подсвечивается через стиль :focus-within, даже когда document.activeElement явно ссылается на элемент не относящийся к компоненту.

[AleksandrSibiakov]

Заметил еще небольшую проблему с этим компонентом.
Имеем разметку вида:

<prizm-input-layout><prizm-input-layout-date-time #el [formControl]="control" /></prizm-input-layout>

В коде выставляем значение и переносим фокус на инпут (изначально контрол пустой)

control.setValue(new Date()); // используется соответствующий конвертер дат
el.nativeElement.querySelector('input').focus()

Значение переданное в setValue перетирается.

Инвестигейт показал что при срабатывании фокуса происходит ребиндинг showMaskTyped, что в свою приводит к тому, что текущее (пустое) значение из DOM передается в FormControl, перетирая переданное значение, да еще помечается как dirty (afaik это происходит из-за того, что значение из контрола передается в DOM через микро-таск, а фокус мы вызываем синхронно. удалось починить через setTimeout(()=>input.focus()), но если получится скрывать показывать маску без ребинда инпута, а например через CSS было бы чудесно)

текущее поведение

ожидаемое (сейчас через setTimeout)

[bumalai]

Prizm version: 5.13.0