Contrib.social

[#States API] Conditionally hidden required field gives error on submit

Open on Drupal.org →
Created on 16 March 2022, almost 3 years ago
Updated 8 April 2024, 10 months ago

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.

🐛 Bug report
Status

Active

Version

6.2

Component

Code

Created by

🇺🇸United States j_s

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 10 months ago →
    🇺🇸United States jrockowitz Brooklyn, NY
  • Comment 3 months ago →
    🇺🇸United States esod

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

  • Comment 3 months ago →
    🇺🇸United States esod

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

  • Comment 3 months ago →
    🇮🇳India dev2.addweb

    @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'
  • Comment 3 months ago →
    🇨🇦Canada Liam Morland Ontario, CA 🇨🇦
  • Comment 3 months ago →
    🇺🇸United States esod

    @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.

  • Comment 2 months ago →
    🇺🇸United States esod

    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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024