Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Input error message is hidden when inside <fieldset role="group"> #41

Open
anthony-robin opened this issue Jan 15, 2025 · 2 comments
Labels
bug Something isn't working

Comments

@anthony-robin
Copy link

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>

Capture d’écran du 2025-01-15 12-59-00

Environment

  • picocss 2.2.4
@anthony-robin anthony-robin changed the title [BUG] Error message on field is hidden with fieldset role="group" [BUG] Input error message is hidden when inside <fieldset role="group"> Jan 15, 2025
@Yohn
Copy link
Owner

Yohn commented 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
Copy link
Author

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 tag or class to setup to the hint sentence and keeping it pretty with errors ?

@Yohn Yohn added the bug Something isn't working label Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants