When I set a message element to be "Visible" based on the value in a select list, the message is not hidden automatically when that value is not selected. I don't know if this is consistent with other combinations of elements. All I know is that it was working as expected before I updated dev from a previous version about a month old (around beta25). This is also the case with 5.0-rc1.

Reproduce the issue with this YAML code:

my_time:
  '#type': time
  '#title': 'Time (choose 9:00 AM to reveal message)'
  '#default_value': '08:00:00'
  '#timepicker': true
  '#time_format': 'g:i A'
  '#step': '300'
hidden_message:
  '#type': message
  '#states':
    visible:
      ':input[name="my_time"]':
        value: '9:00 AM'
  '#message_type': warning
  '#message_message': 'This message should be hidden until you select "9:00 AM" above, but it is not working.'
  '#message_close': true
actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
CommentFileSizeAuthor
#2 2937175-2.patch693 bytesjrockowitz
#2 webform.webform.issue_2937175.yml3.48 KBjrockowitz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nodecode created an issue. See original summary.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Active » Needs review
FileSize
webform.webform.issue_2937175.yml3.48 KB
2937175-2.patch693 bytes

The attached webform replicates the issue.

The issue is the message is being display after #states has hidden it.

The attached patch addresses this issue.

nodecode’s picture

nodecode CreditAttribution: nodecode commented
Status: Needs review » Active

I'd love to test but I have no idea how to patch using Composer without corrupting my site.

nodecode’s picture

nodecode CreditAttribution: nodecode commented
Status: Active » Needs review
nodecode’s picture

nodecode CreditAttribution: nodecode commented
Status: Needs review » Reviewed & tested by the community

Ok I gave up on patching with Composer and used curl. The patch in #2 works for me!

nodecode’s picture

nodecode CreditAttribution: nodecode commented
Status: Reviewed & tested by the community » Needs work

On second thought, there is a weird issue I'm seeing where the hidden message is visible for a moment then it disappears. Shouldn't it be invisible by default? It's really clunky the way it works now. Not sure if this was the case with 5.0-beta25.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Drupal #states API does show elements before triggering the conditional hide/show logic. There might some CSS magic that we can use to fix this.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review

The updated attached patch fixes the javascript issue.

The displaying of elements before they are hidden is core behavior that has always been there. I am noticing it more in 8.5 with BigPipe enabled because BigPipe's JS is executing before #states API hides any form elements.

The below CSS does hide messages with visible/hidden #states by default. The problem is ff JavaScript is disabled the message will never be displayed. I am not ready to commit this type of solution to the Webform module.

.js-webform-message.js-form-wrapper[data-drupal-states*="visible"],
.js-webform-message.js-form-wrapper[data-drupal-states*="hidden"] {
  display: none;
}

I think we should fix this issue and then open a new issue related to hidden elements are appearing as a page being rendered.

  • jrockowitz committed 327cdd0 on 8.x-5.x 
    Issue #2937175 by jrockowitz: Visible state based on select list not...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs review » Fixed

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

The issue with elements with #states being visible while a page is loading should be handled in a new ticket.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.