Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(file-upload): fix reopening the system file picker on browsers other than Chrome #869

Merged
merged 3 commits into from
Sep 30, 2023

Conversation

srflp
Copy link
Contributor

@srflp srflp commented Sep 13, 2023

📝 Description

According to Павлюткин Артём from Discord (https://discord.com/channels/964648323304808488/964648323304808496/1151315874020605972):

Hi, I have a problem. Through the Safari browser, I click on the "Download" button for the first time, a window appears to download the file. If you press the button again, nothing happens.
I tried it on the official website from the Safari browser.
The problem is only in the mobile browser on the iPhone.

I also discovered that the problem also occurs on Firefox and Safari on macOS and I confirm that it occurs on Safari on iOS.

⛳️ Current behavior (updates)

  1. User gets stuck in the open state on the majority of the browsers, with no way to escape the open state.
  2. There is no possibility to drag and drop files while dropzone is focused.
  3. There is unused DROPZONE.ENTER transition.
  4. Docs lie "isFiltered: Whether the user is focused on the root element"

🚀 New behavior

  1. Open state got removed, since there seems to be no reliable way to detect whether the system file picker got closed by the user without choosing the file.
    Instead of going into "open" state, existing idle/focused states are used.
    OPEN and DROPZONE.CLICK transitions (in idle/focused state) are bound to an action that opens the system file picker.
  2. Allow to drag and drop files while dropzone is focused.
  3. Remove DROPZONE.ENTER transition.
  4. Fix the docs to say the truth: "isFiltered: Whether the user is focused on the dropzone element".

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

@changeset-bot
Copy link

changeset-bot bot commented Sep 13, 2023

🦋 Changeset detected

Latest commit: 2748212

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 65 packages
Name Type
@zag-js/file-upload Patch
@zag-js/docs Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/vue Patch
@zag-js/accordion Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/checkbox Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-picker Patch
@zag-js/dialog Patch
@zag-js/editable Patch
@zag-js/hover-card Patch
@zag-js/menu Patch
@zag-js/number-input Patch
@zag-js/pagination Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/pressable Patch
@zag-js/radio-group Patch
@zag-js/range-slider Patch
@zag-js/rating-group Patch
@zag-js/select Patch
@zag-js/slider Patch
@zag-js/splitter Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/toast Patch
@zag-js/toggle-group Patch
@zag-js/tooltip Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-event Patch
@zag-js/dom-query Patch
@zag-js/element-rect Patch
@zag-js/element-size Patch
@zag-js/file-utils Patch
@zag-js/focus-scope Patch
@zag-js/focus-visible Patch
@zag-js/form-utils Patch
@zag-js/interact-outside Patch
@zag-js/live-region Patch
@zag-js/mutation-observer Patch
@zag-js/number-utils Patch
@zag-js/numeric-range Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/tabbable Patch
@zag-js/text-selection Patch
@zag-js/visually-hidden Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Sep 13, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
zag-nextjs ✅ Ready (Inspect) Visit Preview Sep 13, 2023 11:43pm
zag-solid ✅ Ready (Inspect) Visit Preview Sep 13, 2023 11:43pm
zag-vue ✅ Ready (Inspect) Visit Preview Sep 13, 2023 11:43pm
zag-website ✅ Ready (Inspect) Visit Preview Sep 13, 2023 11:43pm

@srflp srflp marked this pull request as ready for review September 13, 2023 23:43
@srflp srflp changed the title fix(file-upload): fix opening system file picker multiple times on browsers other than Chrome fix(file-upload): fix reopening the system file picker on browsers other than Chrome Sep 14, 2023
@segunadebayo segunadebayo merged commit bf574e5 into chakra-ui:main Sep 30, 2023
16 checks passed
@github-actions github-actions bot mentioned this pull request Sep 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants