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.
Steps to reproduce
- Set up a webform withn several fields
- Set up a computed twig that produces a value based on those fields
- Set up another field, but add a visibility condition of visible if the computed twig field has a specific value
- 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.
Comments
Comment #2
cilefen commentedDoes reverting/reversing https://git.drupalcode.org/project/drupal/-/commit/8905837f693c4f0341dd9... on its own fix this?
Comment #3
andybroomfield@cilefen yes, i'm able to get it working with the states.js file from Drupal 10.2 inside of an otherwise 10.3 site.
Comment #4
cilefen commentedI commented there.
Comment #5
sukr_s commentedLooks like a related issue #3468860: JS #states behavior does not have a detach method
Comment #6
ebcode commentedI have a patch that removes the once call from #3386191. This will break that fix, of course, but if you didn't have that problem, then this will fix what that broke. It seems that a more complicated patch will be required to fix both issues.
Comment #7
jrockowitz commentedMarking as major and waiting to see how this addressed via Drupal core.
Comment #8
steven jones commentedOut of interest does the fix for #3490435: [regression] Form #states are processed and can be added to the wrong attribute for 'item' elements help with this issue?
Comment #9
liam morlandComment #10
karingConfirming this on our projects as well. We often do things like:
Add two Date fields and use a Computed Twig Element to calculate the Duration.
Only show the Submit button if the Duration is > 0 to prevent incorrect submissions.
Duration field is calculated properly (Computed Twig is correct).
However, the Submit button on the form is permanently hidden since D10.3 upgrade (last week).
I see -> https://www.drupal.org/project/drupal/issues/3468860 - is a fix for D11 - it's marked Needs Review. There is also a note on that issue "Webform overrides some of the states API methods so any patch here will need an update on webform side".
Comment #11
benstallings commentedSince 10.3 is no longer supported, I'm guessing this is outdated.