From b6674367a59f6325dbc01f0ef28b7a08a0085d2f Mon Sep 17 00:00:00 2001
From: Tatiana Fomina <fomina.tatianaaa@yandex.ru>
Date: Wed, 10 Jul 2024 23:13:37 +0300
Subject: [PATCH] Fix form submit on bold inline tool click (#2775)

---
 docs/CHANGELOG.md                             |  1 +
 .../popover-item-default.ts                   |  4 ++-
 .../cypress/tests/modules/InlineToolbar.cy.ts | 36 +++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 32cbd889..da491a03 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### 2.30.2
 
 - `Fix` – The onChange callback won't be fired when editor is initialized in the Read-Only mode
+- `Fix` – Prevent form submit on inline tool click
 
 ### 2.30.1
 
diff --git a/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts b/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts
index 1acd13f7..df50e73e 100644
--- a/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts
+++ b/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts
@@ -147,7 +147,9 @@ export class PopoverItemDefault extends PopoverItem {
    */
   private make(params: PopoverItemDefaultParams, renderParams?: PopoverItemRenderParamsMap[PopoverItemType.Default]): HTMLElement {
     const tag = renderParams?.wrapperTag || 'div';
-    const el = Dom.make(tag, css.container);
+    const el = Dom.make(tag, css.container, {
+      type: tag === 'button' ? 'button' : undefined,
+    });
 
     if (params.name) {
       el.dataset.itemName = params.name;
diff --git a/test/cypress/tests/modules/InlineToolbar.cy.ts b/test/cypress/tests/modules/InlineToolbar.cy.ts
index dfd5c396..bc8990bd 100644
--- a/test/cypress/tests/modules/InlineToolbar.cy.ts
+++ b/test/cypress/tests/modules/InlineToolbar.cy.ts
@@ -76,6 +76,42 @@ describe('Inline Toolbar', () => {
       });
   });
 
+  it('should not submit form nesting editor when inline tool clicked', () => {
+    cy.createEditor({
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: 'Some text',
+            },
+          },
+        ],
+      },
+    });
+
+    const onSubmit = cy.stub();
+
+    cy.document().then(doc => {
+      const form = doc.createElement('form');
+
+      form.onsubmit = onSubmit;
+      doc.body.appendChild(form);
+
+      /* Move editor to form */
+      form.appendChild(doc.getElementById('editorjs'));
+
+      cy.get('[data-cy=editorjs]')
+        .find('.ce-paragraph')
+        .selectText('Some text');
+
+      cy.get('[data-item-name=bold]')
+        .click();
+
+      expect(onSubmit).to.be.not.called;
+    });
+  });
+
   describe('Conversion toolbar', () => {
     it('should restore caret after converting of a block', () => {
       cy.createEditor({