lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: Table Selection is displayed when editor does not have focus

Open RyoSogawa opened this issue 10 months ago • 1 comments

Lexical version: Latest(Playground)

Steps To Reproduce

  1. Insert a TableNode
  2. Select all in the editor using Cmd+A
  3. 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.

RyoSogawa avatar Jan 23 '25 04:01 RyoSogawa

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;

etrepum avatar Feb 09 '25 05:02 etrepum