Firefox Relay input wrapper conflicts with bootstrap form control

[littlephone]

When a website is using Bootstrap Form Control, a validation error is shown in the class 'invalid-feedback' immediately below the input element. The wrapper of 'fx-relay-email-input-wrapper' blocked the mechanism by wrapping only the input but not with the invalid-feedback element altogether.

Steps to the regenerate:

1. Enable relay
2. Go to a page with Bootstrap framework and form with email
3. Submit the form without inputting anything.

Results: The invalid message does not show possibly causing by the element itself is not immediately below the input element.

Screenshot:

[groovecoder]

Do you mind saying the specific site this was on?

[littlephone]

@groovecoder Sure, here it is : https://kka.k11.com/en/register-member/ . But I can confirm that the issue happens on every site that has Bootstrap form and type="email" enabled.

[Stevish1968]

Where are we on this issue, still see that it is a problem, even having email in the placeholder is messing things up

[rwhepburn]

This issue is still happening and is blocking some users from registering and creating support incidents for us.

It appears Firefox Relay is injecting many wrappers (no idea why) and also CSS styles that are interfering with our user's ability to fill in registration forms on our platform. It appears that users are not typing into the field because Firefox Relay has injected a padding-right style that causes the input text to be hidden. It also seems that the relay styles are conflicting with our bootstrap form-control class that is applied to the element.

Is there any way to prevent Relay from modifying our forms and HTML???

Why is Relay injecting so many wrappers?