From 568d7cad756bfddf7cc63ad4a0fd7f948598b9b3 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Mon, 6 Sep 2021 13:58:46 -0400 Subject: [PATCH] drag-overlay.md: note about click events --- api-documentation/draggable/drag-overlay.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/api-documentation/draggable/drag-overlay.md b/api-documentation/draggable/drag-overlay.md index 3cebe94..667c9ea 100644 --- a/api-documentation/draggable/drag-overlay.md +++ b/api-documentation/draggable/drag-overlay.md @@ -20,7 +20,7 @@ You may render any valid JSX within the children of the ``. However The `` component should **remain mounted at all times** so that it can perform the drop animation. If you conditionally render the `` component, drop animations will not work. -As a rule of thumb, try to render the `` outside fo your draggable components, and follow the [presentational component pattern ](drag-overlay.md#presentational-components)to maintain a good separation of concerns. +As a rule of thumb, try to render the `` outside of your draggable components, and follow the [presentational component pattern ](drag-overlay.md#presentational-components)to maintain a good separation of concerns. Instead, you should conditionally render the children passed to the ``: @@ -222,6 +222,10 @@ function App() { } ``` +### Click events + +With default settings, a `DragOverlay` will prevent `click` events from firing on your draggable element because the `DragOverlay` is displayed over top of the draggable. To fix this, add a delay or distance-based [activation constraint](../sensors/pointer.md#activation-constraints) or use a drag handle. + ## Props ```typescript