UI: Lexical Fixed Toolbar z-index: 2 style leads to covering of select values in field above

[n-a-t-j-b]

Describe the Bug

The class involved is "fixed-toolbar" and is located in @payloadcms\richtext-lexical\dist\field\bundled.css.

Not sure if the toolbar was intentionally given a z-index of 2 to combat another issue (possibly when it is a popup?), but removing the style or setting it to 0, fixes the UI problem for the Select above it. Obviously not an issue if the FixedToolbarFeature() is not configured for the field.

Apologies, having not noticed this previously I'm unsure when the issue started.

z-index:2

z-index:0

Link to the code that reproduces this issue

n/a

Reproduction Steps

Include any select field directly above a richText field type in the collection config. Enable "FixedToolbarFeature()" in lexicalEditor features e.g. for the above images this is a simplified fields[] config:

  {
    name: 'size',
    type: 'select',
    defaultValue: 'oneThird',
    options: [
      {
        label: 'One Third',
        value: 'oneThird',
      },
      {
        label: 'Half',
        value: 'half',
      },
      {
        label: 'Two Thirds',
        value: 'twoThirds',
      },
      {
        label: 'Full',
        value: 'full',
      },
    ],
  },
  {
    name: 'richText',
    type: 'richText',
    editor: lexicalEditor({
      features: ({ rootFeatures }) => {
        return [
          ...rootFeatures,
          FixedToolbarFeature(),
        ]
      },
    }),
  },

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

payload: 3.0.0-beta.114
Node: 20.15.0
next: 15.0.0-canary.173

Other relevant versions
@payloadcms/richtext-lexical: 3.0.0-beta.114
lexical: 0.18.0

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[r1tsuu]

Hey @n-a-t-j-b, your issue is valid, I opened a PR #8735, @denolfe will likely re-look into how we handle these!

[RichiePowell]

I can also see this issue, so I'm following.

[r1tsuu]

Fixed!

[github-actions]

🚀 This is included in version v3.0.0-beta.123

[github-actions]

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