Merge pull request #2277 from pie-framework/fix/PIE-575

fix(editable-html-tip-tap): prevent toolbar closing when clicking the…

Author: CarlaCostea

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();

packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx

@@ -93,6 +93,14 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
+
+ 
+  const isScrollbarClicked = (event) =>
+    event.clientX > document.documentElement.clientWidth ||
+    event.clientY > document.documentElement.clientHeight ||
+    event.target === document.documentElement;
+  
+
   useEffect(() => {
     // Calculate position relative to selection
     const bodyRect = document.body.getBoundingClientRect();
@@ -105,6 +113,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+
+      if( isScrollbarClicked(event) ) {
+        return;
+      }
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (