fix(input): mark ion-input touched on blur instead of changed (#12812)

fixes #12102

Author: kensodemann

src/components/checkbox/checkbox.ts

@@ -126,6 +126,7 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
     ev.preventDefault();
     ev.stopPropagation();
     this.value = !this.value;
+    this._fireTouched();
   }
 
   /**
@@ -141,5 +142,4 @@ export class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDes
   _inputUpdated() {
     this._item && this._item.setElementClass('item-checkbox-checked', this._value);
   }
-
 }

src/components/segment/segment.ts

@@ -90,7 +90,10 @@ export class Segment extends BaseInput<string> implements AfterContentInit {
   ngAfterContentInit() {
     this._initialize();
     this._buttons.forEach(button => {
-      button.ionSelect.subscribe((selectedButton: any) => this.value = selectedButton.value);
+      button.ionSelect.subscribe((selectedButton: any) => {
+        this.value = selectedButton.value;
+        this._fireTouched();
+      });
     });
   }
 
@@ -109,6 +112,4 @@ export class Segment extends BaseInput<string> implements AfterContentInit {
       button.isActive = (button.value === value);
     }
   }
-
-
 }

src/util/base-input.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, ElementRef, EventEmitter, Input, NgZone, Output, Rend
 import { ControlValueAccessor } from '@angular/forms';
 import { NgControl } from '@angular/forms';
 
-import { assert, deepCopy, isArray, isPresent, isString, isTrueProperty, isUndefined  } from './util';
+import { assert, deepCopy, isArray, isPresent, isString, isTrueProperty, isUndefined } from './util';
 import { IonicFormInput } from './form';
 import { Ion } from '../components/ion';
 import { Config } from '../config/config';
@@ -228,9 +228,17 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
 
     this._form && this._form.unsetAsFocused(this);
     this._setFocus(false);
+    this._fireTouched();
     this.ionBlur.emit(this);
   }
 
+  /**
+   * @hidden
+   */
+  _fireTouched() {
+    this._onTouched && this._onTouched();
+  }
+
   /**
    * @hidden
    */
@@ -253,7 +261,6 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
    */
   private onChange() {
     this._onChanged && this._onChanged(this._inputNgModelEvent());
-    this._onTouched && this._onTouched();
   }
 
   /**

src/util/input-tester.ts

@@ -107,6 +107,7 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
   if (isInit) {
     let blurCount = 0;
     let focusCount = 0;
+    let onTouchedCalled = 0;
     const subBlur = input.ionBlur.subscribe((ev: any) => {
       assertEqual(ev, input, 'ionBlur argument is wrong');
       blurCount++;
@@ -121,6 +122,15 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
         assert(false, 'onFocusChange test failed');
       }
     });
+    input.registerOnTouched(() => {
+      assertEqual(onTouchedCalled, 0, 'registerOnTouched: internal error');
+      onTouchedCalled++;
+    });
+
+    input._fireBlur();
+    assertEqual(blurCount, 0, 'blur should not have been emitted');
+    assertEqual(onTouchedCalled, 0, 'touched should not have been called');
+
     input._fireFocus();
     assertEqual(input._isFocus, true, 'should be focus');
     assertEqual(input.isFocus(), true, 'should be focus');
@@ -129,6 +139,7 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
     input._fireBlur();
     assertEqual(input._isFocus, false, 'should be not focus');
     assertEqual(input.isFocus(), false, 'should be not focus');
+    assertEqual(onTouchedCalled, 1, 'touched should have been called');
     input._fireBlur(); // it should not crash
 
     assertEqual(focusCount, 1, 'ionFocus was not called correctly');
@@ -166,7 +177,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
     OnChangeCalled++;
   });
 
-  // Test registerOnChange
+  // Test registerOnTouched
   input.registerOnTouched(() => {
     assertEqual(OnTouchedCalled, 0, 'registerOnTouched: internal error');
 
@@ -187,7 +198,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
       assertEqual(ionChangeCalled, 0, 'loop: ionChange error');
     }
     assertEqual(OnChangeCalled, 1, 'loop: OnChangeCalled was not called');
-    assertEqual(OnTouchedCalled, 1, 'loop: OnTouchedCalled was not called');
+    assertEqual(OnTouchedCalled, 0, 'loop: OnTouchedCalled was called');
 
     OnTouchedCalled = OnChangeCalled = ionChangeCalled = 0;
 
@@ -212,7 +223,7 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
   input.value = null;
   assertEqual(input.value, config.defaultValue, 'null: wrong default value');
   assertEqual(OnChangeCalled, 1, 'null: OnChangeCalled was not called');
-  assertEqual(OnTouchedCalled, 1, 'null: OnTouchedCalled was not called');
+  assertEqual(OnTouchedCalled, 0, 'null: OnTouchedCalled was called');
 
 
   input.registerOnChange(null);