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

[mhartington]

Don't query for hidden inputs when using HMR

[alan-agius4]

I'd love to understand better what is happening. I tried to take a look at the reproduction https://github.com/mhartington/hrm-ionic-test but it's empty.

[alan-agius4]

Approved by mistake.

[mhartington]

@alan-agius4 pushed the code to hmr-ionic-test

Basically what's happening is that you have the following DOM structure

Where ionic components like Range and Checkbox will render a hidden input within the component. So at the time HMR grabs a snapshot of the outgoing DOM structure, it will grab those hidden inputs. which do nothing and are not something users can directly interact with

So as HMR grabs the snapshot, it could count 1 actual input, and one hidden input. But the hidden input within Ionic's process might not be available right away when the changes are applied, meaning there will be a mismatch in the number of inputs.

When hmr-accepts attempts to restore the values, with different input lengths it will noop out of the whole thing. Which in most cases, makes sense. But in this case, since the inputs are purposefully hidden and are not something that users can interact with, it's safe to ignore them.

You can see the dom changes yourself by setting a break point at restoreFormValues and inspecting the DOM

[alan-agius4]

@mhartington, thanks for the detailed explanation and the PR. The change LGTM.

Can you please squash the commits to make CI green?

Thanks

[mhartington]

Done!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}