Problem/Motivation

When a component subfield of a Name element (e.g., Given, Family, Middle, etc.) has its
Label display setting set to title (aka above), the output contains nested <label> elements.

This happens because the Name module pre-renders a themed label and assigns the resulting HTML to #title; Drupal then renders another label for #title, resulting in two labels:

<label for="edit-field-mynamefield-0-given" class="form-item__label">
  <label class="form-item__label">Given</label>
</label>

Steps to reproduce

  1. Add a Name field to a content type (or any entity with a form display).
  2. In the field settings, set a component subfield (e.g., Given) Label display to above.
  3. Open the add/edit form and inspect the markup of that subfield.

Expected: One label per input, rendered by core per #title_display = 'before'.

Actual: Two labels (a label nested inside another label).

Proposed resolution

  • Do not pre-render and inject a themed label into #title for the “title” (above) option.
  • Instead, let Form API/Core render the label:
    • Set $element['#title_display'] = 'before' .
    • Set $element['#required'] = $show_component_required_marker to control the HTML5 required/aria-required behavior, consistent with other branches.
  • Keep existing behavior for other title_display modes (description/placeholder/none/attribute).

Remaining tasks

  • Implement the change for the title case.
  • Add test coverage to assert there is exactly one label.

User interface changes

  • DOM fix: subfield labels no longer duplicated and nested when “above” is selected.

Issue fork name-3552489

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

jcandan created an issue. See original summary.

jcandan’s picture

Issue summary: View changes
jcandan’s picture

Issue summary: View changes

jcandan’s picture

Status: Active » Needs review

Tests fail due to #3543024: Failing Tests: Core 11.2+. If that is merged, we will see the tests pass, and the test-only changes job correctly fail having added bug regression coverage.

jcandan’s picture

bluegeek9 made their first commit to this issue’s fork.

jcandan’s picture

#3552451: Required state incorrectly marks non-minimum components as required continues to elude an elegant solution. As opposed to #6, let's capture this fix here.

jcandan’s picture

jcandan’s picture

bluegeek9 changed the visibility of the branch 8.x-1.x to hidden.

bluegeek9’s picture

Status: Needs review » Needs work
StatusFileSize
new28.13 KB

I am unable to produce the issue.

jcandan’s picture

Could you double-check the DOM in developer tools?

The duplication is that there is an extra <label> element within the <label>:

  <label for="edit-field-mynamefield-0-given" class="form-item__label">
    <label class="form-item__label">Given</label>
  </label>
bluegeek9’s picture

Status: Needs work » Needs review

I see the issue now.

  • bluegeek9 committed c00f3ec9 on 8.x-1.x authored by jcandan
    [#3552489] fix: Component subfield labels are duplicated when label...
bluegeek9’s picture

Status: Needs review » Fixed
//www.flaticon.com/free-icons/thank-you Thank you for your contribution! Your continued support makes this project sustainable.
There are multiple ways to show appreciation for the work contributed to this project including:
  • Triage issues and adding more context to existing issues.
  • Flagging Name Field as a favorite on the project page to help others discover it and show your support.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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