Problem/Motivation

[Drupal 8.6.x] #states breaks when OR is used.

The below YAML code…

select:
  '#type': select
  '#title': select
  '#options':
    1: 1
    2: 2
number:
  '#type': number
  '#title': number
textfield:
  '#type': textfield
  '#title': textfield
  '#states':
    visible:
      - ':input[name="select"]':
          value: 1
      - or
      - ':input[name="number"]':
          value: 1

or PHP code (which can be added to any form)…

  $form['select'] = [
    '#type' =>'select',
    '#title' => 'select 1',
    '#options' => [0 => 0, 1 => 1, 2 => 2],
  ];
  $form['number'] = [
    '#type' => 'number',
    '#title' => 'enter 1',
  ];
  $form['textfield'] = [
    '#type' => 'textfield',
    '#title' => 'textfield',
    '#states' => [
      'visible' => [
        [':input[name="select"]' => ['value' => '1']],
        'or',
        [':input[name="number"]' => ['value' => '1']],
      ],
    ],
  ];

Logs the below exception…

This issue is being triggered by #2981652: [Aug. 9 2018] Format core JavaScript using recently add Prettier.

Proposed resolution

TBD

Remaining tasks

TBD

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Comments

jrockowitz created an issue. See original summary.

jrockowitz’s picture

Issue summary: View changes
StatusFileSize
new82.04 KB
jrockowitz’s picture

jrockowitz’s picture

When I revert core/misc/states.js from the 8.6.x version to 8.5.x the issue resolved. I think this regression is being caused by the tweaks to states.js via #2981652: [Aug. 9 2018] Format core JavaScript using recently add Prettier.

I also confirmed (by removing the code) that the enhancements to #states contained in js/webform.states.js are not causing this issue.

jrockowitz’s picture

Issue summary: View changes
mattjones86’s picture

Hi, I found an issue with the webform states after applying the 8.6.x #states patch in #2995570: #states breaks when OR is used (though I'm not 100% sure this is related).

  // The change event is triggered by cut-n-paste and select menus.
  // Issue #2445271: #states element empty check not triggered on mouse
  // based paste.
  // @see https://www.drupal.org/node/2445271
  Drupal.states.Trigger.states.empty.change = function change() {
    return this.val() === '';
  };

This fix put in place for #2445271: #states element empty check not triggered on mouse based paste seems to stop #states from being run on initial page load. Nothing happens with them until after the change() event is fired on the element.

Commenting out these lines corrects the issue for me.

jrockowitz’s picture

@orphans I think #6 is unrelated. If you can create, export, and upload a simple webform that replicates your issue, please create a new ticket.

jrockowitz’s picture

Status: Active » Fixed

The core issue has been fixed in Drupal 8.6.3.

Status: Fixed » Closed (fixed)

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