Conditional Visibility based on Toggle fields [#2878397]

Problem/Motivation

I'm having difficulty controlling the visibility of a field-set based on a toggle field. It works fine with a checkbox or radio field. I've tried testing against the value of "Yes" or "YES" for the toggle and it doesn't work. I only want to display further software-related fields if the customer says that their product includes software. What am I missing? Here's the conditional fieldset with my various trigger experiments.

software_platform:
  '#type': fieldset
  '#title': 'Software Platform'
  '#title_display': before
  '#states':
    visible:
      - ':input[name="software"]':
          value: 'YES'
      - or
      - ':input[name="software_check"]':
          checked: true
      - or
      - ':input[name="software_radio"]':
          value: 'Yes'

Question 4: Although I removed it from this test form, does the Javascript code handle cases where the element with the conditions is nested inside of a flexbox or any number of containers and it's referencing a checkbox that is outside of the conditioned element's containment hierarchy?

Comment	File	Size	Author
#3	conditional_visibility-2878397-3.patch	772 bytes	jrockowitz
#3	8.x-5.x: PHP 5.6 & MySQL 5.5, D8.3 431 pass

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

15 May 2017 at 03:08

kirkilj created an issue. See original summary.

Comment #2

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented 15 May 2017 at 10:08

The below form replicates the issue.

toggle:
  '#type': toggle
  '#title': Toggle
checkbox:
  '#type': checkbox
  '#title': Checkbox
fieldset:
  '#type': fieldset
  '#title': Fieldset
  '#title_display': before
  '#states':
    visible:
      - ':input[name="toggle"]':
          checked: true
      - or
      - ':input[name="checkbox"]':
          checked: true
  text_field:
    '#type': textfield
    '#title': 'Text field'

Comment #3

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented 15 May 2017 at 16:53

Status:

Active

» Needs review

File	Size
conditional_visibility-2878397-3.patch	772 bytes
8.x-5.x: PHP 5.6 & MySQL 5.5, D8.3 431 pass

Comment #4

15 May 2017 at 22:11

jrockowitz committed 879f82b on 8.x-5.x

Issue #2878397 by jrockowitz, kirkilj: Conditional Visibility based on...

Comment #5

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented 15 May 2017 at 22:12

Status:

Needs review

» Fixed

I committed the patch. Please download the latest dev release to review.

Comment #6

kirkilj CreditAttribution: kirkilj commented 16 May 2017 at 19:07

Issue summary:

View changes

Question #1: I downloaded this version. Is it the correct one?

$ drush pml | grep webform
                      (webform_scheduled_email_test)                                                                                
 Webform              Webform (webform)                                                Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform Devel (webform_devel)                                    Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform Examples (webform_examples)                              Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform Node (webform_node)                                      Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform Templates (webform_templates)                            Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform UI (webform_ui)                                          Module  Enabled        8.x-5.0-beta12+59-dev 
 Webform              Webform Scheduled Email Handler (webform_scheduled_email)        Module  Enabled        8.x-5.0-beta12+59-dev 
                      (webform_demo_application_evaluation)

but this test form still fails, even with the normal checkbox.

Question #2: When I'm dealing with Term Checkboxes on a vocabulary, how can indicate whether they should be all checked or not?

Question #3: I noticed that some element names below are truncated, and values referenced in the conditions of other elements have array indices after them. Can you enlighten me what's happening here?

product_attributes:
  '#type': fieldset
  '#title': 'Product Attributes'
  '#title_display': before
  '#open': true
  software:
    '#type': toggle
    '#title': Software
    '#description': 'Does your product contain any <em><strong>Software</strong></em> components?'
    '#default_value': unchecked
    '#title_display': before
    '#description_display': before
    '#on_text': 'Yes'
    '#off_text': 'No'
  software_checkbox:
    '#type': checkbox
    '#title': 'Software Checkbox'
software_platform:
  '#type': fieldset
  '#title': 'Software Platform'
  '#title_display': before
  '#open': true
  '#states':
    visible:
      - ':input[name="software"]':
          checked: true
      - or
      - ':input[name="software_checkbox"]':
          checked: true
  target_device:
    '#type': term_checkboxes
    '#title': 'Target Device'
    '#vocabulary': target_device
    '#breadcrumb_delimiter': ''
  mobile_o:
    '#type': term_checkboxes
    '#title': 'Mobile Operating System'
    '#states':
      visible:
        - ':input[name="target_device[9]"]':
            checked: true
        - or
        - ':input[name="target_device[10]"]':
            checked: true
    '#vocabulary': mobile_operating_system
    '#breadcrumb_delimiter': ''
  desktop_op:
    '#type': term_checkboxes
    '#title': 'Desktop Operating System'
    '#states':
      visible:
        ':input[name="target_device[11]"]':
          checked: true
    '#vocabulary': desktop_operating_system
    '#breadcrumb_delimiter': ''

Comment #7

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented 16 May 2017 at 19:57

Question #1: Make sure to clear your browser's cache. Toggle buttons #states is working for me using Chrome.

Question #2: You probably need to write a custom jQuery selector that targets all term checkboxes.

Question #3: Webform's #states API integration targets the :input[name] which vary depending on the type of input. For example, checkboxes use element_key[option_value] as the input name for each checkbox.

Question #4: #states API allows you to use any selector. @see https://www.lullabot.com/articles/form-api-states