I updated to Bootstrap 7.x-3.18 and it seems that Date fields that use the Date Select widget (which shows each date component as a dropdown select list) are no longer receiving the "form-control" class, so they are being rendered as dropdown selects using the browser's default styling.

I found this issue which changed the behavior of how that class is applied recently, so I assume this is what caused it #2804221: Elements that use core #theme hooks don't get .form-control applied.

Below are screenshots and markup snippets of the date fields before/after updating Bootstrap.

Before:

<div class="form-item form-item-timestamp-month form-type-select form-group">
  <label class="control-label" for="edit-timestamp-month">Month <span class="form-required" title="This field is required.">*</span></label>
  <div class="date-month">
    <select class="date-month form-control form-select required" id="edit-timestamp-month" name="timestamp[month]">
      <option value="1" selected="selected">Jan</option>
      <option value="2">Feb</option>
      <option value="3">Mar</option>
      <option value="4">Apr</option>
      <option value="5">May</option>
      <option value="6">Jun</option>
      <option value="7">Jul</option>
      <option value="8">Aug</option>
      <option value="9">Sep</option>
      <option value="10">Oct</option>
      <option value="11">Nov</option>
      <option value="12">Dec</option>
    </select>
  </div>
</div>

After:

<div class="form-item form-item-timestamp-month form-type-select form-group">
  <label class="control-label" for="edit-timestamp-month">Month <span class="form-required" title="This field is required.">*</span></label>
  <div class="date-month">
    <select class="date-month form-select required" id="edit-timestamp-month" name="timestamp[month]">
      <option value="1" selected="selected">Jan</option>
      <option value="2">Feb</option>
      <option value="3">Mar</option>
      <option value="4">Apr</option>
      <option value="5">May</option>
      <option value="6">Jun</option>
      <option value="7">Jul</option>
      <option value="8">Aug</option>
      <option value="9">Sep</option>
      <option value="10">Oct</option>
      <option value="11">Nov</option>
      <option value="12">Dec</option>
    </select>
  </div>
</div>

Notice how the <select> element has the class form-control in the before, but not in the after.

CommentFileSizeAuthor
#7 2939542-7.patch1.25 KBmarkhalliwell
#6 bootstrap_date_select_element-2939542-6.patch323 bytesm.stenta
#5 bootstrap_date_select_element-2939542-5.patch376 bytesm.stenta
#3 Screenshot from 2018-01-26 08-35-06.png309.91 KBm.stenta
#2 Screenshot from 2018-01-25 13-02-53.png47.59 KBm.stenta
Screenshot from 2018-01-25 13-03-06.png47.58 KBm.stenta
Screenshot from 2018-01-25 13-03-06.png47.58 KBm.stenta

Comments

m.stenta created an issue. See original summary.

m.stenta’s picture

m.stenta
he/him
Primary language English
commented
Issue summary: View changes
StatusFileSize
new Screenshot from 2018-01-25 13-02-53.png47.59 KB

Oops, uploaded the same screenshot twice. Fixed original description.

m.stenta’s picture

m.stenta
he/him
Primary language English
commented
StatusFileSize
new Screenshot from 2018-01-26 08-35-06.png309.91 KB

OK I'm doing some debugging on this... see attached screenshot of Xdebug in PHPStorm...

The if statement that adds the form-control class is not matching properly:

  // Add necessary classes for specific element types/theme hooks.
  if (($theme && in_array($theme, $theme_hooks)) || ($type && in_array($type, $types)) || ($type === 'file' && empty($element['#managed_file']))) {
    $element['#attributes']['class'][] = 'form-control';
  }

In the case of a date select field, $theme is date_select_element (which does not exist in the $theme_hooks array), and $type is select (which does not exist in the $types array), so neither satisfy the condition.

I'm unsure what the correct way to fix this is, though... still understanding the logic in the bootstrap_pre_render($element). Any guidance is appreciated! Happy to put together a patch while I've got the file open here...

m.stenta’s picture

m.stenta
he/him
Primary language English
commented

Oh, quick note about the screenshot in my last comment: you may notice that date_select_element is in the $types array. I added that earlier to see if it fixed it, so that doesn't actually exist in the current Bootstrap code.

m.stenta’s picture

m.stenta
he/him
Primary language English
commented
Status: Active » Needs work
StatusFileSize
new bootstrap_date_select_element-2939542-5.patch376 bytes

If I add date_select_element to the $theme_hooks array, on the other hand, it fixes the issue. Attached is a simple one-line patch that demonstrates that.

I do not think this is the right way to do it, though, based on how the rest of the code in that function is structured - it seems like $theme_hooks is reserved for core theme functions, but $types is used for contrib - is that right?

m.stenta’s picture

m.stenta
he/him
Primary language English
commented
StatusFileSize
new bootstrap_date_select_element-2939542-6.patch323 bytes

It ALSO works if we just add select to the $types array (see attached patch) - but then it's duplicated in both $types and $theme_hooks.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Needs work » Needs review
StatusFileSize
new 2939542-7.patch1.25 KB

Hm. So when I was originally working on this in #2804221: Elements that use core #theme hooks don't get .form-control applied, I had actually merged the theme hooks into the types, but thought it wasn't needed.

I suppose this proves that it a type may actually be a normal core type, but the theme hook implementation was changed.

Try this patch.

m.stenta’s picture

m.stenta
he/him
Primary language English
commented
Status: Needs review » Reviewed & tested by the community

Yup that does the trick! Thanks!

  • markcarver committed 5645152 on 7.x-3.x 
    Issue #2939542 by markcarver, m.stenta: Date Select widget does not get...
markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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