fix enter keydown problems + tests addedd

src/components/block/index.ts

@@ -738,6 +738,10 @@ export default class Block extends EventsDispatcher<BlockEvents> {
         contentNode = $.make('div', Block.CSS.content),
         pluginsContent = this.toolInstance.render();
 
+    if (import.meta.env.MODE === 'test') {
+      wrapper.setAttribute('data-cy', 'block-wrapper');
+    }
+
     /**
      * Export id to the DOM three
      * Useful for standalone modules development. For example, allows to identify Block by some child node. Or scroll to a particular Block by id.

src/components/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * Debounce timeout for selection change event
+ * {@link modules/ui.ts}
+ */
+export const selectionChangeDebounceTimeout = 180;

src/components/modules/crossBlockSelection.ts

@@ -48,11 +48,11 @@ export default class CrossBlockSelection extends Module {
   }
 
   /**
-   * return boolean is cross block selection started
+   * Return boolean is cross block selection started:
+   * there should be at least 2 selected blocks
    */
   public get isCrossBlockSelectionStarted(): boolean {
-    return !!this.firstSelectedBlock &&
-      !!this.lastSelectedBlock;
+    return !!this.firstSelectedBlock && !!this.lastSelectedBlock && this.firstSelectedBlock !== this.lastSelectedBlock;
   }
 
   /**

src/components/modules/ui.ts

@@ -15,6 +15,7 @@ import { mobileScreenBreakpoint } from '../utils';
 
 import styles from '../../styles/main.css?inline';
 import { BlockHovered } from '../events/BlockHovered';
+import { selectionChangeDebounceTimeout } from '../constants';
 /**
  * HTML Elements used for UI
  */
@@ -350,7 +351,6 @@ export default class UI extends Module<UINodes> {
     /**
      * Handle selection change to manipulate Inline Toolbar appearance
      */
-    const selectionChangeDebounceTimeout = 180;
     const selectionChangeDebounced = _.debounce(() => {
       this.selectionChanged();
     }, selectionChangeDebounceTimeout);

src/components/utils/popover/index.ts

@@ -237,9 +237,7 @@ export default class Popover extends EventsDispatcher<PopoverEventMap> {
     this.flipper.activate(this.flippableElements);
 
     if (this.search !== undefined) {
-      requestAnimationFrame(() => {
-        this.search?.focus();
-      });
+      this.search?.focus();
     }
 
     if (isMobileScreen()) {

src/components/utils/popover/search-input.ts

@@ -128,6 +128,10 @@ export default class SearchInput {
       tabIndex: -1,
     }) as HTMLInputElement;
 
+    if (import.meta.env.MODE === 'test') {
+      this.input.setAttribute('data-cy', 'search-input');
+    }
+
     this.wrapper.appendChild(iconWrapper);
     this.wrapper.appendChild(this.input);
 

test/cypress/support/commands.ts

@@ -234,3 +234,28 @@ Cypress.Commands.add('getLineWrapPositions', {
 
   return cy.wrap(lineWraps);
 });
+
+/**
+ * Dispatches keydown event on subject
+ * Uses the correct KeyboardEvent object to make it work with our code (see below)
+ */
+Cypress.Commands.add('keydown', {
+  prevSubject: true,
+}, (subject, keyCode: number) => {
+  /**
+   * We use the "reason instanceof KeyboardEvent" statement in blockSelection.ts
+   * but by default cypress' KeyboardEvent is not an instance of the native KeyboardEvent
+   *
+   * To make it work we need to trigger Cypres event with "eventConstructor: 'KeyboardEvent'",
+   *
+   * @see https://github.com/cypress-io/cypress/issues/5650
+   * @see https://github.com/cypress-io/cypress/pull/8305/files
+   */
+  subject.trigger('keydown', {
+    eventConstructor: 'KeyboardEvent',
+    keyCode,
+    bubbles: false,
+  });
+
+  return subject;
+});

test/cypress/support/index.d.ts

@@ -85,6 +85,14 @@ declare global {
        * @returns number[] - array of line wrap positions
        */
       getLineWrapPositions(): Chainable<number[]>;
+
+      /**
+       * Dispatches keydown event on subject
+       * Uses the correct KeyboardEvent object to make it work with our code (see below)
+       *
+       * @param keyCode - key code to dispatch
+       */
+      keydown(keyCode: number): Chainable<Subject>;
     }
 
     interface ApplicationWindow {

test/cypress/tests/ui/BlockTunes.cy.ts

@@ -0,0 +1,107 @@
+import { selectionChangeDebounceTimeout } from '../../../../src/components/constants';
+
+describe('BlockTunes', function () {
+  describe('Search', () => {
+    it('should be focused after popover opened', () => {
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Some text',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('{cmd}/')
+        .wait(selectionChangeDebounceTimeout);
+
+      /**
+       * Caret is set to the search input
+       */
+      cy.window()
+        .then((window) => {
+          const selection = window.getSelection();
+
+          expect(selection.rangeCount).to.be.equal(1);
+
+          const range = selection.getRangeAt(0);
+
+          cy.get('[data-cy=editorjs]')
+            .find('[data-cy="block-tunes"] .cdx-search-field')
+            .should(($block) => {
+              expect($block[0].contains(range.startContainer)).to.be.true;
+            });
+        });
+    });
+  });
+
+  describe('Keyboard only', function () {
+    it('should not delete the currently selected block when Enter pressed on a search input (or any block tune)', function () {
+      const ENTER_KEY_CODE = 13;
+
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Some text',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('{cmd}/')
+        .wait(selectionChangeDebounceTimeout)
+        .keydown(ENTER_KEY_CODE);
+
+      /**
+       * Block should have same text
+       */
+      cy.get('[data-cy="block-wrapper"')
+        .should('have.text', 'Some text');
+    });
+
+    it('should not unselect currently selected block when Enter pressed on a block tune', function () {
+      const ENTER_KEY_CODE = 13;
+
+      cy.createEditor({
+        data: {
+          blocks: [
+            {
+              type: 'paragraph',
+              data: {
+                text: 'Some text',
+              },
+            },
+          ],
+        },
+      });
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .click()
+        .type('{cmd}/')
+        .wait(selectionChangeDebounceTimeout)
+        .keydown(ENTER_KEY_CODE);
+
+      /**
+       * Block should not be selected
+       */
+      cy.get('[data-cy="block-wrapper"')
+        .first()
+        .should('have.class', 'ce-block--selected');
+    });
+  });
+});