From e7a8ea6da258f989cd29b2f51f8207d7b9821ed7 Mon Sep 17 00:00:00 2001
From: Mike Hartington <mikehartington@gmail.com>
Date: Fri, 13 Nov 2020 17:48:11 -0500
Subject: [PATCH] fix(@angular-devkit/build-angular): ignore hidden inputs with
 hmr Closes #19385 Don't query for hidden inputs when using HMR

---
 .../build_angular/src/dev-server/hmr_spec.ts              | 8 ++++----
 .../build_angular/src/webpack/plugins/hmr/hmr-accept.ts   | 7 ++++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/dev-server/hmr_spec.ts b/packages/angular_devkit/build_angular/src/dev-server/hmr_spec.ts
index dde03b3d962e..90fdb568f476 100644
--- a/packages/angular_devkit/build_angular/src/dev-server/hmr_spec.ts
+++ b/packages/angular_devkit/build_angular/src/dev-server/hmr_spec.ts
@@ -56,8 +56,8 @@ describe('Dev Server Builder HMR', () => {
       'src/app/app.component.html': `
         <p>{{title}}</p>
 
-        <input type="text">
-
+        <input class="visible" type="text">
+        <input type="hidden">
         <select>
           <option>one</option>
           <option>two</option>
@@ -165,7 +165,7 @@ describe('Dev Server Builder HMR', () => {
               await page.goto(url);
               expect(logs).toContain('[HMR] Waiting for update signal from WDS...');
               await page.evaluate(() => {
-                document.querySelector('input').value = 'input value';
+                document.querySelector('input.visible').value = 'input value';
                 document.querySelector('select').value = 'two';
               });
 
@@ -177,7 +177,7 @@ describe('Dev Server Builder HMR', () => {
               expect(logs).toContain('[NG HMR] Restoring input/textarea values.');
               expect(logs).toContain('[NG HMR] Restoring selected options.');
 
-              const inputValue = await page.evaluate(() => document.querySelector('input').value);
+              const inputValue = await page.evaluate(() => document.querySelector('input.visible').value);
               expect(inputValue).toBe('input value');
 
               const selectValue = await page.evaluate(() => document.querySelector('select').value);
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts
index 6288fdf6399b..9adfa4cad98c 100644
--- a/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts
@@ -52,7 +52,8 @@ export default function (mod: any): void {
       return;
     }
 
-    const oldInputs = document.querySelectorAll('input, textarea');
+    // Inputs that are hidden should be ignored
+    const oldInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
     const oldOptions = document.querySelectorAll('option');
 
     // Create new application
@@ -160,8 +161,8 @@ function dispatchEvents(element: any): void {
 }
 
 function restoreFormValues(oldInputs: any[], oldOptions: any[]): void {
-  // Restore input
-  const newInputs = document.querySelectorAll('input, textarea');
+  // Restore input that are not hidden
+  const newInputs = document.querySelectorAll('input:not([type="hidden"]), textarea');
   if (newInputs.length && newInputs.length === oldInputs.length) {
     console.log('[NG HMR] Restoring input/textarea values.');
     for (let index = 0; index < newInputs.length; index++) {