Bug: Unable to set value of ButtonHTMLAttributes to object type

[marcusjwhelan]

React version: Type definitions for React 18.0

Steps To Reproduce

1. Attempt to set the value to button as anything that is not (string | ReadOnlyArray | number | undefined)

Link to code example:

Link to example in code sandbox

The current behavior

Error Message from TS

Type '{ name: string; sortOrder: number; }' is not assignable to type 'string | number | string[]'.
  Object literal may only specify known properties, and 'name' does not exist in type 'string[]'.ts(2322)
index.d.ts(1788, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'

The expected behavior

Don't give me an error for this, there are no type constraints on the value for a button.

This is causing an issue with library Material-ui (Mui.com) which uses the interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> which says the value can only be of type string | ReadonlyArray<string> | number | undefined. They use it on their MenuItem component which is used within the Select component which disallows the use of assigning an object to the MenuItem. I can @ts-ignore this or set the object to as any and bypass the TS issue and the HTML works.

To me if you can use @ts-ignore or as any to get around a TS error there is an issue with the types applied to the attributes for the HMLT element.

Please let me know if this is correct to post here or should Mui.com be responsible to not type the MenuItem as an extension of this interface which ultimately is preventing me from assigning the object to the value.

[eps1lon]

The value is passed to the native <button /> HTML element and does not allow an object. It would end up as '[object Object]' in the rendered output and event handlers using event.currentTarget.value.

[marcusjwhelan]

I see then it is an issue with mui.com types trying to use buttons types because thiers works and using a straight button doesn't allow an object.