Contrib.social

Using a computed twig as a value for a visibility condition breaks in Drupal 10.3

Open on Drupal.org →
Created on 17 October 2024, 2 months ago

Problem/Motivation

With a webform that uses the result of the computed twig as a visibility condition, in Drupal 10.3 the form element that has a visibility condition no longer shows/hides. I belive this is due to the changes in states.js for this issue 🐛 #states not working correctly when built from a logical combination of multliple fields Fixed .

Steps to reproduce

  1. Set up a webform withn several fields
  2. Set up a computed twig that produces a value based on those fields
  3. Set up another field, but add a visibility condition of visible if the computed twig field has a specific value
  4. View the form and apply the values to make the conditional field appear.

Expected result (current in Drupal 10.2).
The conditional field appears when the computed twig has the apporpriate value.
Actual result
The conditional field does not appear.

Example webform:

uuid: 7908f88f-bad7-4a5a-8e7d-cd7d7039615f
langcode: en
status: open
dependencies: {  }
weight: 0
open: null
close: null
uid: 6366
template: false
archive: false
id: contact_the_council_simplified
title: 'Contact the council - Simplified'
description: ''
categories:
  - Testing
elements: |-
  contact_the_council_page_1:
    '#type': webform_wizard_page
    '#title': 'Contact the council'
    contact_the_council:
      '#type': fieldset
      '#title': 'Contact the council'
      container_service_selector:
        '#type': container
        serviceselector:
          '#type': select
          '#title': 'Which service are you trying to contact?'
          '#prepopulate': true
          '#options':
            'Abandoned vehicles': 'Abandoned vehicles'
            'Adult Social Care': 'Adult Social Care'
            Allotments: Allotments
            'Benefits (Housing Benefit and/or Council Tax Reduction)': 'Benefits (Housing Benefit and/or Council Tax Reduction)'
            'Building control': 'Building control'
            Business: Business
            'Business Rates': 'Business Rates'
            "Children's Social Care": "Children's Social Care"
            'Complaints or Compliments': 'Complaints or Compliments'
            'Coroner enquiries': 'Coroner enquiries'
            Councillors: Councillors
            'Council Tax ': 'Council Tax '
            'Countryside ': 'Countryside '
            'Demographics and local statistics': 'Demographics and local statistics'
            'Electoral services': 'Electoral services'
            'Employment opportunities': 'Employment opportunities'
            'Food safety': 'Food safety'
            'Freedom of information': 'Freedom of information'
            'Grants for community and voluntary organisations': 'Grants for community and voluntary organisations'
            Housing: Housing
            Libraries: Libraries
            Licensing: Licensing
            'MyAccount technical support': 'MyAccount technical support'
            Noise: Noise
            "Other service or I don't know who to contact": "Other service or I don't know who to contact"
            'Parenting support team': 'Parenting support team'
            Parking: Parking
            'Parks and green spaces': 'Parks and green spaces'
            'Planning permission': 'Planning permission'
            Pollution: Pollution
            'Register office': 'Register office'
            Roads: Roads
            'Rubbish, recycling and streets': 'Rubbish, recycling and streets'
            "Seafront services (including Volk's Railway)": "Seafront services (including Volk's Railway)"
            'Sports and leisure facilities': 'Sports and leisure facilities'
            'Tourism and city marketing': 'Tourism and city marketing'
            Transport: Transport
            Website: Website
            "What's on": "What's on"
          '#empty_option': 'Please select...'
          '#required': true
          '#required_error': 'Please tell us which service you are trying to contact'
      container_tell_us_your_query:
        '#type': container
        please_tell_us_your_query:
          '#type': textarea
          '#title': 'Please tell us your query'
          '#required': true
          '#required_error': 'Please tell us your query'
          '#states':
            visible:
              ':input[name="please_tell_us_your_query_visibility_yes_no"]':
                value: 'yes'
  please_tell_us_your_query_visibility_yes_no:
    '#type': webform_computed_twig
    '#title': please_tell_us_your_query_visibility_yes_no
    '#display_on': form
    '#template': |-
      {%
      if data.serviceselector == "Abandoned vehicles"
      or data.serviceselector == "Adult Social Care"
      or data.serviceselector == "Building control"
      or data.serviceselector == "Business"
      or data.serviceselector == "Children's Social Care"
      or data.serviceselector == "Demographics and local statistics"
      or data.serviceselector == "Electoral services"
      or data.serviceselector == "Employment opportunities"
      or data.serviceselector == "Grants for community and voluntary organisations"
      or data.serviceselector == "Housing"
      or data.serviceselector == "Libraries"
      or data.serviceselector == "Other service or I don't know who to contact"
      or data.serviceselector == "Planning permission"
      or data.serviceselector == "Register office"
      or data.serviceselector == "Roads"
      or data.serviceselector == "Rubbish, recycling and streets"
      or data.serviceselector == "Seafront services (including Volk's Railway)"
      or data.serviceselector == "Sports and leisure facilities"
      or data.serviceselector == "Tourism and city marketing"
      or data.serviceselector == "Transport"
      or data.serviceselector == "What's on"
      %}
      {{'yes'}}
      {% endif %}
    '#whitespace': spaceless
    '#ajax': true
  actions:
    '#type': webform_actions
    '#title': 'Submit button(s)'
    '#states':
      visible:
        - ':input[name="please_tell_us_your_query"]':
            filled: true
css: ''
javascript: ''
settings:
  ajax: false
  ajax_scroll_top: form
  ajax_progress_type: ''
  ajax_effect: ''
  ajax_speed: null
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  page_theme_name: ''
  form_title: both
  form_submit_once: false
  form_open_message: ''
  form_close_message: ''
  form_exception_message: ''
  form_previous_submissions: false
  form_confidential: false
  form_confidential_message: ''
  form_disable_remote_addr: false
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_autofocus: false
  form_details_toggle: false
  form_reset: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  form_attributes: {  }
  form_method: ''
  form_action: ''
  share: false
  share_node: false
  share_theme_name: ''
  share_title: true
  share_page_body_attributes: {  }
  submission_label: ''
  submission_exception_message: ''
  submission_locked_message: ''
  submission_log: false
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_progress_states: false
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_auto_forward: true
  wizard_auto_forward_hide_next_button: false
  wizard_keyboard: true
  wizard_track: ''
  wizard_prev_button_label: ''
  wizard_next_button_label: ''
  wizard_toggle: false
  wizard_toggle_show_label: ''
  wizard_toggle_hide_label: ''
  wizard_page_type: container
  wizard_page_title_tag: h2
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  draft_pending_single_message: ''
  draft_pending_multiple_message: ''
  confirmation_type: page
  confirmation_url: ''
  confirmation_title: ''
  confirmation_message: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  confirmation_update: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  results_customize: false
  token_view: false
  token_update: false
  token_delete: false
  serial_disabled: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }
variants: {  }

Above is a stripped down version of the form where we encountered this problem, the real one has more fields which is why we are using a computed twig instead of the value field directly but it does reproduce the problem.

🐛 Bug report
Status

Active

Version

6.2

Component

Code

Created by

🇬🇧United Kingdom andybroomfield

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024