fix(star-select): trigger change event on focus (#394)

Author: saiponnada

.changeset/free-boats-arrive.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+fix(star-select): trigger change event on focus

packages/ebayui-core/src/components/ebay-star-rating-select/component.ts

@@ -34,14 +34,24 @@ class StarRating extends Marko.Component<Input, State> {
         }
         this.state.value = value;
     }
+    handleClick(
+        value: number,
+        originalEvent: PointerEvent,
+        el: HTMLInputElement,
+    ) {
+        if (!el.disabled) {
+            this.state.value = value;
+        }
+        this.emitEvent("change", value, originalEvent, el);
+    }
+
     emitEvent<T extends Event>(
         name: string,
         value: number,
         originalEvent: T,
         el: HTMLInputElement,
     ) {
         if (!el.disabled) {
-            this.state.value = value;
             this.emit(name, {
                 originalEvent,
                 value: value,

packages/ebayui-core/src/components/ebay-star-rating-select/index.marko

@@ -27,7 +27,7 @@ $ const {
                 value=i
                 disabled=disabled
                 checked=state.value === i
-                onClick("emitEvent", "change", i)
+                onClick("handleClick", i)
                 onFocus("emitEvent", "focus", i)
                 onKeydown("emitEvent", "keydown", i)
             >

packages/ebayui-core/src/components/ebay-star-rating-select/test/test.browser.js

@@ -73,6 +73,16 @@ describe("when native focus event is fired on star", () => {
         expect(eventArg).has.property("originalEvent").is.an.instanceOf(Event);
         expect(eventArg.value).to.equal(2);
     });
+
+    it("then it does not select the star", () => {
+        const starInput = component.getByLabelText("2 stars");
+        expect(starInput.checked).to.equal(false);
+    });
+
+    it("then it does not emit change event", () => {
+        const changeEvents = component.emitted("change");
+        expect(changeEvents).has.length(0);
+    });
 });
 
 describe("when native keyboard event is fired on star", () => {