adobe / adobe/da-live

SlButton does not re-render the disabled attribute correctly

Open
#494 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.