fix(richtext-lexical): incorrect stacking of block's fields

packages/richtext-lexical/src/field/features/Blocks/component/index.scss

@@ -1,5 +1,10 @@
 @import 'payload/scss';
 
+.ContentEditable__root > div:has(.lexical-block) {
+  // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
+  z-index: 1;
+}
+
 .lexical-block {
   display: flex;
   flex-direction: column;

packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss

@@ -14,6 +14,7 @@
   & > * {
     transition: transform 0.2s ease-in-out;
     will-change: transform;
+    position: relative; // makes sure that z-index properties work - for example for the Blocks feature
   }
 }
 

test/fields/collections/RichText/blocks.ts

@@ -29,3 +29,35 @@ export const UploadAndRichTextBlock: Block = {
   ],
   slug: 'uploadAndRichText',
 }
+
+export const SelectFieldBlock: Block = {
+  fields: [
+    {
+      name: 'select',
+      type: 'select',
+      options: [
+        {
+          label: 'Option 1',
+          value: 'option1',
+        },
+        {
+          label: 'Option 2',
+          value: 'option2',
+        },
+        {
+          label: 'Option 3',
+          value: 'option3',
+        },
+        {
+          label: 'Option 4',
+          value: 'option4',
+        },
+        {
+          label: 'Option 5',
+          value: 'option5',
+        },
+      ],
+    },
+  ],
+  slug: 'select',
+}

test/fields/collections/RichText/index.ts

@@ -8,7 +8,7 @@ import {
   lexicalEditor,
 } from '../../../../packages/richtext-lexical/src'
 import { slateEditor } from '../../../../packages/richtext-slate/src'
-import { TextBlock, UploadAndRichTextBlock } from './blocks'
+import { SelectFieldBlock, TextBlock, UploadAndRichTextBlock } from './blocks'
 import { generateLexicalRichText } from './generateLexicalRichText'
 import { generateSlateRichText } from './generateSlateRichText'
 
@@ -63,7 +63,7 @@ const RichTextFields: CollectionConfig = {
             },
           }),
           BlocksFeature({
-            blocks: [TextBlock, UploadAndRichTextBlock],
+            blocks: [TextBlock, UploadAndRichTextBlock, SelectFieldBlock],
           }),
         ],
       }),