fixes #1220

docs/resources/changelog.md

@@ -9,6 +9,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added `tag__base`, `tag__content`, `tag__remove-button`, `tag__remove-button__base` parts to `<sl-select>`
+- Fixed a bug in `<sl-rating>` that allowed the `sl-change` event to be emitted when disabled [#1220](https://github.com/shoelace-style/shoelace/issues/1220)
 
 ## 2.2.0
 

src/components/rating/rating.test.ts

@@ -79,6 +79,20 @@ describe('<sl-rating>', () => {
     expect(el.value).to.equal(1);
   });
 
+  it('should not emit sl-change when disabled', async () => {
+    const el = await fixture<SlRating>(html` <sl-rating value="5" disabled></sl-rating> `);
+    const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.rating__symbol:last-child')!;
+    const changeHandler = sinon.spy();
+
+    el.addEventListener('sl-change', changeHandler);
+
+    await clickOnElement(lastSymbol);
+    await el.updateComplete;
+
+    expect(changeHandler).to.not.have.been.called;
+    expect(el.value).to.equal(5);
+  });
+
   it('should not emit sl-change when the value is changed programmatically', async () => {
     const el = await fixture<SlRating>(html` <sl-rating label="Test" value="1"></sl-rating> `);
     el.addEventListener('sl-change', () => expect.fail('sl-change incorrectly emitted'));

src/components/rating/rating.ts

@@ -89,6 +89,10 @@ export default class SlRating extends ShoelaceElement {
   }
 
   private handleClick(event: MouseEvent) {
+    if (this.disabled) {
+      return;
+    }
+
     this.setValue(this.getValueFromMousePosition(event));
     this.emit('sl-change');
   }