Skip to content

Form: Add GlFormInvalidFeedback Component

https://bootstrap-vue.org/docs/components/input-group#input-groups

Bootstrap v4 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.

So we end up having something like this:

GlFormInputGroup Other form input (for comparison)
image image

Problem: No feedback message shown

We use the general sibling selector ~ to display the invalid feedback message, like this:

However, this doesn't work for GlFormInputGroup because the HTML structure is different. So the general sibling selector doesn't work here.

Proposal

Let's ensure the feedback is displayed, so it looks like this:

image

Solution

Alternatively, we can just use the b-form-invalid-feedback > https://bootstrap-vue.org/docs/components/form#comp-ref-b-form-invalid-feedback

It was suggested here > https://github.com/bootstrap-vue/bootstrap-vue/issues/1251#issuecomment-340065341

(So instead of doing some funky css magic, I think this is the best route to take. I've tested it locally and it works perfectly 👍)

Follow-up

1. We might also want to consider look into changing the default message if it's a <select> field. As the user doesn't "fill", it "selects". So a more appropriate default message could be: Please select an option.

A sibling component would be the gl-form-valid-feedback, we might want to also consider creating a follow-up issue to ensure that's available in PJ 👍

Note

This issue was created as a follow-up to MR > gitlab!55838 (merged)

Edited by Samantha Ming