lexical
lexical copied to clipboard
Bug: Table Selection is displayed when editor does not have focus
Lexical version: Latest(Playground)
Steps To Reproduce
- Insert a TableNode
- Select all in the editor using Cmd+A
- Press the Esc key
https://github.com/user-attachments/assets/c0facf34-3c42-45cd-beba-cebaa56bf7dd
Link to code example
- Playground
The current behavior
- The selection state of the table remains active.
The expected behavior
- The table selection state should be cleared and no color should be applied.
Impact of fix
- I don't think it has a major impact.
So in this case what's happening is that the selection still includes the table, but the table selection styles are displayed whether the editor has focus or not. This can be worked around with CSS
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 02197f4cc..328904110 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -220,7 +220,7 @@
.PlaygroundEditorTheme__tableSelection *::selection {
background-color: transparent;
}
-.PlaygroundEditorTheme__tableSelected {
+[contenteditable]:focus-within .PlaygroundEditorTheme__tableSelected {
outline: 2px solid rgb(60, 132, 244);
}
.PlaygroundEditorTheme__tableCell {
@@ -256,7 +256,7 @@
.PlaygroundEditorTheme__tableCellSelected {
caret-color: transparent;
}
-.PlaygroundEditorTheme__tableCellSelected::after {
+[contenteditable]:focus-within .PlaygroundEditorTheme__tableCellSelected::after {
position: absolute;
left: 0;
right: 0;