feat(type): automatically release modifiers

Author: kentcdodds

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

@@ -728,3 +728,68 @@ test('{del} does not delete if keydown is prevented', async () => {
   expect(element.selectionEnd).toBe(2)
   expect(eventWasFired('input')).not.toBe(true)
 })
+
+test('any remaining type modifiers are automatically released at the end', async () => {
+  const {element, getEventSnapshot} = setup('<input />')
+
+  await userEvent.type(element, '{meta}{alt}{ctrl}a{/alt}')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="a"]
+
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: Meta (93) {meta}
+    input[value=""] - keydown: Alt (18) {alt}{meta}
+    input[value=""] - keydown: Control (17) {alt}{meta}{ctrl}
+    input[value=""] - keydown: a (97) {alt}{meta}{ctrl}
+    input[value=""] - keypress: a (97) {alt}{meta}{ctrl}
+    input[value="a"] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - keyup: a (97) {alt}{meta}{ctrl}
+    input[value="a"] - keyup: Alt (18) {meta}{ctrl}
+    input[value="a"] - keyup: Meta (93) {ctrl}
+    input[value="a"] - keyup: Control (17)
+  `)
+})
+
+test('modifiers will not be closed if skipAutoClose is enabled', async () => {
+  const {element, getEventSnapshot} = setup('<input />')
+
+  await userEvent.type(element, '{meta}a', {skipAutoClose: true})
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="a"]
+
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: Meta (93) {meta}
+    input[value=""] - keydown: a (97) {meta}
+    input[value=""] - keypress: a (97) {meta}
+    input[value="a"] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - keyup: a (97) {meta}
+  `)
+})

src/user-event/type.js

@@ -29,7 +29,13 @@ function setSelectionRangeIfNecessary(
 async function type(
   element,
   text,
-  {skipClick = false, delay, initialSelectionStart, initialSelectionEnd} = {},
+  {
+    skipClick = false,
+    skipAutoClose = false,
+    delay,
+    initialSelectionStart,
+    initialSelectionEnd,
+  } = {},
 ) {
   if (element.disabled) return
 
@@ -89,21 +95,34 @@ async function type(
 
   function queueCallbacks() {
     const callbacks = []
+    const modifierClosers = []
     let remainingString = text
     while (remainingString) {
       const eventKey = Object.keys(eventCallbackMap).find(key =>
         remainingString.startsWith(key),
       )
       if (eventKey) {
-        callbacks.push(eventCallbackMap[eventKey])
+        const modifierCallback = eventCallbackMap[eventKey]
+        callbacks.push(modifierCallback)
+
+        // if this modifier has an associated "close" callback and the developer
+        // doesn't close it themselves, then we close it for them automatically
+        // Effectively if they send in: '{alt}a' then we type: '{alt}a{/alt}'
+        if (
+          !skipAutoClose &&
+          modifierCallback.close &&
+          !remainingString.includes(modifierCallback.close.name)
+        ) {
+          modifierClosers.push(modifierCallback.close.fn)
+        }
         remainingString = remainingString.slice(eventKey.length)
       } else {
         const character = remainingString[0]
         callbacks.push((...args) => typeCharacter(character, ...args))
         remainingString = remainingString.slice(1)
       }
     }
-    return callbacks
+    return [...callbacks, ...modifierClosers]
   }
 
   async function runCallbacks(callbacks) {
@@ -498,33 +517,36 @@ function getEventCallbackMap({
   }
 
   function modifier({name, key, keyCode, modifierProperty}) {
-    return {
-      [`{${name}}`]: async ({eventOverrides}) => {
-        const newEventOverrides = {[modifierProperty]: true}
+    async function open({eventOverrides}) {
+      const newEventOverrides = {[modifierProperty]: true}
 
-        await fireEvent.keyDown(currentElement(), {
-          key,
-          keyCode,
-          which: keyCode,
-          ...eventOverrides,
-          ...newEventOverrides,
-        })
+      await fireEvent.keyDown(currentElement(), {
+        key,
+        keyCode,
+        which: keyCode,
+        ...eventOverrides,
+        ...newEventOverrides,
+      })
 
-        return {eventOverrides: newEventOverrides}
-      },
-      [`{/${name}}`]: async ({eventOverrides}) => {
-        const newEventOverrides = {[modifierProperty]: false}
+      return {eventOverrides: newEventOverrides}
+    }
+    open.close = {name: [`{/${name}}`], fn: close}
+    async function close({eventOverrides}) {
+      const newEventOverrides = {[modifierProperty]: false}
 
-        await fireEvent.keyUp(currentElement(), {
-          key,
-          keyCode,
-          which: keyCode,
-          ...eventOverrides,
-          ...newEventOverrides,
-        })
+      await fireEvent.keyUp(currentElement(), {
+        key,
+        keyCode,
+        which: keyCode,
+        ...eventOverrides,
+        ...newEventOverrides,
+      })
 
-        return {eventOverrides: newEventOverrides}
-      },
+      return {eventOverrides: newEventOverrides}
+    }
+    return {
+      [`{${name}}`]: open,
+      [`{/${name}}`]: close,
     }
   }
 }