From 6e75d2966449a3585b640e2be37ef6cabc9d1f83 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 17 Jul 2024 15:06:41 +0530
Subject: [PATCH] chore: fix issue with focus getting lost after pressing
 up/down after clicking inside checklist [skip e2e]

---
 .../SuperEditor/Plugins/CheckListPlugin.tsx   | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx
index f0b1bdf8384..6b7f388fb2b 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx
@@ -1,4 +1,4 @@
-import { $isListItemNode, $isListNode, INSERT_CHECK_LIST_COMMAND, insertList, ListNode } from '@lexical/list'
+import { $isListItemNode, INSERT_CHECK_LIST_COMMAND, insertList, ListNode } from '@lexical/list'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { calculateZoomLevel, isHTMLElement, mergeRegister } from '@lexical/utils'
 import {
@@ -47,38 +47,36 @@ export function CheckListPlugin(): null {
             return
           }
 
-          editor.update(() => {
-            const targetNode = $getNearestNodeFromDOMNode(target)
+          editor.getRootElement()?.focus()
 
-            const parentNode = targetNode?.getParent()
-
-            if (!$isListNode(parentNode) || parentNode.getListType() !== 'check') {
-              return
-            }
+          const parentNode = target.parentNode
+          // @ts-expect-error internal field
+          if (!parentNode || parentNode.__lexicalListType !== 'check') {
+            return
+          }
 
-            const rect = target.getBoundingClientRect()
+          const rect = target.getBoundingClientRect()
 
-            const listItemElementStyles = getComputedStyle(target)
-            const paddingLeft = parseFloat(listItemElementStyles.paddingLeft) || 0
-            const paddingRight = parseFloat(listItemElementStyles.paddingRight) || 0
-            const lineHeight = parseFloat(listItemElementStyles.lineHeight) || 0
+          const listItemElementStyles = getComputedStyle(target)
+          const paddingLeft = parseFloat(listItemElementStyles.paddingLeft) || 0
+          const paddingRight = parseFloat(listItemElementStyles.paddingRight) || 0
+          const lineHeight = parseFloat(listItemElementStyles.lineHeight) || 0
 
-            const checkStyles = getComputedStyle(target, ':before')
-            const checkWidth = parseFloat(checkStyles.width) || 0
+          const checkStyles = getComputedStyle(target, ':before')
+          const checkWidth = parseFloat(checkStyles.width) || 0
 
-            const pageX = event.pageX / calculateZoomLevel(target)
+          const pageX = event.pageX / calculateZoomLevel(target)
 
-            const isWithinHorizontalThreshold =
-              target.dir === 'rtl'
-                ? pageX < rect.right && pageX > rect.right - paddingRight
-                : pageX > rect.left && pageX < rect.left + (checkWidth || paddingLeft)
+          const isWithinHorizontalThreshold =
+            target.dir === 'rtl'
+              ? pageX < rect.right && pageX > rect.right - paddingRight
+              : pageX > rect.left && pageX < rect.left + (checkWidth || paddingLeft)
 
-            const isWithinVerticalThreshold = event.clientY > rect.top && event.clientY < rect.top + lineHeight
+          const isWithinVerticalThreshold = event.clientY > rect.top && event.clientY < rect.top + lineHeight
 
-            if (isWithinHorizontalThreshold && isWithinVerticalThreshold) {
-              callback()
-            }
-          })
+          if (isWithinHorizontalThreshold && isWithinVerticalThreshold) {
+            callback()
+          }
         }
 
         function handleClick(event: Event) {
@@ -100,7 +98,6 @@ export function CheckListPlugin(): null {
                 return
               }
 
-              domNode.focus()
               node.toggleChecked()
             })
           })