Problem/Motivation

Using a form alter hook I have added a custom CSS class to a node form date input:

function test_module_form_node_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void {
      $form['field_test_upload_date']['widget'][0]['value']['#attributes']['class'][] = 'TEST-CSS-CLASS';
}

The CSS class is added correctly to the form date input, but is also added to 2 parent div, .form-datetime-wrapper and .form-items-inline.

<div class="field--type-datetime field--name-field-test-upload-date field--widget-datetime-default js-form-wrapper form-wrapper" data-drupal-selector="edit-field-test-upload-date-wrapper" id="edit-field-test-upload-date-wrapper">
   <div class="TEST-CSS-CLASS form-item form-datetime-wrapper" data-drupal-selector="edit-field-test-upload-date-0-value">
      <h4 class="form-item__label">Test Upload Date</h4>
      <div id="edit-field-test-upload-date-0-value" class="TEST-CSS-CLASS form-items-inline" data-drupal-field-elements="date">
         <div class="js-form-item form-item js-form-type-date form-type--date js-form-item-field-test-upload-date-0-value-date form-item--field-test-upload-date-0-value-date form-item--no-label">
            <label for="edit-field-test-upload-date-0-value-date" class="form-item__label visually-hidden">Date</label>
            <input class="TEST-CSS-CLASS form-date form-element form-element--type-date form-element--api-date" data-drupal-selector="edit-field-test-upload-date-0-value-date" type="date" placeholder="YYYY-MM-DD" data-help="Enter the date using the format YYYY-MM-DD (e.g., 2024-06-10)." id="edit-field-test-upload-date-0-value-date" name="field_test_upload_date[0][value][date]" value="" size="12">
            </div>
         </div>
      </div>
   </div>

Steps to reproduce

  1. Add a date field (not timestamp) to a content type
  2. Use a form alter to add a custom CSS class to the form data input
  3. Create a new node of the content type to view the edit form
  4. The CSS class added should be on the element and 2 parent divs

Proposed resolution

Prevent CSS classes add to date inputs being added to related parent elements.

Remaining tasks

  1. Confirm bug
  2. Identify cause
  3. Create MR with fix

User interface changes

None

API changes

None

Data model changes

None

Comments

PCate created an issue. See original summary.

pcate’s picture

Version: 8.x-3.x-dev » 8.x-3.0-rc10
pcate’s picture

I just tested adding a custom attribute to the data input as well. In that case it is added to the date input and .form-datetime-wrapper parent div, but not the .form-items-inline parent div.

<div class="field--type-datetime field--name-field-test-upload-date field--widget-datetime-default js-form-wrapper form-wrapper" data-drupal-selector="edit-field-test-upload-date-wrapper" id="edit-field-test-upload-date-wrapper">
   <div data-test-id="DATA-TEST-ID" data-drupal-selector="edit-field-test-upload-date-0-value" class="form-item form-datetime-wrapper">
      <h4 class="form-item__label">Test Upload Date</h4>
      <div id="edit-field-test-upload-date-0-value" data-drupal-field-elements="date" class="form-items-inline">
         <div class="js-form-item form-item js-form-type-date form-type--date js-form-item-field-test-upload-date-0-value-date form-item--field-test-upload-date-0-value-date form-item--no-label">
     
            <label for="edit-field-test-upload-date-0-value-date" class="form-item__label visually-hidden">Date</label>

               <input data-test-id="DATA-TEST-ID" data-drupal-selector="edit-field-test-upload-date-0-value-date" type="date" placeholder="YYYY-MM-DD" data-help="Enter the date using the format YYYY-MM-DD (e.g., 2024-06-10)." id="edit-field-test-upload-date-0-value-date" name="field_test_upload_date[0][value][date]" value="" size="12" class="form-date form-element form-element--type-date form-element--api-date">
          </div>
        </div>
    </div>
</div>
saschaeggi’s picture

Status: Active » Postponed (maintainer needs more info)

How is that related to Gin? 🤔

pcate’s picture

How is that related to Gin?

So I guess that was an assumption on my part since I'm using the Gin admin theme and Gin has twig template overrides for some date related elements such as datetime-wrapper.html.twig, as well as other form customizations.

saschaeggi’s picture

It wasn't meant in a rude way btw, just clarifying if it is indeed related specifically to Gin or if it should be moved to another issue queue.

saschaeggi’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)