I have a webform that's basically set up like this:

select:
  '#type': select
  '#title': 'Select Type'
  '#options':
    A: A
    B: B
    C: C
  '#required': true
select_1:
  '#type': select
  '#title': 'Select 1'
  '#options':
    'Yes': 'Yes'
    'No': 'No'
  '#required': true
container:
  '#type': container
  '#states':
    visible:
      ':input[name="select_1"]':
        value: 'Yes'
  select_2:
    '#type': select
    '#title': 'Select 2'
    '#options':
      'Yes': 'Yes'
      'No': 'No'
    '#states':
      invisible:
        - ':input[name="select"]':
            value: A
        - or
        - ':input[name="select"]':
            value: C
    '#required': true
  container_01:
    '#type': container
    '#states':
      visible:
        ':input[name="select_2"]':
          value: 'Yes'
    text_2:
      '#type': textfield
      '#title': 'Text 2'
      '#required': true

There's a select box with a few types, a select box to open a container, a select box in that container that may be hidden depending on the type chosen in the first select box, and a container that opens if this inside select box is set to yes. The inside select box will be hidden if the type is A or C. All fields are required.

When I set my type to A and the first select box to Yes, it properly hides the inside select box and doesn't show the inside container.
But clicking submit does nothing and instead gives an error in console:

An invalid form control with name='select_2' is not focusable.

The requirement on the inside select (named select_2 here) should some how be disabled if its hidden so the form can submit properly.

CommentFileSizeAuthor
#10 webform.webform.not_focusable_text_fields.yml7.21 KBesod
#6 confirm_form_states.zip4.8 KBesod
#5 form_control_not_focusable.yml5.16 KBesod
#3 webform.webform.issue_3269776.yml4.97 KBjrockowitz

Comments

joshuasosa created an issue. See original summary.

dsdeiz’s picture

dsdeiz commented

I am getting the same error as well:

test:
  '#type': select
  '#title': Test
  '#options': yes_no
test_2:
  '#type': text_format
  '#title': 'Test 2'
  '#states':
    visible:
      ':input[name="test"]':
        value: 'No'
  '#allowed_formats':
    basic_html: basic_html
  '#required': true

The error appears when you select "No" from the "Test" field. The error is:

An invalid form control with name='test_2[value]' is not focusable.

Same error happens when you either set the element as "Required" or have it dynamically set as "Required" using conditions (automatically marking the element as "Required").

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new webform.webform.issue_3269776.yml4.97 KB

I was able to replicate this issue using the attached webform.

This issue does not occur if you are using the clientside_validation.module.

The issue is related to #state API marking the hidden (display:none via CKEditor) textarea as required.

I am not seeing an easy fix for this issue.

jrockowitz’s picture

jrockowitz commented
Title: Conditionally hidden required field gives error on submit » [#States API] Conditionally hidden required field gives error on submit
Version: 6.1.3 » 6.2.x-dev
esod’s picture

esod commented
StatusFileSize
new form_control_not_focusable.yml5.16 KB

I'm able to to replicate this issue too. Select 'Recuse' in the attached form.

esod’s picture

esod commented
StatusFileSize
new confirm_form_states.zip4.8 KB

I was hoping this wasn't just a webform problem, but it is a webform problem.

nilesh.addweb’s picture

nilesh.addweb commented

@esod It works with Plain text format. I think it having problem with ckeditor.

In first webform issue, I have resolved by updating select_2 states

  select_2:
    '#type': select
    '#title': 'Select 2'
    '#options':
      'Yes': 'Yes'
      'No': 'No'
    '#states':
      invisible:
        - ':input[name="select"]':
            value: A
        - or
        - ':input[name="select"]':
            value: C
      required:
        ':input[name="select"]':
          value: B
        ':input[name="select_1"]':
          value: 'Yes'
liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented
Title: [#States API] Conditionally hidden required field gives error on submit » [#States API] Conditionally hidden required field gives error on submit
Version: 6.2.x-dev » 6.3.x-dev
esod’s picture

esod commented

@nilesh.addweb Yes, it works with plain text format or a textarea, which is also plain text. We'd like this to work using a CKEditor 5 text_format element.

esod’s picture

esod commented
StatusFileSize
new webform.webform.not_focusable_text_fields.yml7.21 KB

This form uses only textfield, radio elements and #states.

Open the Console on your browser.
Select 'I am the nominee.'
Fill out the form.
Click Submit.
See the 'An invalid form control...' error.

Open the Console on your browser.
Select 'I am submitting on behalf of the nominee.'
Fill out the form.
Click Submit.
The form submits.

jrockowitz’s picture

jrockowitz commented
Status: Active » Postponed (maintainer needs more info)

For #10, you have two required conditions (submitter_information: visible and submitter_middle_name: required) that are conflicting. Note that submitter_information: visible sets required conditions on the subelements.

Your code

     submitter_information:
      '#type': fieldset
      '#title': 'Submitter Information'
      '#states':
        visible:
          ':input[name="nominee_select_one"]':
            value: submitter
      '#states_clear': false
      submitter_no_middle_name:
        '#type': checkbox
        '#title': 'No Middle Name'
        '#help_title': ' '
      flexbox_submitter_name:
        '#type': webform_flexbox
        submitter_first_name:
          '#type': textfield
          '#title': 'First Name'
          '#required': true
          '#flex': 3
        submitter_middle_name:
          '#type': textfield
          '#title': 'Middle Name'
          '#flex': 3
          '#states':
            required:
              ':input[name="submitter_no_middle_name"]':
                unchecked: true
            readonly:
              ':input[name="submitter_no_middle_name"]':
                checked: true
        submitter_last_name:
          '#type': textfield
          '#title': 'Last Name'
          '#required': true
          '#flex': 3

To fix this, you need to make the below change, which ensures both conditions for requiring submitter_middle_name are defined as expected.

      submitter_middle_name:
        '#type': textfield
        '#title': 'Middle Name'
        '#flex': 3
        '#states':
          required:
            ':input[name="nominee_select_one"]':
              value: submitter          
            ':input[name="submitter_no_middle_name"]':
              unchecked: true
          readonly:
            ':input[name="submitter_no_middle_name"]':
              checked: true
jrockowitz’s picture

jrockowitz commented

The original example seems to have the same nested condition issue as #10

jrockowitz’s picture

jrockowitz commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

I am realizing that this ticket has multiple conditional logic issues being mentioned, and it makes it very difficult to resolve any of them.

The original issue can be solved by ensuring a container's conditions are applied to the subelements that have additional conditional logic.

Please open new tickets for the other issues mentioned.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.