Date list labels are not visible above select field creating bad UX

Created on 1 July 2024, 6 months ago
Updated 31 July 2024, 5 months ago

Problem/Motivation

When creating a 'Date list' element the labels (Day, Month, Year) are not visible above the select fields but only as the first option. This makes using the Date List more difficult for users because when an option is chosen you cannot see what the label used to be. Especially relevant because of different use of date notation (m/d/y vs d/m/y). As visible on the attached screenshot it is impossible to differentiate what is supposed to be day, month, hour or minute.

Steps to reproduce

- Create a webform with the Webform module โ†’ .
- Create Date List element.
- View form in front-end.

Proposed resolution

Make labels for day, month, year, etc visible by default above the select fields. This can be done by either removing or editing line 256 in core/lib/Drupal/Core/Datetime/Element/Datelist.php
'#title_display' => 'invisible',

๐Ÿ› Bug report
Status

Fixed

Version

10.4 โœจ

Component
Formย  โ†’

Last updated 2 days ago

Created by

๐Ÿ‡ณ๐Ÿ‡ฑNetherlands rroose

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

Merge Requests

Comments & Activities

  • Issue created by @rroose
  • Assigned to sourav_paul
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sourav_paul Kolkata
  • Issue was unassigned.
  • Status changed to Needs review 6 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sourav_paul Kolkata
  • Pipeline finished with Success
    6 months ago
    Total: 582s
    #216649
  • Pipeline finished with Success
    6 months ago
    #216651
  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Is this reproducible without the contrib module?

    MR should be against 11.x not 10.3.x

    Also if reproducible in core will probably need a test case

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands rroose

    How to reproduce with core:

    1. Make sure you are logged into Drupal as user with sufficient permissions
    2. Enable the 'Contact' module
    3. Navigate to /admin/structure/contact and 'Add contact form'
    4. Fill in a label and recipients (can be anything) and click 'Save'
    5. Click on the error next to edit below operations of the newly created form and select 'Manage Fields'
    6. Click 'Create new field'
    7. Select 'Date and time' and click 'Continue'
    8. Fill in the label, select 'Date' and click 'Continue'
    9. Leave settings as is and click 'Save settings'
    10. Go to 'Manage form display'
    11. Click on the select option 'Date and time' of the newly created date field, choose 'Select list' and click on 'Save'
    12. Click on view to see the date field in the Drupal front-end
  • Status changed to Active 5 months ago
  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands rroose
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia amanbtr72

    amanmansuri72 โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Success
    5 months ago
    Total: 497s
    #221625
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia amanbtr72

    As per the "Problem/Motivation," I have resolved the issues as suggested for the 10.3.x version Merge request !8739 created for the same.

    Kindly review

    Thanks

  • Status changed to RTBC 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia chandansha

    I have tested MR 8739. Now label looking good.
    i moved it to RTBC.
    Thanks!!

    • catch โ†’ committed 0aef2c55 on 10.4.x
      Issue #3458220 by Sourav_Paul, rroose, Chandansha, smustgrave: Date list...
    • catch โ†’ committed c12636b4 on 11.x
      Issue #3458220 by Sourav_Paul, rroose, Chandansha, smustgrave: Date list...
  • Status changed to Fixed 5 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom catch

    I checked git blame to see where the invisible was added, and it was in the original 2014 commit of this code, which in turn came from a much older contrib module - so I think this was a decision taken a very long time ago that it would be hard to trace back.

    Given the fix here is just removing one line of extraneous code, I don't think this needs test coverage, we could test that the labels are there, but that's just how form behaviour works if you don't set #title_display => 'invisible'.

    Committed/pushed to 11.x and cherry-picked to 10.4.x, thanks! This is a small change to the form structure so I don't think it should go in a patch release, but it's also so small that a CR/release note feels extraneous.

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

Production build 0.71.5 2024