diff --git a/src/__tests__/type.js b/src/__tests__/type.js index b91f436b..d5b8cea6 100644 --- a/src/__tests__/type.js +++ b/src/__tests__/type.js @@ -896,7 +896,7 @@ test('should not type inside a contenteditable=false div', () => { `) }) -test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => { +test('navigation key: {arrowleft} and {arrowright} moves the cursor for ', () => { const {element, getEventSnapshot} = setup('') userEvent.type(element, 'b{arrowleft}a{arrowright}c') expect(getEventSnapshot()).toMatchInlineSnapshot(` @@ -937,6 +937,47 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => { `) }) +test('navigation key: {arrowleft} and {arrowright} moves the cursor for ') + userEvent.type(element, 'b{arrowleft}a{arrowright}c') + expect(getEventSnapshot()).toMatchInlineSnapshot(` + Events fired on: textarea[value="abc"] + + textarea[value=""] - pointerover + textarea[value=""] - pointerenter + textarea[value=""] - mouseover: Left (0) + textarea[value=""] - mouseenter: Left (0) + textarea[value=""] - pointermove + textarea[value=""] - mousemove: Left (0) + textarea[value=""] - pointerdown + textarea[value=""] - mousedown: Left (0) + textarea[value=""] - focus + textarea[value=""] - focusin + textarea[value=""] - pointerup + textarea[value=""] - mouseup: Left (0) + textarea[value=""] - click: Left (0) + textarea[value=""] - keydown: b (98) + textarea[value=""] - keypress: b (98) + textarea[value="b"] - input + textarea[value="b"] - keyup: b (98) + textarea[value="b"] - keydown: ArrowLeft (37) + textarea[value="b"] - select + textarea[value="b"] - keyup: ArrowLeft (37) + textarea[value="b"] - keydown: a (97) + textarea[value="b"] - keypress: a (97) + textarea[value="ab"] - select + textarea[value="ab"] - input + textarea[value="ab"] - keyup: a (97) + textarea[value="ab"] - keydown: ArrowRight (39) + textarea[value="ab"] - select + textarea[value="ab"] - keyup: ArrowRight (39) + textarea[value="ab"] - keydown: c (99) + textarea[value="ab"] - keypress: c (99) + textarea[value="abc"] - input + textarea[value="abc"] - keyup: c (99) + `) +}) + test('navigation key: {home} and {end} moves the cursor', () => { const {element, getEventSnapshot} = setup('') userEvent.type(element, 'c{home}ab{end}d') diff --git a/src/keyboard/plugins/arrow.ts b/src/keyboard/plugins/arrow.ts index 3ab3529e..f95130ed 100644 --- a/src/keyboard/plugins/arrow.ts +++ b/src/keyboard/plugins/arrow.ts @@ -8,10 +8,10 @@ import {getSelectionRange, isElementType, setSelectionRange} from '../../utils' export const keydownBehavior: behaviorPlugin[] = [ { - // TODO: implement for textarea and contentEditable + // TODO: implement for contentEditable matches: (keyDef, element) => (keyDef.key === 'ArrowLeft' || keyDef.key === 'ArrowRight') && - isElementType(element, 'input'), + isElementType(element, ['input', 'textarea']), handle: (keyDef, element) => { const {selectionStart, selectionEnd} = getSelectionRange(element)