From 53179c475cdf0dd5f1cfda0eef7cf724f9b4722b Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Wed, 17 Jul 2019 17:46:22 +0200
Subject: [PATCH] fix(inputs): apply ng form classes (#18820)

---
 angular/src/app-initialize.ts                  |  7 ++-----
 .../control-value-accessors/value-accessor.ts  | 18 +++++++++++-------
 angular/src/util/util.ts                       |  5 +++++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/angular/src/app-initialize.ts b/angular/src/app-initialize.ts
index 65cdadf37b..8df7b9ddf9 100644
--- a/angular/src/app-initialize.ts
+++ b/angular/src/app-initialize.ts
@@ -3,6 +3,7 @@ import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
+import { raf } from './util/util';
 
 export function appInitialize(config: Config, doc: Document, zone: NgZone) {
   return (): any => {
@@ -23,12 +24,8 @@ export function appInitialize(config: Config, doc: Document, zone: NgZone) {
         return defineCustomElements(win, {
           exclude: ['ion-tabs', 'ion-tab'],
           syncQueue: true,
+          raf,
           jmp: (h: any) => zone.runOutsideAngular(h),
-          raf: h => {
-            return zone.runOutsideAngular(() => {
-              return (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h);
-            });
-          },
           ael(elm, eventName, cb, opts) {
             (elm as any)[aelFn](eventName, cb, opts);
           },
diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts
index 9ce45ecf51..4bb10db791 100644
--- a/angular/src/directives/control-value-accessors/value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -1,6 +1,8 @@
 import { ElementRef, HostListener } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
+import { raf } from '../../util/util';
+
 export class ValueAccessor implements ControlValueAccessor {
 
   private onChange: (value: any) => void = () => {/**/};
@@ -42,14 +44,16 @@ export class ValueAccessor implements ControlValueAccessor {
 }
 
 export function setIonicClasses(element: ElementRef) {
-  const input = element.nativeElement as HTMLElement;
-  const classes = getClasses(input);
-  setClasses(input, classes);
+  raf(() => {
+    const input = element.nativeElement as HTMLElement;
+    const classes = getClasses(input);
+    setClasses(input, classes);
 
-  const item = input.closest('ion-item');
-  if (item) {
-    setClasses(item, classes);
-  }
+    const item = input.closest('ion-item');
+    if (item) {
+      setClasses(item, classes);
+    }
+  });
 }
 
 function getClasses(element: HTMLElement) {
diff --git a/angular/src/util/util.ts b/angular/src/util/util.ts
index ee2026ab72..3c6329fb24 100644
--- a/angular/src/util/util.ts
+++ b/angular/src/util/util.ts
@@ -1,5 +1,10 @@
 import { HTMLStencilElement } from '../types/interfaces';
 
+export const raf = (h: any) => {
+  const win = window as any;
+  return (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h);
+};
+
 export function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
   const controller = ensureElementInBody(ctrlName, doc);
   return controller.componentOnReady()