From 88512d02257bb2b2c3e702af28ca8361e7cd88d3 Mon Sep 17 00:00:00 2001
From: Rachadech Tansakul <9078052+coadtan@users.noreply.github.com>
Date: Sun, 4 Dec 2022 19:06:03 +0700
Subject: [PATCH] [docs] Add dropzone pointer-events documentation (#3067)
---
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
+## 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:
+
+
+
## 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 (
+ <>
+
+
+
+ >
+ );
+}
+`;
+
+function Demo() {
+ const openRef = useRef<() => void>(null);
+
+ return (
+ <>
+ {}}
+ activateOnClick={false}
+ styles={{ inner: { pointerEvents: 'all' } }}
+ >
+
+
+ >
+ );
+}
+
+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';