"error" HTML class causes UX issues with vertical tabs

Created on 9 May 2024, 7 months ago
Updated 25 July 2024, 5 months ago

Problem/Motivation

This module adds an "error" HTML class when the character count exceeds the limit. The "error" indicates a form error to some JavaScript in Drupal Core. This can cause un-desirable UX issues.
Core's vertical tabs JS looks for this class on load / attach. If the "error" class is found in a tab, then it focuses that tab. This "auto tab focusing" is also triggered after any AJAX call for adding more field items or adding paragraphs. This can cause the focus to jump to the tab with the maxlength "error" class even when it is not the tab being edited. This is not desirable when the maxlength counter has been configured to be a suggestion and not a "Hard limit".

Steps to reproduce

  1. Configure a node form with more than 1 vertical tab using the field_group module or any other method to create the vertical tabs.
    1. In the FIRST tab, add a summary field that has maxlength settings with a 155 character limit, do not enable "Hard limit".
    2. Add a SECOND tab with a field that can cause an AJAX call - a paragraphs field.
  2. Create a new node.
    1. On the FIRST tab, enter a Summary with more than 155 characters.
    2. Select the SECOND tab, add a paragraph.
  3. BUG:
    • BUG: You end up back on the FIRST tab.
    • EXPECTED: You should stay on the SECOND tab.

Proposed resolution

When the maxlength is NOT configured as a "Hard limit", use a "soft-error" HTML class that is styled the same as the original "error" HTML class.

Remaining tasks

  • ❌ Get maintainer approval for the proposed resolution
  • ❌ Implement resolution
  • ❌ Write test coverage (contact a maintainer if you need help)
  • ❌ Maintainer review via the UI
  • ❌ Maintainer Code Review #1
  • ❌ Maintainer code review #2
  • ❌ Merge into dev branch, with credit to author and participants

User interface changes

None

API changes

HTML class change from "error" to "soft-error" when the field widget is not configured as a "Hard limit".

Data model changes

None

🐛 Bug report
Status

Fixed

Version

3.0

Component

User interface

Created by

🇺🇸United States recrit

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024