Skip to content

Commit df6339a

Browse files
kentcdoddskentcdodds
committed
fix(clear): correctness audit
1 parent 17655c1 commit df6339a

File tree

5 files changed

+32
-38
lines changed

5 files changed

+32
-38
lines changed

‎src/user-event/__tests__/clear.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ test('clears text', async () => {
1010
1111
input[value="hello"] - focus
1212
input[value="hello"] - select
13-
input[value="hello"] - select
1413
input[value="hello"] - keydown: Delete (46)
1514
input[value="hello"] - input
1615
"{SELECTION}hello{/SELECTION}" -> "{CURSOR}"
@@ -42,7 +41,6 @@ test('does not clear text on readonly inputs', async () => {
4241
4342
input[value="hello"] - focus
4443
input[value="hello"] - select
45-
input[value="hello"] - select
4644
input[value="hello"] - keydown: Delete (46)
4745
input[value="hello"] - keyup: Delete (46)
4846
`)

‎src/user-event/__tests__/type-modifiers.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ test('{esc} triggers typing the escape character', async () => {
2424
Events fired on: input[value=""]
2525
2626
input[value=""] - focus
27-
input[value=""] - select
2827
input[value=""] - keydown: Escape (27)
2928
input[value=""] - keyup: Escape (27)
3029
`)
@@ -37,7 +36,6 @@ test('a{backspace}', async () => {
3736
Events fired on: input[value=""]
3837
3938
input[value=""] - focus
40-
input[value=""] - select
4139
input[value=""] - keydown: a (97)
4240
input[value=""] - keypress: a (97)
4341
input[value=""] - input
@@ -57,7 +55,6 @@ test('{backspace}a', async () => {
5755
Events fired on: input[value="a"]
5856
5957
input[value=""] - focus
60-
input[value=""] - select
6158
input[value=""] - keydown: Backspace (8)
6259
input[value=""] - keyup: Backspace (8)
6360
input[value=""] - keydown: a (97)
@@ -157,7 +154,6 @@ test('{alt}a{/alt}', async () => {
157154
Events fired on: input[value="a"]
158155
159156
input[value=""] - focus
160-
input[value=""] - select
161157
input[value=""] - keydown: Alt (18) {alt}
162158
input[value=""] - keydown: a (97) {alt}
163159
input[value=""] - keypress: a (97) {alt}
@@ -177,7 +173,6 @@ test('{meta}a{/meta}', async () => {
177173
Events fired on: input[value="a"]
178174
179175
input[value=""] - focus
180-
input[value=""] - select
181176
input[value=""] - keydown: Meta (93) {meta}
182177
input[value=""] - keydown: a (97) {meta}
183178
input[value=""] - keypress: a (97) {meta}
@@ -197,7 +192,6 @@ test('{ctrl}a{/ctrl}', async () => {
197192
Events fired on: input[value="a"]
198193
199194
input[value=""] - focus
200-
input[value=""] - select
201195
input[value=""] - keydown: Control (17) {ctrl}
202196
input[value=""] - keydown: a (97) {ctrl}
203197
input[value=""] - keypress: a (97) {ctrl}
@@ -217,7 +211,6 @@ test('{shift}a{/shift}', async () => {
217211
Events fired on: input[value="a"]
218212
219213
input[value=""] - focus
220-
input[value=""] - select
221214
input[value=""] - keydown: Shift (16) {shift}
222215
input[value=""] - keydown: a (97) {shift}
223216
input[value=""] - keypress: a (97) {shift}
@@ -237,7 +230,6 @@ test('a{enter}', async () => {
237230
Events fired on: input[value="a"]
238231
239232
input[value=""] - focus
240-
input[value=""] - select
241233
input[value=""] - keydown: a (97)
242234
input[value=""] - keypress: a (97)
243235
input[value=""] - input
@@ -262,7 +254,6 @@ test('{enter} with preventDefault keydown', async () => {
262254
Events fired on: input[value=""]
263255
264256
input[value=""] - focus
265-
input[value=""] - select
266257
input[value=""] - keydown: Enter (13)
267258
input[value=""] - keyup: Enter (13)
268259
`)
@@ -293,7 +284,6 @@ test('{enter} on a textarea', async () => {
293284
Events fired on: textarea[value="\\n"]
294285
295286
textarea[value=""] - focus
296-
textarea[value=""] - select
297287
textarea[value=""] - keydown: Enter (13)
298288
textarea[value=""] - keypress: Enter (13)
299289
textarea[value=""] - input
@@ -329,7 +319,6 @@ test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
329319
Events fired on: input[value="a"]
330320
331321
input[value=""] - focus
332-
input[value=""] - select
333322
input[value=""] - keydown: Meta (93) {meta}
334323
input[value=""] - keydown: Alt (18) {alt}{meta}
335324
input[value=""] - keydown: Control (17) {alt}{meta}{ctrl}
@@ -380,7 +369,6 @@ test('{del} at the start of the input', async () => {
380369
Events fired on: input[value="ello"]
381370
382371
input[value="hello"] - focus
383-
input[value="hello"] - select
384372
input[value="hello"] - keydown: Delete (46)
385373
input[value="hello"] - input
386374
"{CURSOR}hello" -> "ello{CURSOR}"

‎src/user-event/__tests__/type.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ test('types text in input', async () => {
99
Events fired on: input[value="Sup"]
1010
1111
input[value=""] - focus
12-
input[value=""] - select
1312
input[value=""] - keydown: S (83)
1413
input[value=""] - keypress: S (83)
1514
input[value=""] - input
@@ -35,7 +34,6 @@ test('types text in input with allAtOnce', async () => {
3534
Events fired on: input[value="Sup"]
3635
3736
input[value=""] - focus
38-
input[value=""] - select
3937
input[value=""] - input
4038
"{CURSOR}" -> "Sup{CURSOR}"
4139
`)
@@ -52,7 +50,6 @@ test('types text inside custom element', async () => {
5250
Events fired on: input[value="Sup"]
5351
5452
input[value=""] - focus
55-
input[value=""] - select
5653
input[value=""] - keydown: S (83)
5754
input[value=""] - keypress: S (83)
5855
input[value=""] - input
@@ -78,7 +75,6 @@ test('types text in textarea', async () => {
7875
Events fired on: textarea[value="Sup"]
7976
8077
textarea[value=""] - focus
81-
textarea[value=""] - select
8278
textarea[value=""] - keydown: S (83)
8379
textarea[value=""] - keypress: S (83)
8480
textarea[value=""] - input
@@ -104,7 +100,6 @@ test('should append text all at once', async () => {
104100
Events fired on: input[value="Sup"]
105101
106102
input[value=""] - focus
107-
input[value=""] - select
108103
input[value=""] - input
109104
"{CURSOR}" -> "Sup{CURSOR}"
110105
`)
@@ -120,7 +115,6 @@ test('does not fire input event when keypress calls prevent default', async () =
120115
Events fired on: input[value=""]
121116
122117
input[value=""] - focus
123-
input[value=""] - select
124118
input[value=""] - keydown: a (97)
125119
input[value=""] - keypress: a (97)
126120
input[value=""] - keyup: a (97)
@@ -137,7 +131,6 @@ test('does not fire keypress or input events when keydown calls prevent default'
137131
Events fired on: input[value=""]
138132
139133
input[value=""] - focus
140-
input[value=""] - select
141134
input[value=""] - keydown: a (97)
142135
input[value=""] - keyup: a (97)
143136
`)
@@ -160,7 +153,6 @@ test('does not fire input when readonly', async () => {
160153
Events fired on: input[value=""]
161154
162155
input[value=""] - focus
163-
input[value=""] - select
164156
input[value=""] - keydown: a (97)
165157
input[value=""] - keypress: a (97)
166158
input[value=""] - keyup: a (97)
@@ -175,7 +167,6 @@ test('does not fire input when readonly (with allAtOnce)', async () => {
175167
Events fired on: input[value=""]
176168
177169
input[value=""] - focus
178-
input[value=""] - select
179170
`)
180171
})
181172

@@ -219,7 +210,6 @@ test('honors maxlength', async () => {
219210
Events fired on: input[value="12"]
220211
221212
input[value=""] - focus
222-
input[value=""] - select
223213
input[value=""] - keydown: 1 (49)
224214
input[value=""] - keypress: 1 (49)
225215
input[value=""] - input
@@ -323,7 +313,6 @@ test('typing into a controlled input works', async () => {
323313
Events fired on: input[value="$23"]
324314
325315
input[value=""] - focus
326-
input[value=""] - select
327316
input[value=""] - keydown: 2 (50)
328317
input[value=""] - keypress: 2 (50)
329318
input[value=""] - input
@@ -430,7 +419,6 @@ test('accepts an initialSelectionStart and initialSelectionEnd', async () => {
430419
431420
textarea[value="Hello, "] - select
432421
textarea[value="Hello, "] - focus
433-
textarea[value="Hello, "] - select
434422
textarea[value="Hello, "] - keydown: 1 (49)
435423
textarea[value="Hello, "] - keypress: 1 (49)
436424
textarea[value="Hello, "] - input

‎src/user-event/clear.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ async function clear(element) {
1818
// setSelectionRange is not supported on certain types of inputs, e.g. "number" or "email"
1919
element.type = 'text'
2020
}
21-
await type(element, '{selectall}{del}')
21+
await type(element, '{selectall}{del}', {
22+
initialSelectionStart: element.selectionStart,
23+
initialSelectionEnd: element.selectionEnd,
24+
})
2225
if (element.tagName === 'INPUT') {
2326
element.type = elementType
2427
}

‎src/user-event/type.js

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,24 @@ const getActiveElement = document => {
1515
}
1616
}
1717

18+
function setSelectionRangeIfNecessary(
19+
element,
20+
newSelectionStart,
21+
newSelectionEnd,
22+
) {
23+
const {selectionStart, selectionEnd} = element
24+
if (!element.setSelectionRange || selectionStart === null) {
25+
// cannot set selection
26+
return
27+
}
28+
if (
29+
selectionStart !== newSelectionStart ||
30+
selectionEnd !== newSelectionStart
31+
) {
32+
element.setSelectionRange(newSelectionStart, newSelectionEnd)
33+
}
34+
}
35+
1836
// eslint-disable-next-line complexity
1937
async function type(
2038
element,
@@ -40,16 +58,12 @@ async function type(
4058
// The reason we have to do this at all is because it actually *is*
4159
// programmatically changed by await fireEvent.input, so we have to simulate the
4260
// browser's default behavior
43-
const el = currentElement()
44-
const {selectionStart, selectionEnd} = el
45-
if (
46-
selectionStart !== null &&
47-
currentValue() === newValue &&
48-
el.setSelectionRange &&
49-
(selectionStart !== newSelectionStart ||
50-
selectionEnd !== newSelectionStart)
51-
) {
52-
el.setSelectionRange(newSelectionStart, newSelectionStart)
61+
if (currentValue() === newValue) {
62+
setSelectionRangeIfNecessary(
63+
currentElement(),
64+
newSelectionStart,
65+
newSelectionStart,
66+
)
5367
}
5468
}
5569

@@ -65,7 +79,8 @@ async function type(
6579
currentElement().selectionStart === 0 &&
6680
currentElement().selectionEnd === 0
6781
) {
68-
currentElement().setSelectionRange(
82+
setSelectionRangeIfNecessary(
83+
currentElement(),
6984
initialSelectionStart ?? currentValue().length,
7085
initialSelectionEnd ?? currentValue().length,
7186
)
@@ -239,6 +254,8 @@ async function type(
239254
...eventOverrides,
240255
})
241256
},
257+
// the user can actually select in several different ways
258+
// we're not going to choose, so we'll *only* set the selection range
242259
'{selectall}': async () => {
243260
await tick()
244261
currentElement().setSelectionRange(0, currentValue().length)

0 commit comments

Comments
 (0)