States on input type button broken since core update

Question

I've updated my Drupal project from 9.5.3 to 9.5.7, but the submission button's #states property stopped working.

$form['actions']['submit'] = [
  '#type' => 'submit',
  '#value' => 'Accéder au paiement',
  '#enabled' => FALSE,
];

$form['actions']['submit']['#states'] = [
  'enabled' => [
    [
      ':input[name="name_1"]' => ['empty' => FALSE],
      ':input[name="name_2"]' => ['empty' => FALSE],
      ':input[name="name_3"]' => ['empty' => FALSE],
      [
        ':input[name="name_4"]' => ['!value' => ''],
      ],
    ],
  ],
];

I rolled back to 9.5.3 and upgrade to each release to find out when it stopped working.

Turns out it's from the 9.5.6 release. On the 9.5.7 release, the button is always enabled, but changing my other inputs toggle the class form-disabled and the disable attribute is not triggered.

How can I fix it?

Answer 1

Find a small workaround, you need to change the HTML structure of your button/input submit (done on 9.5.7)

Remove the .js-form-submit (example here with twig)

<input{{ attributes.removeClass('js-form-submit') }} />{{ children }}

Add .js-form-item around your input

$form['actions']['submit'] = [
  '#type' => 'submit',
  '#value' => t('Validate'),
  '#enabled' => FALSE,
  '#prefix' => '<div class="js-form-item">',
  '#suffix' => '</div>',
];

$form['actions']['submit']['#states'] = [
  'enabled' => [
    [
      ':input[name="other_input"]' => ['empty' => FALSE],
    ],
  ],
];

Problably not the cleanest, but for now it's working