motion/dev/react/src/tests/drag-input-propagation.tsx at cb8e1a8c6350ef9587b517cb2e89af6b1c9ba9fd · motiondivision/motion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { motion } from "framer-motion"

/**
 * Test page for issue #1674: Interactive elements inside draggable elements
 * should not trigger drag when clicked/interacted with.
 */
export const App = () => {
    return (
        <div style={{ padding: 100 }}>
            <motion.div
                id="draggable"
                data-testid="draggable"
                drag
                dragElastic={0}
                dragMomentum={false}
                style={{
                    width: 400,
                    height: 200,
                    background: "red",
                    display: "flex",
                    flexWrap: "wrap",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: 10,
                    padding: 10,
                }}
            >
                <input
                    type="text"
                    data-testid="input"
                    defaultValue="Select me"
                    style={{
                        width: 80,
                        height: 30,
                        padding: 5,
                    }}
                />
                <textarea
                    data-testid="textarea"
                    defaultValue="Text"
                    style={{
                        width: 60,
                        height: 30,
                        padding: 5,
                    }}
                />
                <button
                    data-testid="button"
                    style={{
                        width: 60,
                        height: 30,
                        padding: 5,
                    }}
                >
                    Click
                </button>
                <a
                    href="#test"
                    data-testid="link"
                    style={{
                        display: "inline-block",
                        width: 60,
                        height: 30,
                        padding: 5,
                        background: "white",
                    }}
                >
                    Link
                </a>
                <select
                    data-testid="select"
                    style={{
                        width: 80,
                        height: 30,
                    }}
                >
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label
                    data-testid="label"
                    style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 5,
                        background: "white",
                        padding: 5,
                    }}
                >
                    <input
                        type="checkbox"
                        data-testid="checkbox"
                    />
                    Check
                </label>
                <div
                    contentEditable
                    data-testid="contenteditable"
                    style={{
                        width: 80,
                        height: 30,
                        padding: 5,
                        background: "white",
                    }}
                >
                    Edit me
                </div>
            </motion.div>
        </div>
    )
}