[Bug]: Popover.Button emits type="button" even when the component isn't a button

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.1.0

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/magical-bash-ij6dg

Describe your issue

Hello headlessui! 👋

This is a really minor issue, but I thought I’d do my due diligence and write it up.

Given this component:

<Popover.Button as="a" href="#">Click Me</Popover.Button>

The emitted HTML is:

<a href="#" type="button">

However, type="button" is not an applicable property for an anchor tag. Ordinarily the extra prop is harmless, but under a perfect storm of unlikely circumstances, it can make a difference. For example, normalize.css uses it as a CSS selector:

[type="button"] {
  -webkit-appearance: button;
}

So this can cause the link to be styled like a button, for instance, in an older version of Chrome (v78). If you try to override the property by adding type={null} or something to the component, your prop is ignored.

This is a really minor issue so I won’t be offended if you think the best course is to just close it and move on, but I think that it would be better if Popover.Button only emitted type="button" when the component tag is the default as="button".

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@dev or yarn add @headlessui/react@dev.
• npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

[arpitjacob]

Have the same issue with

<Disclosure.Button as="div">

it still renders

type="button"

which throws off the css styling