Contrib.social

CSS classes added to date input are also added to parent elements

Open on Drupal.org →
Created on 10 June 2024, 10 months ago
Updated 23 June 2024, 10 months ago

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

🐛 Bug report
Status

Closed: works as designed

Component

Code

Created by

🇺🇸United States pcate

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @pcate
  • Comment 10 months ago →
    🇺🇸United States pcate
  • Comment 10 months ago →
    🇺🇸United States pcate

    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>
  • Status changed to Postponed: needs info 10 months ago
  • Comment 10 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    How is that related to Gin? 🤔

  • Comment 10 months ago →
    🇺🇸United States pcate

    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.

  • Comment 10 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    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.

  • Status changed to Closed: works as designed 10 months ago
  • Comment 10 months ago →
    🇨🇭Switzerland saschaeggi Zurich
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024