From 62308f01e8d51bb6d0d81db5ee4396b2916f0f3b Mon Sep 17 00:00:00 2001
From: Thomas Steiner <tomac@google.com>
Date: Mon, 20 Jun 2022 13:46:15 +0200
Subject: [PATCH] Append input dialog to DOM for iOS Safari

---
 package-lock.json        | 32 ++++++++++++++++----------------
 package.json             |  6 +++---
 src/legacy/file-open.mjs | 11 +++++++----
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dfb53d5..1e81129 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
   "name": "browser-fs-access",
-  "version": "0.29.6",
+  "version": "0.30.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "browser-fs-access",
-      "version": "0.29.6",
+      "version": "0.30.0",
       "license": "Apache-2.0",
       "devDependencies": {
-        "eslint": "^8.16.0",
+        "eslint": "^8.18.0",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^8.5.0",
         "http-server": "^14.1.1",
         "microbundle": "^0.15.0",
-        "prettier": "^2.6.2",
+        "prettier": "^2.7.1",
         "shx": "^0.3.4"
       }
     },
@@ -3067,9 +3067,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz",
-      "integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
+      "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.0",
@@ -5507,9 +5507,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -8806,9 +8806,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz",
-      "integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.18.0.tgz",
+      "integrity": "sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.3.0",
@@ -10542,9 +10542,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
     "pretty-bytes": {
diff --git a/package.json b/package.json
index c966cff..d9970be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "browser-fs-access",
-  "version": "0.29.6",
+  "version": "0.30.0",
   "description": "File System Access API with legacy fallback in the browser.",
   "type": "module",
   "source": "./src/index.js",
@@ -49,12 +49,12 @@
   },
   "homepage": "https://github.com/GoogleChromeLabs/browser-fs-access#readme",
   "devDependencies": {
-    "eslint": "^8.16.0",
+    "eslint": "^8.18.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.5.0",
     "http-server": "^14.1.1",
     "microbundle": "^0.15.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "shx": "^0.3.4"
   },
   "eslintConfig": {
diff --git a/src/legacy/file-open.mjs b/src/legacy/file-open.mjs
index 5597932..5fe8223 100644
--- a/src/legacy/file-open.mjs
+++ b/src/legacy/file-open.mjs
@@ -33,8 +33,10 @@ export default async (options = [{}]) => {
     input.multiple = options[0].multiple || false;
     // Empty string allows everything.
     input.accept = accept || '';
+    // Append to the DOM, else Safari on iOS won't fire the `change` event
+    // reliably.
     input.style.display = 'none';
-    document.body.appendChild(input);
+    document.body.append(input);
     const _reject = () => cleanupListenersAndMaybeReject(reject);
     const _resolve = (value) => {
       if (typeof cleanupListenersAndMaybeReject === 'function') {
@@ -50,15 +52,16 @@ export default async (options = [{}]) => {
 
     const cancelDetector = () => {
       window.removeEventListener('focus', cancelDetector);
-      document.body.removeChild(input);
+      input.remove();
     };
 
     input.addEventListener('click', () => {
-      window.addEventListener('focus', cancelDetector, true);
+      window.addEventListener('focus', cancelDetector);
     });
 
     input.addEventListener('change', () => {
-      document.body.removeChild(input);
+      window.removeEventListener('focus', cancelDetector);
+      input.remove();
       _resolve(input.multiple ? Array.from(input.files) : input.files[0]);
     });