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(); + + 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(); 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 914a8dd31..da1031e6b 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,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 (