UI Fix: Lexical Fields use "undefined" for name in css label element attribute "for="

[n-a-t-j-b]

Describe the Bug.

Typically fields have a label with the css "for" attribute so that styling can be precise. When using labels on Lexical fields however the attribute is for="field-undefined" even when a label is explicitly declared:

<label class="field-label " for="field-undefined">Introduction</label>

versus the norm (author in this example) which is for="field-(insert field name here)":

<label class="field-label " for="field-author">Author<span class="required">*</span></label>

Reproduction Steps

Create a richText field in your config (with or without a label element):

{
  name: 'intro',
  label: 'Introduction',
  type: 'richText',
},

Inspect the output of the Admin Panel for that field using dev tools.

Expect to see:

<label class="field-label" for="field-intro">Introduction</label>

But instead you get:

<label class="field-label" for="field-undefined">Introduction</label>

Environment Info

Payload: 3.7.0
Node.js: 20.15.0
Next.js: 15.1.0

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

[github-actions]

🚀 This is included in version v3.10.0