From 15f9daa58f2bf54893caafd3fceb239baaa3b8cc Mon Sep 17 00:00:00 2001 From: Filip Sauer Date: Thu, 14 Sep 2023 01:13:49 +0200 Subject: [PATCH] fix(file-upload): fix opening the system file picker multiple times on browsers other than Chrome --- .xstate/file-upload.js | 33 ++++++++------ .../file-upload/src/file-upload.machine.ts | 43 +++++++++---------- 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/.xstate/file-upload.js b/.xstate/file-upload.js index 66a8b8a2a3..8abfec690d 100644 --- a/.xstate/file-upload.js +++ b/.xstate/file-upload.js @@ -13,6 +13,7 @@ const fetchMachine = createMachine({ id: "fileupload", initial: "idle", context: { + "!isWithinRange": false, "!isWithinRange": false }, on: { @@ -31,8 +32,12 @@ const fetchMachine = createMachine({ states: { idle: { on: { - OPEN: "open", - "DROPZONE.CLICK": "open", + OPEN: { + actions: ["openFilePicker"] + }, + "DROPZONE.CLICK": { + actions: ["openFilePicker"] + }, "DROPZONE.FOCUS": "focused", "DROPZONE.DRAG_OVER": [{ cond: "!isWithinRange", @@ -45,10 +50,19 @@ const fetchMachine = createMachine({ }, focused: { on: { - OPEN: "open", - "DROPZONE.CLICK": "open", - "DROPZONE.ENTER": "open", - "DROPZONE.BLUR": "idle" + OPEN: { + actions: ["openFilePicker"] + }, + "DROPZONE.CLICK": { + actions: ["openFilePicker"] + }, + "DROPZONE.DRAG_OVER": [{ + cond: "!isWithinRange", + target: "dragging", + actions: ["setInvalid"] + }, { + target: "dragging" + }] } }, dragging: { @@ -62,13 +76,6 @@ const fetchMachine = createMachine({ actions: ["clearInvalid"] } } - }, - open: { - activities: ["trackWindowFocus"], - entry: ["openFilePicker"], - on: { - CLOSE: "idle" - } } } }, { diff --git a/packages/machines/file-upload/src/file-upload.machine.ts b/packages/machines/file-upload/src/file-upload.machine.ts index b2a025c1ef..939291f9ce 100644 --- a/packages/machines/file-upload/src/file-upload.machine.ts +++ b/packages/machines/file-upload/src/file-upload.machine.ts @@ -38,8 +38,12 @@ export function machine(userContext: UserDefinedContext) { states: { idle: { on: { - OPEN: "open", - "DROPZONE.CLICK": "open", + OPEN: { + actions: ["openFilePicker"], + }, + "DROPZONE.CLICK": { + actions: ["openFilePicker"], + }, "DROPZONE.FOCUS": "focused", "DROPZONE.DRAG_OVER": [ { @@ -53,10 +57,20 @@ export function machine(userContext: UserDefinedContext) { }, focused: { on: { - OPEN: "open", - "DROPZONE.CLICK": "open", - "DROPZONE.ENTER": "open", - "DROPZONE.BLUR": "idle", + OPEN: { + actions: ["openFilePicker"], + }, + "DROPZONE.CLICK": { + actions: ["openFilePicker"], + }, + "DROPZONE.DRAG_OVER": [ + { + guard: not("isWithinRange"), + target: "dragging", + actions: ["setInvalid"], + }, + { target: "dragging" }, + ], }, }, dragging: { @@ -71,29 +85,12 @@ export function machine(userContext: UserDefinedContext) { }, }, }, - open: { - activities: ["trackWindowFocus"], - entry: ["openFilePicker"], - on: { - CLOSE: "idle", - }, - }, }, }, { guards: { isWithinRange: (ctx, evt) => isFilesWithinRange(ctx, evt.count), }, - activities: { - trackWindowFocus(ctx, _evt, { send }) { - const win = dom.getWin(ctx) - const onWindowFocus = () => { - raf(() => send("CLOSE")) - } - win.addEventListener("focus", onWindowFocus) - return () => win.removeEventListener("focus", onWindowFocus) - }, - }, actions: { openFilePicker(ctx) { raf(() => {