Append input dialog to DOM for iOS Safari

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": {

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]);
     });