bug #323 [Live] Do not re-render <input file> if input holds unuploaded files (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Live] Do not re-render <input file> if input holds unuploaded files

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | Related to #299
| License       | MIT

On #299, we're working on proper file upload support for live components. BUT, I think one thing is for sure: if you simply select a file and then (later) the component re-renders for some reason, we do NOT want to "replace" the `<input file` that has the attached file with an empty `<input file`.

I've tested locally - testing proved troublesome, due to some differences in how the `.value` attribute seems to work on browser vs the testing environment.

Cheers!

Commits
-------

28b29e9 dropping 7.2 from CI: it is no longer supported by CI tools
2ded2f2 do not re-render <input file> if input holds unuploaded files

Author: weaverryan

.github/workflows/test-turbo.yml

@@ -33,7 +33,7 @@ jobs:
         runs-on: ubuntu-latest
         strategy:
             matrix:
-                php-versions: ['7.2', '7.3', '7.4', '8.0']
+                php-versions: ['7.3', '7.4', '8.0']
             fail-fast: false
         name: PHP ${{ matrix.php-versions }} Test on ubuntu-latest
 

src/LiveComponent/assets/src/normalize_attributes_for_comparison.ts

@@ -6,10 +6,18 @@
  * if two nodes are identical.
  */
 export function normalizeAttributesForComparison(element: HTMLElement): void {
-    if (element.value) {
-        element.setAttribute('value', element.value);
-    } else if (element.hasAttribute('value')) {
-        element.setAttribute('value', '');
+    const isFileInput = element instanceof HTMLInputElement && element.type === 'file';
+
+    // don't add value attribute to file inputs
+    // if a file is selected, but then a re-render happens before it is
+    // uploaded, we do NOT want to add a value="" attribute because
+    // this would cause the input to re-render (without the attached file)
+    if (!isFileInput) {
+        if (element.value) {
+            element.setAttribute('value', element.value);
+        } else if (element.hasAttribute('value')) {
+            element.setAttribute('value', '');
+        }
     }
 
     Array.from(element.children).forEach((child: HTMLElement) => {