Problem/Motivation
#states do not work with 'datetime' form elements:
- Toggling visibility of the form element fails since there's no wrapper container to target.
- Trying to toggle disabled fails since we can't find the nested form elements to disable.
- Trying to toggle "required" fails since we can't find the label to add the right class(es) to.
- ...
Proposed resolution
- Fix datetime-wrapper twig templates to actually generate a wrapper div.
- Update logic in states.js to handle the nested elements like datetime.
Consistently useMoved to solving this in #3078334: Datetime and Datelist elements should render as fieldsets<label>
not<h4>
for the datetime wrapper label.
Remaining tasks
- Land #3078334: Datetime and Datelist elements should render as fieldsets
Write and verify automated tests.Complete. See comments #91-102- Update code and tests once #3078334 is in
- Markup review of all the changes to the datetime-wrapper twig templates:
- System module's default temple - Fixed, but needs final approval.
- Classy - Decided to leave broken. See #122.
- Stable - Decided to leave broken. See #122.
- Bartik - Fixed in #136 - can we do this?
- Seven - Fixed in #136 - can we do this?
- Claro - Fixed in #136
- can we do this?Yes. From #admin-ui Slack meeting 2019-11-06: @lauriii "We can make changes to Claro 🎉"
- JavaScript review of the changes to
core/misc/states.es6.js
. - Other reviews + manual testing (optional).
- Decide if we can backport to 8.7.x (if so, working patch in #139).
- RTBC
- Commit.
- Unblock child issues.
User interface changes
#states actually works on datetime form elements.
Changes to the datetime-wrapper.html.twig
templates (default templates from system and both the classy and stable themes) to:
- Actually include a wrapper div (!)
Always use(Now the responsibility of #3078334.<label>
not<h4>
for the label. The label is generated using the existing core theme templates for form labels (form_element_label).
API changes
None.
Data model changes
None.
Original Report
While trying to create a custom field widget containing a "datetime" form element, I discovered that the #states attribute does not work on it.
Some states can be achieved with a workaround: put the datetime element in a container, and put the #states on the container. But this is obviously no clean fix, and it doesn't work for all states. (Works for "visible" for example, but not for "required".)
I was not able to figure out why this is not working, but I noticed that there have been a lot of issues regarding the #states attribute in the issue tracker. Most of them for were for specific elements like submit buttons, select elements with multiple values, ...