Tiptap的bubble_menu点击菜单项时额外触发表单提交该如何解决

问题根因 #

HTML 中<button>元素未显式指定type属性时，默认值为submit，如果按钮处于<form>标签内部，点击时会自动触发表单提交逻辑，这就是你点击bubble menu菜单项触发额外提交的原因。

核心解决方案 #

给所有bubble menu内的菜单项按钮显式添加type="button"属性，修正后的代码示例如下：

<button type="button" onclick="editor.chain().focus().toggleBold().run()">
  加粗
</button>

其他可选处理方案 #

• 给点击事件增加阻止默认行为逻辑，修改对应onclick代码为：editor.chain().focus().toggleBold().run(); event.preventDefault();
• 如果你通过封装组件渲染bubble menu的所有菜单项，可以直接在组件层统一给按钮设置默认type="button"属性，避免后续新增菜单项重复出现该问题。

内容的提问来源于stack exchange，提问作者TaiwanGrapefruitTea