disabled prop does not work for Button and Radio despite the type allowing it

[grzmot22]

Description

The type for Button and Radio allows both the disabled and isDisabled props, but only isDisabled works. disabled will be silently ignored with no warning whatsoever.

Please fix this by either changing the type so disabled is no longer a prop of Button, Radio or making it so that disabled works.

Link to Reproduction

https://codesandbox.io/s/intelligent-jang-wu06rc

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Chakra UI Version

2.4.9

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[GKosheev]

This change occurred 6 days ago ("refactor: button disabled prop"):

<chakra.button
- disabled={isDisabled || isLoading}
  ref={useMergeRefs(ref, _ref)}
  as={as}
  type={type ?? defaultType}
  data-active={dataAttr(isActive)}
  data-loading={dataAttr(isLoading)}
  __css={buttonStyles}
  className={cx("chakra-button", className)}
  {...rest}
+  disabled={isDisabled || isLoading}
>

I can't make any comments on this change, but I know that before this change, you could use both disabled and isDisabled, which would lead to uncertain behavior. For example, if you use isDisabled or isLoading, you can expect the button to be disabled, but you can override that behavior by setting disabled to false:

<Button isLoading disabled={false}>
  Button
</Button>

[ZiggStardust]

i have the same issue

[samuliasmala]

I'd be happy to create a PR but first I'd need a comment from maintainers whether I should update the functionality (i.e. make disabled prop to work again) or the typing.

[grzmot22]

I noticed was disabled prop was changed in many components :/

[aoloo]

I noticed this issue as well. It seems the disabled attribute is not being applied to the button

[Trisco]

+1

[RobinClowers]

Yeah, this is a breaking change that was called a "refactor" #7233

[RobinClowers]

This is the actual commit: 0f37665

[RobinClowers]

Here is the original issue that prompted the change: #7243

[grzmot22]

@RobinClowers Great you found the original issue, but I think it needs to be better handled not to confuse people. Shouldn't be two props that are doing the same thing. I'm curious why were two and disabled is more common than isDisabled. I could do PR, but I don't know the idea behind having another prop, so it is better to leave it for the creators of Chakra ui.

[jrolfs]

The disabled prop was passed directly to the <button /> element without updating the styles to the disabled state specified in the theme. We're using this to disable the button while in a loading state that's not covered by isLoading, so that's a use case for having them separate. I'm not saying it's a case that needs to be supported, but for us, this was a breaking change.

[samuliasmala]

According to this comment it's the typings which should be updated, but @segunadebayo can you confirm it?

[jrolfs]

but for us, this was a breaking change.

Is this not a concern? I get that the surface area for breaking changes in a component library like this is massive and difficult to pin down, but since this was included in the types, I feel it's reasonable to consider this a breaking change.

Edit: sorry, I just now peeked at #7243 — I imagine enforcing consistency there is more important than breaking our less standard use case 😑.

[anilanar]

Not sure what % of users will be hit by this, but my feeling is that this issue is urgent and will blow up further when more users try to upgrade and notice (or not notice) that disabled doesn't work anymore. @anubra266

[sleekLancelot]

Presently, the only ways to disable a button is with an "isLoading" or "isDisabled" prop.
See Segun's comment here: #7243 (comment)

[ckpearson]

Just got caught out by this. The type supporting the disabled prop as well as isDisabled is a little confusing. Might be a good idea to signpost this in the docs.

[JulioC]

@segunadebayo I believe this is not only related to TypeScript, as it's a breaking change from previous behavior.

[grzmot22]

@segunadebayo I agree with @JulioC, even though I would like to make PR, I don't know what was intended to be not using the typical flag disabled and having it both. What was origin of using isDisabled in the first place? I think this is a global issue across all components in Chakra UI.

[JulioC]

For reference, this is the commit which changed this behavior: 0f37665

The original issue motivating the change: #7243

---

I believe either solutions are acceptable (I prefer the first one):

• Change the affected line in button.tsx to be disabled={props.disabled || isDisabled || isLoading} (this revert the original behavior and fixes the original issue)
• Omit 'disabled' from the type for ButtonProps (this would be a breaking change)

[peppemig]

Yeah 'disabled' is not working for me right now, only 'isDisabled' prop is working

[ClaudioBzrr]

i had the same issue with "Disabled" prop, but with "isDisabled" prop worked fine

[decaf-dev]

I think it makes sense both ways. Since isDisabled includes the is prefix, you know for sure that the property accepts a boolean value. disable on the other-hand is more ambiguous, however it comes from HTM syntax where in order to disable a button you would use just "disable". e.g. <button disable/>. Most people are familiar with the HTML syntax so it wasn't very confusing.

[barrymichaeldoyle]

Is there any plan to fix this or at least get rid of disabled being a valid TS option? The state that it is in now is not great.

[SanariSan]

Got confused about why disabled not working, button docs page says nothing about isDisabled prop existence, but mentions disabled keyword for custom Box button. Thanks to this issue I now see the solution, but that's something to be fixed or mentioned in the docs at least.

p.s.
@chakra-ui/react@^2.5.5
@chakra-ui/theme@^3.0.1

[Laki997]

For me it still does not work even with isDisabled=true

[lakardion]

I updated chakra recently to latest and all my integration tests that were expecting disabled buttons started failing :|. Found out I had to use isDisabled instead?
Luckily we had a wrapper on every chakra button so I can do a hack there so disabled prop gets passed to isDisabled instead

[gustavolzangelo]

It's just working with isDisabled here.

[Umeshunp]

For me also same issue , tried both disabled and isDisabled both didn't work. I am using the below version.

 "@chakra-ui/react": "^2.7.0",
 "@emotion/react": "^11.11.0",
 "@emotion/styled": "^11.11.0",

[BANOnotIT]

Why changing public API is in fix?.. This is a BREAKING change btw

[servettonga]

isDisabled works but it's still not mentioned on the documentation

[anilanar]

@servettonga Look at Props.

[servettonga]

@servettonga Look at Props.

Thanks, I didn't notice that

[tolkee]

It means that Chakra desactivated disabled props ?

That's kind of dangerous as all my company code was using disabled on their buttons, but in one day, button were not disabled anymore. (solution was to migrate to isDisabled, but still)

[david-induro]

I think I've stumbled on to why it's not caught by the linter. I believe that the linter/typescript is conflating the Chakra UI props with the React.Button (really any input, though). This looks like it's by design, since each Chakra component extends React.ComponentProps<"input">. Unfortunately, that allows any prop that would be allowed for the raw html element (which includes disabled). These unusable props should probably be omitted by the ComponentWithAs type, since they are ignored.

[Philzen]

This is not only a breaking change, it also makes working around the accessibility problem described in #7965 impossible.

@segunadebayo what is the status on this – any possibility to revert 0f37665 or can you kindly advise how the issues raised in this thread can be worked around?

[BANOnotIT]

@Philzen I made a PR #7907 to solve disabled prop problem in Button

[samiulalimseam]

thanks

[ShawnFumo]

Didn't realize there was so much discussion on this particular page (already commented in two other spots). Can we please do something for this? Maybe the assumption now is everyone updated already, but we were behind on Chakra and got hit with this recently, ending up causing a big mess of things like duplicate transactions in production from double-clicks on submission buttons that no longer disabled on the first click (@lakardion smart to check disabled state in your automated tests.. we will from now on). If it isn't going to be reverted, let's do what @grzmot22 's issue suggests and just remove disabled from the typescript type. At least then we would have had a compilation error when doing the update and realized immediately the change.

And I think @jrolfs could still work around this for their use-case by using ref to add the disabled property directly in the dom.

[Philzen]

If it isn't going to be reverted, let's do what @grzmot22 's issue suggests and just remove disabled from the typescript type.

If that is done, it will manifest the current situation – which means the workaround for is no longer possible #7965 (we need to ensure isLoading={true} does not make the button lose focus). The "fix" for #7243 was well intended, but broke a lot of things, which is a violation of semver and hence must be rolled back IMHO.

[sbeben]

I'm in love with chakra but this button styling mess and now this makes it so painful to use

[Philzen]

@grzmot22 #8462 has been merged, disabled prop on button works again, you can test that out in the LiveCoding-view here: https://chakra-ui-website-ptekgabqh-chakra-ui.vercel.app/docs/components/button/usage

Kindly also check if the prop works as desired on Radio as well – in my tests it seems to work again (at least visually).

If satisfied, kindly close this issue, the fix should be shipping with Chakra 2.8.3.