[BUG] - Label position is affected by the height of the error message

[dklymenk]

HeroUI Version

2.8.5

Describe the bug

The combination of label's absolute positioning with top-1/2 and the nearest relative parent containing both the form element and the validation message makes it so the position of the label changes based on the number of lines in the error message.

Your Example Website or App

https://heroui.app/NUsmtqN

Steps to Reproduce the Bug or Issue

1. Go to https://heroui.app/NUsmtqN
2. Select anything but "Cat" in the select menu
3. Observe the label shifting on top the select

Expected behavior

The label should stay above the select.

Screenshots or Videos

Operating System Version

macOS

Browser

Firefox

[linear[bot]]

ENG-2842

[IsDyh01]

@wingkwong Can I try to solve this issue?

[wingkwong]

@IsDyh01 go ahead

[IsDyh01]

@wingkwong When labelPlacement=outside and data-has-helper=true, I change the absolute positioning of the label to a relative positioning, just like isMultiline=true.