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 (