From 8a93fb53e3920e9deb642005d6053ac4f9397bec Mon Sep 17 00:00:00 2001
From: arimieandreea <arimie_andreea@yahoo.com>
Date: Thu, 25 Jun 2026 13:16:42 +0300
Subject: [PATCH 1/2] fix(editable-html-tip-tap): prevent toolbar closing when
 clicking the page scrollbar inline-dropdown PIE-575

---
 .../src/components/respArea/InlineDropdown.jsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
index 914a8dd31..2b7a15235 100644
--- a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
+++ b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
@@ -93,6 +93,18 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
+
+  const isScrollbarClicked = (event) =>  event.clientX >= document.documentElement.clientWidth ||
+        event.clientY >= document.documentElement.clientHeight ||
+        // macOS overlay: target is document.documentElement or document.body directly
+        // when clicking the window scrollbar — never a child element
+        (
+            (event.target === document.documentElement || event.target === document.body) &&
+            // within 20px of the right or bottom edge of the viewport
+            (event.clientX >= window.innerWidth - 20 || event.clientY >= window.innerHeight - 20)
+        );
+  
+
   useEffect(() => {
     // Calculate position relative to selection
     const bodyRect = document.body.getBoundingClientRect();
@@ -105,6 +117,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+
+      if( isScrollbarClicked(event) ) {
+        return;
+      }
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (

From 1b38e20965ee0b3dd7ffe84e7af625865987a4d9 Mon Sep 17 00:00:00 2001
From: arimieandreea <arimie_andreea@yahoo.com>
Date: Thu, 25 Jun 2026 13:46:20 +0300
Subject: [PATCH 2/2] fix(editable-html-tip-tap): use strict greater-than for
 scrollbar viewport check inlinedropdown PIE-575

---
 .../components/__tests__/InlineDropdown.test.jsx   | 14 ++++++++++++++
 .../src/components/respArea/InlineDropdown.jsx     | 14 +++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx b/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
index a05d0c392..b2419bfe4 100644
--- a/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
+++ b/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
@@ -464,6 +464,20 @@ describe('InlineDropdown', () => {
     expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
   });
 
+  it('does not close toolbar when clicking the page scrollbar (documentElement)', async () => {
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.documentElement);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+});
+
   it('renders delete control on portaled custom toolbar when container el is set', async () => {
     const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
     expect(await findByLabelText('Delete')).toBeInTheDocument();
diff --git a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
index 2b7a15235..da1031e6b 100644
--- a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
+++ b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
@@ -94,15 +94,11 @@ const InlineDropdown = (props) => {
   }, [editor, node, selected]);
 
 
-  const isScrollbarClicked = (event) =>  event.clientX >= document.documentElement.clientWidth ||
-        event.clientY >= document.documentElement.clientHeight ||
-        // macOS overlay: target is document.documentElement or document.body directly
-        // when clicking the window scrollbar — never a child element
-        (
-            (event.target === document.documentElement || event.target === document.body) &&
-            // within 20px of the right or bottom edge of the viewport
-            (event.clientX >= window.innerWidth - 20 || event.clientY >= window.innerHeight - 20)
-        );
+ 
+  const isScrollbarClicked = (event) =>
+    event.clientX > document.documentElement.clientWidth ||
+    event.clientY > document.documentElement.clientHeight ||
+    event.target === document.documentElement;
   
 
   useEffect(() => {