SlButton does not re-render the disabled attribute correctly
- Dominant language
- JavaScript
- Stars
- 34
- Forks
- 71
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 31
Description
When dynamically setting a button's `disabled` property, there's a visual bug where the inner button still appear disabled.
Example:
```javascript
{ this._disableButton = !this._disableButton; }}>Toggle disabled
Button test disabled=${this._disableButton}
```
Suggested fix:
```javascript
class SlButton extends LitElement {
...
get _attrs() {
return this.getAttributeNames().reduce((acc, name) => {
if ((name === 'class' || name === 'label' || name === 'disabled')) return acc;
acc[name] = this.getAttribute(name);
return acc;
}, {});
}
render() {
return html`
`;
}
}
```
Contributor guide
Research direction
Locate the SlButton implementation and start by reproducing the dynamic disabled-property example from the issue. Compare the host attribute with the inner button state; done means toggling the property updates the inner button's disabled state correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100