Change record status: 
Project: 
Description: 

Drupal adds a random string to form element id attributes to ensure uniqueness for valid and accessible HTML, e.g. when multiple of the same form will be present on a page. The data-drupal-selector attribute was introduced to be a non-random string used in place of id for selecting elements in CSS or Javascript.

Due to a bug, the data-drupal-selector attribute was in fact being set to the same randomized value as the id attribute. The fix for the linked issue has resulted in the following changes in behavior:

  • The top level form element (and form_id hidden element) data-drupal-selector attribute are now derived from the form's ID without being randomized.
  • The element's data-drupal-selector attribute is no longer set if an explicit element #id is set.
  • Drupal will no longer clobber a data-drupal-selector attribute the developer has explicitly set.

CSS or Javascript that uses [data-drupal-selector] selectors for an element within a form should verify proper functioning and update selectors or set data-drupal-selector on the form element accordingly.

Workaround code such as this in form builder methods can be removed once Drupal N.N or older compatibility is no longer needed:

$form['#id'] = Html::getId($form_state->getBuildInfo()['form_id']);
Impacts: 
Module developers