Repository navigation
[BUG] Input error message is hidden when inside <fieldset role="group"> #41
Description
Please search for duplicate or closed issues first. ✔️
Describe the issue
Current Behavior
When an input field is inside a <fieldset role="group">, invalid error message with <small> tag is hidden behind the input.
Without role="group" it is properly displayed.
Expected Behavior
I expect to see the error message below the input field as equal as non fieldset inputs.
Reproduction URL
<form>
<div>
<label for="user_email">Email</label>
<input type="email" id="user_email" aria-invalid="true">
<small>Email error</small>
</div>
<fieldset class="grid">
<div>
<label for="user_first_name">First name</label>
<input type="text" id="user_first_name">
</div>
<div>
<label for="user_last_name">Last Name</label>
<input aria-invalid="true" type="text" id="user_last_name">
<small>Last name error</small>
</div>
</fieldset>
<fieldset class="grid" role="group">
<div>
<label for="user_password">Password</label>
<input type="password" id="user_password">
</div>
<div>
<label for="user_password_confirmation">Password confirmation</label>
<input aria-invalid="true" type="password" id="user_password_confirmation">
<small>Password error</small>
</div>
</fieldset>
</form>
Environment
- picocss 2.2.4
Activity
[-][BUG] Error message on field is hidden with `fieldset role="group"`[/-][+][BUG] Input error message is hidden when inside `<fieldset role="group">`[/+]Yohn commentedon Jan 16, 2025
Is this only happening when a fieldset has the group role or does it happen with other container elements too?
I've been wanting to play with the help/error/success helpers for the floating labels and having it within a group would also fit that criteria.
I do feel this task may take a little longer to complete. I have to finish something up for a client this week, but this is definitely on my radar to tackle.
anthony-robin commentedon Jan 16, 2025
I only tried it with fieldset where I noticed this bug but they might be some other form components that behaves buggy with fieldset group.
Also, I usually add hints below form input explaining with more details how to fill a field. Within my use case, it was conflicting position with the alert message. Does pico has some very basic recommended
tagorclassto setup to the hint sentence and keeping it pretty with errors ?