Exposed filter template does not match drupal core

Created on 17 January 2024, 10 months ago

Problem/Motivation

After enabling this module, all date relevant views filter plugins are replaced as described but with a completly new visual output as core does. I think this has user acceptance difficulties because there is no dedicated template to override. Just re-alter the plugin via hooks.
The exposed filter is replaced with a fieldset.

Core view filter markup

<div class="form-group js-form-item form-item js-form-type-textfield form-item-date-end js-form-item-date-end">
  <!-- THEME DEBUG -->
  <!-- THEME HOOK: 'form_element_label' -->
  <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/form/form-element-label.html.twig' -->
  <label for="edit-date-end">Enddatum</label>
  <!-- END OUTPUT from 'core/themes/stable9/templates/form/form-element-label.html.twig' -->

  <!-- THEME DEBUG -->
  <!-- THEME HOOK: 'input__textfield' -->
  <!-- FILE NAME SUGGESTIONS:
     * input--textfield.html.twig
     x input.html.twig
  -->
  <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/form/input.html.twig' -->
  <input data-drupal-selector="edit-date-end" type="text" id="edit-date-end" name="date_end" value="" size="30" maxlength="128" class="form-text form-control">
  <!-- END OUTPUT from 'core/themes/stable9/templates/form/input.html.twig' -->
</div>

date_filter view filter output.

<fieldset data-drupal-selector="edit-date-end-wrapper" id="edit-date-end-wrapper" class="js-form-item form-item js-form-wrapper form-wrapper">
  <legend>Enddatum</legend>

  <!-- THEME DEBUG -->
  <!-- THEME HOOK: 'form_element' -->
  <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/form/form-element.html.twig' -->
  <div class="form-group form-flying-label js-form-item form-item js-form-type-date form-item-date-end-date js-form-item-date-end-date form-no-label">
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'form_element_label' -->
    <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/form/form-element-label.html.twig' -->
    <label for="edit-date-end-date" class="visually-hidden">Datum</label>
    <!-- END OUTPUT from 'core/themes/stable9/templates/form/form-element-label.html.twig' -->

    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'input__date' -->
    <!-- FILE NAME SUGGESTIONS:
    * input--date.html.twig
    x input.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/form/input.html.twig' -->
    <input type="date" data-drupal-selector="edit-date-end-date" data-drupal-date-format="Y-m-d" id="edit-date-end-date" name="date_end[date]" value="" class="form-date form-control">
    <!-- END OUTPUT from 'core/themes/stable9/templates/form/input.html.twig' -->
  </div>
  <!-- END OUTPUT from 'core/themes/stable9/templates/form/form-element.html.twig' -->
</fieldset>

If you want to support date and datetime exposed filter this module can alter the type attribute with date or datetime-local.
Browser then displays a widget for dates and dates with time inputs.

Support is here.
https://caniuse.com/input-datetime

What dou you think?

Steps to reproduce

  1. Install & enable the module
  2. Configure a view with a date exposed filter
  3. Compare the output between core and date_filter

Proposed resolution

Improve the filter plugins, that the HTML markup is a default form-element and just alter the type attribute of the input.

User interface changes

Change from fieldset to the core default field-element.

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇩🇪Germany sunlix Wesel

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

Comments & Activities

Production build 0.71.5 2024