Button: the disabled attribute doesn't apply to the button element

[connorwyatt]

Steps

Create a Button component with disabled set to true.

Expected Result

The button should be disabled.

Actual Result

The button only has styles to make it appear disabled, but it still functions if you tab to it due to a missing disabled attribute on the button element.

Version

0.68.3

Testcase

https://codepen.io/anon/pen/OgbeXr

[layershifter]

As I see, disabled button doesn't receive focus due negative tabIndex, however HTML's button tag can have a disabled attr. I think, that we need to pass disabled prop if an element is button:

<Button disabled />
<Button as='div' disabled />

<button class="ui disabled button" disabled></button>
<div class="ui disabled button"></div>

[connorwyatt]

Yes exactly, however the tab index isn't applied when you use it inside a FormButton. Maybe that is a separate issue, but in this case it means that inside a form it allows submission when the button is disabled by tabbing.

[connorwyatt]

A further issue is that the disabled prop is stripped from the props as it is a handled prop of Button. How do you handle these cases when there is a prop that is both handled, but should also be passed through?

[layershifter]

I think we can do there something like this:

const disabledButton = disabled && ElementType === 'button'

<ElementType {...rest} className={classes} disabled={disabledButton} onClick={this.handleClick} ref={this.handleRef} tabIndex={tabIndex}>
// ...
</ElementType>

However, it's quite ugly solution because Button's render has already too many conditions. Open for better ideas.

[connorwyatt]

It seems quite bad to treat the button different to other semantic components. Elsewhere this is handled by splitting the props to get the unhandled props and then spreading them onto the child component. I think the solution should take that into account.

[connorwyatt]

Thanks a lot for fixing, much appreciated