feat: use Pointer Lock API for Number input (#465)

pmndrs · Jan 22, 2025 · b9c6376 · b9c6376
1 parent 428240c
commit b9c6376
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/clever-experts-perform.md b/.changeset/clever-experts-perform.md
@@ -0,0 +1,5 @@
+---
+'leva': minor
+---
+
+feat: use Pointer Lock API for Number input
diff --git a/packages/leva/src/components/Number/Number.tsx b/packages/leva/src/components/Number/Number.tsx
@@ -18,7 +18,14 @@ type DraggableLabelProps = {
 
 const DraggableLabel = React.memo(({ label, onUpdate, step, innerLabelTrim }: DraggableLabelProps) => {
   const [dragging, setDragging] = useState(false)
-  const bind = useDrag(({ active, delta: [dx], event, memo = 0 }) => {
+  const bind = useDrag(({ active, delta: [dx], event, memo = 0, first, last, target }) => {
+    if (first) {
+      const label = target as HTMLElement
+      label.requestPointerLock()
+    }
+    if (last) {
+      document.exitPointerLock()
+    }
     setDragging(active)
     memo += dx / 2
     if (Math.abs(memo) >= 1) {