Skip to content

Commit bdd34d8

Browse files
mattgperryclaude
andcommitted
Refactor drag to use shared isElementKeyboardAccessible utility
Consolidates interactive element detection logic between drag and press gestures. Adds isContentEditable check to the shared utility. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent a646a8a commit bdd34d8

File tree

3 files changed

+5
-25
lines changed

3 files changed

+5
-25
lines changed

packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
isElementKeyboardAccessible,
23
PanInfo,
34
ResolvedConstraints,
45
Transition,
@@ -634,7 +635,7 @@ export class VisualElementDragControls {
634635
if (
635636
drag &&
636637
dragListener &&
637-
!isInteractiveElement(event.target as Element)
638+
!isElementKeyboardAccessible(event.target as Element)
638639
) {
639640
this.start(event)
640641
}
@@ -762,26 +763,3 @@ export function expectsResolvedDragConstraints({
762763
}: MotionProps) {
763764
return isRefObject(dragConstraints) && !!onMeasureDragConstraints
764765
}
765-
766-
/**
767-
* Check if an element is an interactive form element that should
768-
* prevent drag from starting when clicked.
769-
*/
770-
const interactiveElements = new Set([
771-
"INPUT",
772-
"TEXTAREA",
773-
"SELECT",
774-
"BUTTON",
775-
"A",
776-
])
777-
778-
function isInteractiveElement(element: Element | null): boolean {
779-
if (!element) return false
780-
if (
781-
interactiveElements.has(element.tagName) ||
782-
(element as HTMLElement).isContentEditable
783-
) {
784-
return true
785-
}
786-
return false
787-
}

packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const focusableElements = new Set([
99
export function isElementKeyboardAccessible(element: Element) {
1010
return (
1111
focusableElements.has(element.tagName) ||
12-
(element as HTMLElement).tabIndex !== -1
12+
(element as HTMLElement).tabIndex !== -1 ||
13+
(element as HTMLElement).isContentEditable
1314
)
1415
}

packages/motion-dom/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export * from "./gestures/hover"
5656
export * from "./gestures/pan/types"
5757
export * from "./gestures/press"
5858
export * from "./gestures/press/types"
59+
export * from "./gestures/press/utils/is-keyboard-accessible"
5960
export * from "./gestures/types"
6061
export * from "./gestures/utils/is-node-or-child"
6162
export * from "./gestures/utils/is-primary-pointer"

0 commit comments

Comments
 (0)