Merge pull request #626 from openkraken/fix/input-change-event

fix: input change event

integration_tests/specs/dom/elements/input.ts

@@ -237,6 +237,28 @@ describe('Tags input', () => {
     });
   });
 
+  it('event change', (done) => {
+    const VALUE = 'Input 3';
+    const input1 = document.createElement('input');
+    const input2 = document.createElement('input');
+    input1.setAttribute('value', 'Input 1');
+    input2.setAttribute('value', 'Input 2');
+    document.body.appendChild(input1);
+    document.body.appendChild(input2);
+
+    input1.addEventListener('change', function handler(event) {
+      expect(input1.value).toEqual(VALUE);      
+      done();
+    });
+
+    input1.focus();
+
+    requestAnimationFrame(() => {
+      input1.setAttribute('value', VALUE);
+      input2.focus(); 
+    });
+  });
+
   it('support inputmode=text', (done) => {
     const VALUE = 'Hello';
     const input = <input inputmode="text" />;

kraken/lib/src/dom/elements/input.dart

@@ -336,7 +336,7 @@ class InputElement extends Element implements TextInputClient, TickerProvider {
       // Set focus that make it add keyboard listener
       _renderEditable!.hasFocus = true;
       activeTextInput();
-      dispatchEvent(Event('focus'));
+      dispatchEvent(Event(EVENT_FOCUS));
     }
   }
 
@@ -345,7 +345,9 @@ class InputElement extends Element implements TextInputClient, TickerProvider {
       // Set focus that make it remove keyboard listener
       _renderEditable!.hasFocus = false;
       deactiveTextInput();
-      dispatchEvent(Event('blur'));
+      dispatchEvent(Event(EVENT_BLUR));
+      // Trigger change event if value has changed.
+      _triggerChangeEvent();
     }
   }
 
@@ -446,7 +448,6 @@ class InputElement extends Element implements TextInputClient, TickerProvider {
   void performAction(TextInputAction action) {
     switch (action) {
       case TextInputAction.done:
-        _triggerChangeEvent();
         InputElement.clearFocus();
         break;
       case TextInputAction.none:

kraken/lib/src/dom/event.dart

@@ -31,6 +31,7 @@ const String EVENT_TRANSITION_CANCEL = 'transitioncancel';
 const String EVENT_TRANSITION_START = 'transitionstart';
 const String EVENT_TRANSITION_END = 'transitionend';
 const String EVENT_FOCUS = 'focus';
+const String EVENT_BLUR = 'blur';
 const String EVENT_LOAD = 'load';
 const String EVENT_DOM_CONTENT_LOADED = 'DOMContentLoaded';
 const String EVENT_UNLOAD = 'unload';