Bug: Unable to set `value` of ButtonHTMLAttributes to object type

This issue has been tracked since 2022-09-22.

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 wrote this answer on 2022-09-22

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 wrote this answer on 2022-09-22

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.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-06
Star Count 195649
Watcher Count 6648
Fork Count 40524
Issue Count 1110

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date