fix(slider, range-slider): prevent thumb drag when disabled true (#864)

Co-authored-by: Segun Adebayo <[email protected]>
chakra-ui · Sep 13, 2023 · be90c03 · be90c03 · vercel · Sep 13, 2023
1 parent 1ec8547
commit be90c03
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/perfect-games-train.md b/.changeset/perfect-games-train.md
@@ -0,0 +1,6 @@
+---
+"@zag-js/range-slider": patch
+"@zag-js/slider": patch
+---
+
+Fix issue where slider interaction works when `disabled` is set
diff --git a/packages/machines/range-slider/src/range-slider.connect.ts b/packages/machines/range-slider/src/range-slider.connect.ts
@@ -163,6 +163,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         tabIndex: isDisabled ? undefined : 0,
         style: dom.getThumbStyle(state.context, index),
         onPointerDown(event) {
+          if (!isInteractive) return
           send({ type: "THUMB_POINTER_DOWN", index })
           event.stopPropagation()
         },

diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts
@@ -107,6 +107,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       role: "slider",
       tabIndex: isDisabled ? undefined : 0,
       onPointerDown(event) {
+        if (!isInteractive) return
         send({ type: "THUMB_POINTER_DOWN" })
         event.stopPropagation()
       },