[Bug]: Interactive tags don't have "type" attribute

[janhassel]

Package

@carbon/react

Browser

No response

Package version

1.61.0

React version

No response

Description

Currently, there are two ways to create interactive tags:

• Using the new OperationalTag
• Passing an onClick to a regular Tag (I assume this behavior will be deprecated at one point in favor for the first option; but that's not related to this issue).

In either case, the base element will be set to <button>. Unfortunately the type attribute is not set and cannot be overwritten by the developer as type is the prop to define the Tag's color.

This causes a problem when an interactive tag is used inside a <form> as all buttons inside forms implicitly have type="submit". This means, clicking on an interactive tag would submit the form (initiating a GET request to the current page if not specified otherwise).

The real-world scenario of this came up by using C4IP's TagSet component inside C4IP's CreateTearsheet because every CreateTearsheetStep is a form. This breaks our user flow and we currently see no way to fix this on our side.

Reproduction/example

https://stackblitz.com/edit/github-p7arbq?file=src%2FApp.jsx

Steps to reproduce

<form>
  <Popover>
    <Tag onClick={() => {}}>Trigger</Tag>
    <PopoverContent>Content</PopoverContent>
  </Popover>
</form>

1. Click on the "Trigger" tag
2. The page reloads

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

watsonx

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems