fix(number-field): stepUp/stepDown not fire input event (#925)

Refinitiv · Sep 1, 2023 · cb2b994 · cb2b994
1 parent 14f4b70
commit cb2b994
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/packages/elements/src/number-field/__demo__/index.html b/packages/elements/src/number-field/__demo__/index.html
@@ -12,6 +12,7 @@
       }
     </style>
   </head>
+
   <body>
     <script type="module">
       import '@refinitiv-ui/elements/number-field';
@@ -138,6 +139,19 @@
       </script>
     </demo-block>
 
+    <demo-block layout="normal" header="Input event" tags="event">
+      <ef-number-field id="input" placeholder="Input event"></ef-number-field>
+      <p>Value: <code id="input-text"></code></p>
+      <script>
+        var element = document.getElementById('input');
+        var inputText = document.getElementById('input-text');
+
+        element.addEventListener('input', function (e) {
+          inputText.innerHTML = e.target.value;
+        });
+      </script>
+    </demo-block>
+
     <demo-block layout="normal" header="Error change event" tags="event">
       <ef-number-field id="error-changed" min="0" max="10" placeholder="Error change event"></ef-number-field>
       <p>Error: <code id="error"></code></p>

diff --git a/packages/elements/src/number-field/__test__/number-field.test.js b/packages/elements/src/number-field/__test__/number-field.test.js
@@ -136,6 +136,34 @@ describe('number-field/NumberField', function () {
 
       expect(el.value).to.equal('100');
     });
+    it("Should fire input event when step up/down value by user's interactions", async function () {
+      const spinnerUp = el.shadowRoot.querySelector('[part=spinner-up]');
+      const spinnerDown = el.shadowRoot.querySelector('[part=spinner-down]');
+
+      let eventFiredCounter = 0;
+      el.addEventListener('input', () => {
+        eventFiredCounter += 1;
+      });
+
+      setTimeout(() => spinnerUp.click());
+      await oneEvent(el, 'input');
+      expect(eventFiredCounter).to.equal(1);
+
+      setTimeout(() => spinnerDown.click());
+      await oneEvent(el, 'input');
+      expect(eventFiredCounter).to.equal(2);
+    });
+    it('Should not fire input event when programmatically step up/down value', async function () {
+      let eventFired = false;
+      el.addEventListener('input', () => {
+        eventFired = true;
+      });
+
+      el.stepUp();
+      el.stepDown();
+      await elementUpdated(el);
+      expect(eventFired).to.be.false;
+    });
     it("Should fire event when value changes by user's interactions", async function () {
       const input = el.shadowRoot.querySelector('input');
       input.value = '3';

diff --git a/packages/elements/src/number-field/index.ts b/packages/elements/src/number-field/index.ts
@@ -334,6 +334,7 @@ export class NumberField extends FormFieldElement {
   protected onApplyStep(direction: Direction): void {
     try {
       this.applyStepDirection(direction);
+      this.dispatchEvent(new InputEvent('input'));
       this.setSilentlyValueAndNotify();
     } catch (error) {
       // According to specs stepDown/stepUp may fail for some invalid inputs

diff --git a/packages/elements/src/slider/index.ts b/packages/elements/src/slider/index.ts
@@ -1388,7 +1388,6 @@ export class Slider extends ControlElement {
         @blur=${this.onNumberFieldBlur}
         @keydown=${this.onNumberFieldKeyDown}
         @input=${this.onNumberFieldInput}
-        @value-changed=${this.onNumberFieldInput}
         part="input"
         name="${name}"
         no-spinner