fix: file dropzone click detection

chakra-ui · Jan 13, 2025 · 884973b · 884973b
1 parent 2ec1c40
commit 884973b
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 6 deletions.
diff --git a/.changeset/thirty-melons-yawn.md b/.changeset/thirty-melons-yawn.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/file-upload": patch
+---
+
+- Improve click detection for dropzone
+- Add support for `disableClick` prop on dropzone
diff --git a/examples/next-ts/pages/compositions b/examples/next-ts/pages/compositions
diff --git a/packages/machines/file-upload/src/file-upload.connect.ts b/packages/machines/file-upload/src/file-upload.connect.ts
@@ -67,7 +67,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    getDropzoneProps() {
+    getDropzoneProps(props = {}) {
       return normalize.element({
         ...parts.dropzone.attrs,
         dir: state.context.dir,
@@ -86,9 +86,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           send({ type: "DROPZONE.CLICK", src: "keydown" })
         },
         onClick(event) {
-          const isLabel = event.currentTarget.localName === "label"
+          if (event.defaultPrevented) return
+          if (props.disableClick) return
+          // ensure it's the dropzone that's actually clicked
+          if (!isSelfTarget(event)) return
           // prevent opening the file dialog when clicking on the label (to avoid double opening)
-          if (isLabel) event.preventDefault()
+          if (event.currentTarget.localName === "label") {
+            event.preventDefault()
+          }
           send("DROPZONE.CLICK")
         },
         onDragOver(event) {

diff --git a/packages/machines/file-upload/src/file-upload.types.ts b/packages/machines/file-upload/src/file-upload.types.ts
@@ -187,6 +187,13 @@ export interface ItemPreviewImageProps extends ItemProps {
   url: string
 }
 
+export interface DropzoneProps {
+  /**
+   * Whether to disable the click event on the dropzone
+   */
+  disableClick?: boolean
+}
+
 export interface MachineApi<T extends PropTypes> {
   /**
    * Whether the user is dragging something over the root element
@@ -241,7 +248,7 @@ export interface MachineApi<T extends PropTypes> {
 
   getLabelProps(): T["label"]
   getRootProps(): T["element"]
-  getDropzoneProps(): T["element"]
+  getDropzoneProps(props?: DropzoneProps): T["element"]
   getTriggerProps(): T["button"]
   getHiddenInputProps(): T["input"]
   getItemGroupProps(): T["element"]

diff --git a/packages/machines/file-upload/src/index.ts b/packages/machines/file-upload/src/index.ts
@@ -5,6 +5,7 @@ export * from "./file-upload.props"
 export type {
   MachineApi as Api,
   UserDefinedContext as Context,
+  DropzoneProps,
   ElementIds,
   FileAcceptDetails,
   FileChangeDetails,

diff --git a/shared/src/css/file-upload.css b/shared/src/css/file-upload.css
@@ -1,11 +1,19 @@
 [data-scope="file-upload"][data-part="dropzone"] {
-  width: 260px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   gap: 16px;
   padding: 24px;
   border: 2px dashed #d5d5d5;
+  position: relative;
+}
+
+[data-scope="file-upload"][data-part="dropzone"][data-cover] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 [data-scope="file-upload"][data-part="dropzone"][data-dragging] {

diff --git a/shared/src/css/layout.css b/shared/src/css/layout.css
@@ -88,6 +88,7 @@ body {
   flex: auto;
   display: flex;
   gap: 10px;
+  position: relative;
   flex-direction: column;
   align-items: flex-start;
   padding: 40px;