Prevent form submission for WidgetTooltip

Author: valentinogagliardi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.3.1] 2023-05-03
+
+## Fixed
+
+- prevent form submission when `WidgetTooltip` is used inside a form
+
 ## [5.3.0] 2023-04-26
 
 ## Added

cypress/component/WidgetTooltip.cy.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
+
+import { WidgetTooltip } from '../../src'
+
+describe('<WidgetTooltip/>', () => {
+  it('should not submit the parent form', () => {
+    const stubbedHandleSubmit = cy.stub().as('stubbedHandleSubmit')
+
+    cy.mount(
+      <form
+        onSubmit={ev => {
+          ev.preventDefault()
+          stubbedHandleSubmit()
+        }}
+      >
+        <TooltipProvider>
+          <WidgetTooltip helpText='the help text' triggerAriaLabel='get help' />
+        </TooltipProvider>
+      </form>
+    )
+
+    cy.findByLabelText('get help').click()
+
+    cy.get('@stubbedHandleSubmit').should('not.have.been.called')
+  })
+})

src/common/WidgetTooltip.tsx

@@ -17,7 +17,7 @@ const WidgetTooltip = ({ helpText, triggerAriaLabel }: Props) => {
       triggerProps={{
         asChild: true,
         child: () => (
-          <Trigger aria-label={triggerAriaLabel}>
+          <Trigger aria-label={triggerAriaLabel} type='button'>
             <StyledQuestionMarkCircledIcon
               focusable={false}
               aria-hidden={true}