diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts index e92883631..5bab2b886 100644 --- a/src/components/modules/ui.ts +++ b/src/components/modules/ui.ts @@ -611,16 +611,18 @@ export default class UI extends Module { /** * Sometimes we emulate click on some UI elements, for example by Enter on Block Settings button * We don't need to handle such events, because they handled in other place. + * + * PS: Commented this out because it makes this method behave differently in tests. Cypress-generated clicks are having isTrusted == false. */ - if (!event.isTrusted) { - return; - } + // if (!event.isTrusted) { + // return; + // } /** * Close Inline Toolbar when nothing selected * Do not fire check on clicks at the Inline Toolbar buttons */ const target = event.target as HTMLElement; - const clickedInsideOfEditor = this.nodes.holder.contains(target) || Selection.isAtEditor; + const clickedInsideOfEditor = this.nodes.holder.contains(target); if (!clickedInsideOfEditor) { /** diff --git a/test/cypress/tests/modules/Ui.cy.ts b/test/cypress/tests/modules/Ui.cy.ts index 88fd3515c..53d3aa26c 100644 --- a/test/cypress/tests/modules/Ui.cy.ts +++ b/test/cypress/tests/modules/Ui.cy.ts @@ -92,5 +92,58 @@ describe('Ui module', function () { }); }); }); + + describe('Clicking outside', function () { + it('should clear current block even if selection was inside the editor before clicking', function () { + cy.createEditor({ + data: { + blocks: [ + { + id: 'block1', + type: 'paragraph', + data: { + text: '', + }, + }, + ], + }, + }).as('editorInstance'); + + cy.get('[data-cy=editorjs]') + .then(editor => { + const editorsParent = editor[0].parentNode; + const input = editorsParent.ownerDocument.createElement('div'); + + input.contentEditable = 'true'; + input.style.width = '20px'; + input.style.height = '20px'; + input.setAttribute('data-cy', 'test-input'); + + editorsParent.appendChild(input); + }); + + /** + * Put cursor inside the editor + */ + cy.get('[data-cy=editorjs]') + .find('.ce-paragraph') + .first() + .click(); + + /** + * Click outside of the editor and type '/' + */ + cy.get('[data-cy=test-input]') + .click() + .type('/'); + + /** + * Toolbox shouldn't be open + */ + cy.get('[data-cy=editorjs]') + .get('div.ce-toolbox .ce-popover') + .should('not.be.visible'); + }); + }); }); });