fix(@angular-devkit/build-angular): ignore hidden inputs with hmr

Closes #19385 Don't query for hidden inputs when using HMR (cherry picked from commit 0f72ca4)
angular · Nov 16, 2020 · 467af26 · 467af26
1 parent 115a878
commit 467af26
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -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++) {