Pro Forms > Modern Select > Field Validation Bugs

Bug Reports
1

Bug #1
When using a Modern Select Field that is required, clicking “Submit” or “Next” does not properly indicate that a field is required. If you click the button multiple times you can faintly see the pop over appear for a micro second but then it disappears.

Settings: Options: Populate Options: Dynamic Data

Bug #2
A workaround until the above is fixed is to turn on Validation Rules and adding one for Required.
However, clicking “Show Message Below Field” for Modern Select does not work correctly and the message is shown to the right of the field instead of below it.

image
image812×982 45.7 KB

image
image1836×950 44.6 KB

2

Hi there :slight_smile:

Just tested on my end using a modern select with an icon and dynamic data and the regular required message showed fine. Can you tell me which os / browser you’re on so I can try to replicate it?

As for the second issue, I’ve added it to our bug tracker. Until natively fixed, you can add the following css to your selects css:

%root% .input-icon-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
}

%root% .choices {
  margin-bottom: 0;
}

%root% .brf-validation-message {
  margin-top: 0 !important;
  grid-column: 1 / 3;
}
3

Sure thing. Interestingly, after I posted I did some testing in other forms and it works so it is this specific combination of fields that may be causing it to happen.

I’m using Safari Version 18.5 (20621.2.5.11.8)

This form is contained within a BricksExtras Modal. The others are too so we can rule that out.

image
image900×1212 82.3 KB

The difference with this one is that it is one of two fields on the first page of a multi-step form and there is a required Rich Text field below the modern select stealing validation focus (displaying the pop over) when you click “next”.

To be clear, required conditions are being enforced it just isn’t making it clear which field is having the issue.

4

Interesting, appreciate you drilling down and finding a way to replicate it! Could you create a minimal duplicate of that form on a test / draft page and share access so we can take a look under the hood? :slight_smile: