From b60ab10b5e3f5bb6b108f1fa559be99b01589112 Mon Sep 17 00:00:00 2001
From: coadtan <mynamecoad@gmail.com>
Date: Sat, 26 Nov 2022 22:23:47 +0700
Subject: [PATCH] [docs] Update Dropzone docs for Enable child pointer event

---
 docs/src/docs/others/dropzone.mdx             |  7 +++
 .../Dropzone.demo.enableChildPointerEvent.tsx | 49 +++++++++++++++++++
 src/mantine-demos/src/demos/dropzone/index.ts |  1 +
 3 files changed, 57 insertions(+)
 create mode 100644 src/mantine-demos/src/demos/dropzone/Dropzone.demo.enableChildPointerEvent.tsx

diff --git a/docs/src/docs/others/dropzone.mdx b/docs/src/docs/others/dropzone.mdx
index 444f52ba2d2..92bfbf0bc7c 100644
--- a/docs/src/docs/others/dropzone.mdx
+++ b/docs/src/docs/others/dropzone.mdx
@@ -80,6 +80,13 @@ To open files browser from outside of component use `openRef` prop to get functi
 
 <Demo data={DropzoneDemos.manual} />
 
+## Enable child pointer event
+
+By default, Dropzone disables pointer events on its children for dragging events to work. So when we set `activateOnClick` to `false`,
+clicking on any children inside Dropzone will do nothing. However, You can set style `pointerEvents: 'all'` to make children events to work:
+
+<Demo data={DropzoneDemos.enableChildPointerEvent} />
+
 ## Mime types
 
 To specify file types provide an object with the keys set to the [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
diff --git a/src/mantine-demos/src/demos/dropzone/Dropzone.demo.enableChildPointerEvent.tsx b/src/mantine-demos/src/demos/dropzone/Dropzone.demo.enableChildPointerEvent.tsx
new file mode 100644
index 00000000000..ff4235c855f
--- /dev/null
+++ b/src/mantine-demos/src/demos/dropzone/Dropzone.demo.enableChildPointerEvent.tsx
@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import { Button } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { MantineDemo } from '@mantine/ds';
+
+const code = `
+import { useRef } from 'react';
+import { Button, Group } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+
+function Demo() {
+  const openRef = useRef<() => void>(null);
+
+  return (
+    <>
+      <Dropzone
+        openRef={openRef}
+        activateOnClick={false}
+        styles={{ inner: { pointerEvents: 'all' } }}
+      >
+        <Button onClick={() => openRef.current()}>Select files</Button>
+      </Dropzone>
+    </>
+  );
+}
+`;
+
+function Demo() {
+  const openRef = useRef<() => void>(null);
+
+  return (
+    <>
+      <Dropzone
+        openRef={openRef}
+        onDrop={() => {}}
+        activateOnClick={false}
+        styles={{ inner: { pointerEvents: 'all' } }}
+      >
+        <Button onClick={() => openRef.current()}>Select files</Button>
+      </Dropzone>
+    </>
+  );
+}
+
+export const enableChildPointerEvent: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/dropzone/index.ts b/src/mantine-demos/src/demos/dropzone/index.ts
index 2a1cbe9720d..62abcff4e37 100644
--- a/src/mantine-demos/src/demos/dropzone/index.ts
+++ b/src/mantine-demos/src/demos/dropzone/index.ts
@@ -2,6 +2,7 @@ export { usage } from './Dropzone.demo.usage';
 export { loading } from './Dropzone.demo.loading';
 export { disabled } from './Dropzone.demo.disabled';
 export { manual } from './Dropzone.demo.manual';
+export { enableChildPointerEvent } from './Dropzone.demo.enableChildPointerEvent';
 export { fullScreen } from './Dropzone.demo.fullScreen';
 export { stylesApi } from './Dropzone.demo.stylesApi';
 export { preview } from './Dropzone.demo.preview';