I have a form where there's a listbox with some options. I also have a couple fieldsets which are shown depending on the listbox options selected. From there, each fieldset has fields, one of which is another listbox. A certain selection in that listbox can hide another field next to it.

Example (all required):
Listbox1 (Option 1, Option 2)
Fieldset1 [conditional: shown if listbox is Option 1]
- ListboxA (Option A, Option B, Option C)
- Textfield [conditional: hidden if ListboxA is Option B]
Fieldset2 [conditional: shown if listbox is Option 2]
- Textarea

When I do nothing but submit the form, my Chrome error console says:
"An invalid form control with name='submitted[fieldset1][textfield]' is not focusable."

So when I make an actual selection of Option 2 and fill in Textarea, it still says that textfield is not focusable.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Prizem created an issue. See original summary.

joshuasosa’s picture

Issue summary: View changes
sbs_tedbalog’s picture

I would like to report that I'm experiencing the same issue. It seems if an element is hidden by multiple conditions (say, two select options) that Chrome chokes when validating the form. When inspecting the output, the working form has a class of "form-text required webform-conditional-disabled" as well as a disabled tag on the input textbox. The non-working form is missing any and all class entries as well as the disabled tag. This is likely why Chrome is trying to process the field because it is not showing as disabled.

leymannx’s picture

Ah yes, thanks for the "disabled" hint. Conditionally setting the element to "disabled" via states when it's not needed fixes the issue.

Liam Morland’s picture

Does this need some changes to documentation?

joshuasosa’s picture

This issue might have been resolved at some point. When I try my example use case now with 4.23, I don't get the error and the form submits successfully. The class webform-conditional-disabled and attribute 'disabled' appears on my textfield in Fieldset 1. So it could be closed (outdated) unless someone still has the issue.

Liam Morland’s picture

Status: Active » Closed (outdated)

Thanks

Chris Matthews’s picture

Version: 7.x-4.x-dev » 6.x-dev
Status: Closed (outdated) » Active

I just ran into this issue on Drupal core 8.9.13 and Webform 6.0.0 using the "Advanced address" webform element.

An invalid form control with name='church_international_address[address_line1]' is not focusable.
An invalid form control with name='church_international_address[locality]' is not focusable.
An invalid form control with name='church_international_address[administrative_area]' is not focusable.
An invalid form control with name='church_international_address[postal_code]' is not focusable.
An invalid form control with name='ministry_international_address[address_line1]' is not focusable.
An invalid form control with name='ministry_international_address[locality]' is not focusable.
An invalid form control with name='ministry_international_address[administrative_area]' is not focusable.
Chris Matthews’s picture

Version: 6.x-dev » 6.0.0
Chris Matthews’s picture

Version: 6.0.0 » 7.x-4.x-dev
Status: Active » Closed (outdated)

In case it helps others who make their way here via Google, this was my issue: https://stackoverflow.com/a/31195820/12864276

Changing the status and version back to what it was previously.