diff --git a/packages/richtext-lexical/src/field/features/Blocks/component/index.scss b/packages/richtext-lexical/src/field/features/Blocks/component/index.scss index 5ec7d454d..994f30859 100644 --- a/packages/richtext-lexical/src/field/features/Blocks/component/index.scss +++ b/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; diff --git a/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss index 8a22371de..79ac0fcf7 100644 --- a/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss +++ b/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 } } diff --git a/test/fields/collections/RichText/blocks.ts b/test/fields/collections/RichText/blocks.ts index 0b09efd8b..6d92e98fb 100644 --- a/test/fields/collections/RichText/blocks.ts +++ b/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', +} diff --git a/test/fields/collections/RichText/index.ts b/test/fields/collections/RichText/index.ts index 356e260e1..3bf8f789a 100644 --- a/test/fields/collections/RichText/index.ts +++ b/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], }), ], }),