From 66d80e34c938a604d30e09575a551bf4e1471b4b Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 9 Mar 2021 19:48:40 +0100
Subject: [PATCH 01/43] chore: configure repo for typescript modules

---
 .eslintrc.js  | 13 +++++++++++++
 tsconfig.json | 10 ++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .eslintrc.js
 create mode 100644 tsconfig.json

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..df4cb262
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: './node_modules/kcd-scripts/eslint.js',
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts'],
+      },
+    },
+  },
+  rules: {
+    'testing-library/no-dom-import': 0,
+  },
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..d7d83b6d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
+    "compilerOptions": {
+        "allowJs": true
+    },
+    "include": [
+        "./src",
+        "./typings"
+    ]
+}
\ No newline at end of file

From 153aca87f1795c7fbdcfd6f17bf67de1c3e1514f Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 9 Mar 2021 20:56:26 +0100
Subject: [PATCH 02/43] refactor: convert and restructure utils

---
 src/utils.js                                  | 384 ------------------
 src/utils/click/getMouseEventOptions.ts       |  75 ++++
 src/utils/click/index.ts                      |   2 +
 src/utils/click/isClickableInput.ts           |  18 +
 src/utils/edit/buildTimeValue.ts              |  32 ++
 src/utils/edit/calculateNewValue.ts           |  94 +++++
 src/utils/edit/getSelectionRange.ts           |  31 ++
 src/utils/edit/getValue.ts                    |   8 +
 src/utils/edit/index.ts                       |   8 +
 src/utils/edit/isContentEditable.ts           |   8 +
 src/utils/edit/isValidDateValue.ts            |  14 +
 src/utils/edit/isValidInputTimeValue.ts       |  17 +
 .../edit/setSelectionRangeIfNecessary.ts      |  46 +++
 src/utils/focus/getActiveElement.ts           |  10 +
 src/utils/focus/index.ts                      |   3 +
 src/utils/focus/isFocusable.ts                |   9 +
 src/utils/focus/selector.ts                   |  10 +
 src/utils/index.ts                            |   4 +
 src/utils/misc/dom-helpers.d.ts               |   3 +
 src/utils/misc/eventWrapper.ts                |   9 +
 src/utils/misc/index.ts                       |   4 +
 src/utils/misc/isDisabled.ts                  |   5 +
 src/utils/misc/isInstanceOfElement.ts         |  40 ++
 .../isLabelWithInternallyDisabledControl.ts   |  16 +
 src/utils/misc/isVisible.ts                   |  18 +
 25 files changed, 484 insertions(+), 384 deletions(-)
 delete mode 100644 src/utils.js
 create mode 100644 src/utils/click/getMouseEventOptions.ts
 create mode 100644 src/utils/click/index.ts
 create mode 100644 src/utils/click/isClickableInput.ts
 create mode 100644 src/utils/edit/buildTimeValue.ts
 create mode 100644 src/utils/edit/calculateNewValue.ts
 create mode 100644 src/utils/edit/getSelectionRange.ts
 create mode 100644 src/utils/edit/getValue.ts
 create mode 100644 src/utils/edit/index.ts
 create mode 100644 src/utils/edit/isContentEditable.ts
 create mode 100644 src/utils/edit/isValidDateValue.ts
 create mode 100644 src/utils/edit/isValidInputTimeValue.ts
 create mode 100644 src/utils/edit/setSelectionRangeIfNecessary.ts
 create mode 100644 src/utils/focus/getActiveElement.ts
 create mode 100644 src/utils/focus/index.ts
 create mode 100644 src/utils/focus/isFocusable.ts
 create mode 100644 src/utils/focus/selector.ts
 create mode 100644 src/utils/index.ts
 create mode 100644 src/utils/misc/dom-helpers.d.ts
 create mode 100644 src/utils/misc/eventWrapper.ts
 create mode 100644 src/utils/misc/index.ts
 create mode 100644 src/utils/misc/isDisabled.ts
 create mode 100644 src/utils/misc/isInstanceOfElement.ts
 create mode 100644 src/utils/misc/isLabelWithInternallyDisabledControl.ts
 create mode 100644 src/utils/misc/isVisible.ts

diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index b4825948..00000000
--- a/src/utils.js
+++ /dev/null
@@ -1,384 +0,0 @@
-import {getConfig} from '@testing-library/dom'
-import {getWindowFromNode} from '@testing-library/dom/dist/helpers'
-
-// isInstanceOfElement can be removed once the peerDependency for @testing-library/dom is bumped to a version that includes https://github.com/testing-library/dom-testing-library/pull/885
-/**
- * Check if an element is of a given type.
- *
- * @param {Element} element The element to test
- * @param {string} elementType Constructor name. E.g. 'HTMLSelectElement'
- */
-function isInstanceOfElement(element, elementType) {
-  try {
-    const window = getWindowFromNode(element)
-    // Window usually has the element constructors as properties but is not required to do so per specs
-    if (typeof window[elementType] === 'function') {
-      return element instanceof window[elementType]
-    }
-  } catch (e) {
-    // The document might not be associated with a window
-  }
-
-  // Fall back to the constructor name as workaround for test environments that
-  // a) not associate the document with a window
-  // b) not provide the constructor as property of window
-  if (/^HTML(\w+)Element$/.test(element.constructor.name)) {
-    return element.constructor.name === elementType
-  }
-
-  // The user passed some node that is not created in a browser-like environment
-  throw new Error(
-    `Unable to verify if element is instance of ${elementType}. Please file an issue describing your test environment: https://github.com/testing-library/dom-testing-library/issues/new`,
-  )
-}
-
-function isMousePressEvent(event) {
-  return (
-    event === 'mousedown' ||
-    event === 'mouseup' ||
-    event === 'click' ||
-    event === 'dblclick'
-  )
-}
-
-function invert(map) {
-  const res = {}
-  for (const key of Object.keys(map)) {
-    res[map[key]] = key
-  }
-
-  return res
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-const BUTTONS_TO_NAMES = {
-  0: 'none',
-  1: 'primary',
-  2: 'secondary',
-  4: 'auxiliary',
-}
-const NAMES_TO_BUTTONS = invert(BUTTONS_TO_NAMES)
-
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-const BUTTON_TO_NAMES = {
-  0: 'primary',
-  1: 'auxiliary',
-  2: 'secondary',
-}
-
-const NAMES_TO_BUTTON = invert(BUTTON_TO_NAMES)
-
-function convertMouseButtons(event, init, property, mapping) {
-  if (!isMousePressEvent(event)) {
-    return 0
-  }
-
-  if (init[property] != null) {
-    return init[property]
-  }
-
-  if (init.buttons != null) {
-    // not sure how to test this. Feel free to try and add a test if you want.
-    // istanbul ignore next
-    return mapping[BUTTONS_TO_NAMES[init.buttons]] || 0
-  }
-
-  if (init.button != null) {
-    // not sure how to test this. Feel free to try and add a test if you want.
-    // istanbul ignore next
-    return mapping[BUTTON_TO_NAMES[init.button]] || 0
-  }
-
-  return property != 'button' && isMousePressEvent(event) ? 1 : 0
-}
-
-function getMouseEventOptions(event, init, clickCount = 0) {
-  init = init || {}
-  return {
-    ...init,
-    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-    detail:
-      event === 'mousedown' || event === 'mouseup' || event === 'click'
-        ? 1 + clickCount
-        : clickCount,
-    buttons: convertMouseButtons(event, init, 'buttons', NAMES_TO_BUTTONS),
-    button: convertMouseButtons(event, init, 'button', NAMES_TO_BUTTON),
-  }
-}
-
-// Absolutely NO events fire on label elements that contain their control
-// if that control is disabled. NUTS!
-// no joke. There are NO events for: <label><input disabled /><label>
-function isLabelWithInternallyDisabledControl(element) {
-  return (
-    element.tagName === 'LABEL' &&
-    element.control?.disabled &&
-    element.contains(element.control)
-  )
-}
-
-function getActiveElement(document) {
-  const activeElement = document.activeElement
-  if (activeElement?.shadowRoot) {
-    return getActiveElement(activeElement.shadowRoot)
-  } else {
-    return activeElement
-  }
-}
-
-function supportsMaxLength(element) {
-  if (element.tagName === 'TEXTAREA') return true
-
-  if (element.tagName === 'INPUT') {
-    const type = element.getAttribute('type')
-
-    // Missing value default is "text"
-    if (!type) return true
-
-    // https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
-    if (type.match(/email|password|search|telephone|text|url/)) return true
-  }
-
-  return false
-}
-
-function getSelectionRange(element) {
-  if (isContentEditable(element)) {
-    const range = element.ownerDocument.getSelection().getRangeAt(0)
-
-    return {selectionStart: range.startOffset, selectionEnd: range.endOffset}
-  }
-
-  return {
-    selectionStart: element.selectionStart,
-    selectionEnd: element.selectionEnd,
-  }
-}
-
-//jsdom is not supporting isContentEditable
-function isContentEditable(element) {
-  return (
-    element.hasAttribute('contenteditable') &&
-    (element.getAttribute('contenteditable') == 'true' ||
-      element.getAttribute('contenteditable') == '')
-  )
-}
-
-function getValue(element) {
-  if (isContentEditable(element)) {
-    return element.textContent
-  }
-  return element.value
-}
-
-function calculateNewValue(newEntry, element) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-  const value = getValue(element)
-
-  // can't use .maxLength property because of a jsdom bug:
-  // https://github.com/jsdom/jsdom/issues/2927
-  const maxLength = Number(element.getAttribute('maxlength') ?? -1)
-  let newValue, newSelectionStart
-
-  if (selectionStart === null) {
-    // at the end of an input type that does not support selection ranges
-    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-    newValue = value + newEntry
-  } else if (selectionStart === selectionEnd) {
-    if (selectionStart === 0) {
-      // at the beginning of the input
-      newValue = newEntry + value
-    } else if (selectionStart === value.length) {
-      // at the end of the input
-      newValue = value + newEntry
-    } else {
-      // in the middle of the input
-      newValue =
-        value.slice(0, selectionStart) + newEntry + value.slice(selectionEnd)
-    }
-    newSelectionStart = selectionStart + newEntry.length
-  } else {
-    // we have something selected
-    const firstPart = value.slice(0, selectionStart) + newEntry
-    newValue = firstPart + value.slice(selectionEnd)
-    newSelectionStart = firstPart.length
-  }
-
-  if (element.type === 'date' && !isValidDateValue(element, newValue)) {
-    newValue = value
-  }
-
-  if (element.type === 'time' && !isValidInputTimeValue(element, newValue)) {
-    if (isValidInputTimeValue(element, newEntry)) {
-      newValue = newEntry
-    } else {
-      newValue = value
-    }
-  }
-
-  if (!supportsMaxLength(element) || maxLength < 0) {
-    return {newValue, newSelectionStart}
-  } else {
-    return {
-      newValue: newValue.slice(0, maxLength),
-      newSelectionStart:
-        newSelectionStart > maxLength ? maxLength : newSelectionStart,
-    }
-  }
-}
-
-function setSelectionRangeIfNecessary(
-  element,
-  newSelectionStart,
-  newSelectionEnd,
-) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-
-  if (
-    !isContentEditable(element) &&
-    (!element.setSelectionRange || selectionStart === null)
-  ) {
-    // cannot set selection
-    return
-  }
-  if (
-    selectionStart !== newSelectionStart ||
-    selectionEnd !== newSelectionStart
-  ) {
-    if (isContentEditable(element)) {
-      const range = element.ownerDocument.createRange()
-      range.selectNodeContents(element)
-      range.setStart(element.firstChild, newSelectionStart)
-      range.setEnd(element.firstChild, newSelectionEnd)
-      element.ownerDocument.getSelection().removeAllRanges()
-      element.ownerDocument.getSelection().addRange(range)
-    } else {
-      element.setSelectionRange(newSelectionStart, newSelectionEnd)
-    }
-  }
-}
-
-const FOCUSABLE_SELECTOR = [
-  'input:not([type=hidden]):not([disabled])',
-  'button:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[contenteditable=""]',
-  '[contenteditable="true"]',
-  'a[href]',
-  '[tabindex]:not([disabled])',
-].join(', ')
-
-function isFocusable(element) {
-  return (
-    !isLabelWithInternallyDisabledControl(element) &&
-    element?.matches(FOCUSABLE_SELECTOR)
-  )
-}
-
-const CLICKABLE_INPUT_TYPES = [
-  'button',
-  'color',
-  'file',
-  'image',
-  'reset',
-  'submit',
-]
-
-function isClickableInput(element) {
-  return (
-    element.tagName === 'BUTTON' ||
-    (isInstanceOfElement(element, 'HTMLInputElement') &&
-      CLICKABLE_INPUT_TYPES.includes(element.type))
-  )
-}
-
-function isVisible(element) {
-  const getComputedStyle = getWindowFromNode(element).getComputedStyle
-
-  for(; element && element.ownerDocument; element = element.parentNode) {
-    const display = getComputedStyle(element).display
-    if (display === 'none') {
-      return false
-    }
-  }
-
-  return true
-}
-
-function eventWrapper(cb) {
-  let result
-  getConfig().eventWrapper(() => {
-    result = cb()
-  })
-  return result
-}
-
-function isValidDateValue(element, value) {
-  if (element.type !== 'date') return false
-
-  const clone = element.cloneNode()
-  clone.value = value
-  return clone.value === value
-}
-
-function buildTimeValue(value) {
-  function build(onlyDigitsValue, index) {
-    const hours = onlyDigitsValue.slice(0, index)
-    const validHours = Math.min(parseInt(hours, 10), 23)
-    const minuteCharacters = onlyDigitsValue.slice(index)
-    const parsedMinutes = parseInt(minuteCharacters, 10)
-    const validMinutes = Math.min(parsedMinutes, 59)
-    return `${validHours
-      .toString()
-      .padStart(2, '0')}:${validMinutes.toString().padStart(2, '0')}`
-  }
-
-  const onlyDigitsValue = value.replace(/\D/g, '')
-  if (onlyDigitsValue.length < 2) {
-    return value
-  }
-  const firstDigit = parseInt(onlyDigitsValue[0], 10)
-  const secondDigit = parseInt(onlyDigitsValue[1], 10)
-  if (firstDigit >= 3 || (firstDigit === 2 && secondDigit >= 4)) {
-    let index
-    if (firstDigit >= 3) {
-      index = 1
-    } else {
-      index = 2
-    }
-    return build(onlyDigitsValue, index)
-  }
-  if (value.length === 2) {
-    return value
-  }
-  return build(onlyDigitsValue, 2)
-}
-
-function isValidInputTimeValue(element, timeValue) {
-  if (element.type !== 'time') return false
-
-  const clone = element.cloneNode()
-  clone.value = timeValue
-  return clone.value === timeValue
-}
-
-export {
-  FOCUSABLE_SELECTOR,
-  isFocusable,
-  isClickableInput,
-  getMouseEventOptions,
-  isLabelWithInternallyDisabledControl,
-  getActiveElement,
-  calculateNewValue,
-  setSelectionRangeIfNecessary,
-  eventWrapper,
-  isValidDateValue,
-  isValidInputTimeValue,
-  buildTimeValue,
-  getValue,
-  getSelectionRange,
-  isContentEditable,
-  isInstanceOfElement,
-  isVisible,
-}
diff --git a/src/utils/click/getMouseEventOptions.ts b/src/utils/click/getMouseEventOptions.ts
new file mode 100644
index 00000000..6569c9e3
--- /dev/null
+++ b/src/utils/click/getMouseEventOptions.ts
@@ -0,0 +1,75 @@
+function isMousePressEvent(event: string) {
+  return (
+    event === 'mousedown' ||
+    event === 'mouseup' ||
+    event === 'click' ||
+    event === 'dblclick'
+  )
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+const BUTTONS_NAMES = {
+  none: 0,
+  primary: 1,
+  secondary: 2,
+  auxiliary: 4,
+} as const
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+const BUTTON_NAMES = {
+  primary: 0,
+  auxiliary: 1,
+  secondary: 2,
+} as const
+
+function translateButtonNumber(value: number, from: 'buttons' | 'button') {
+  const [mapIn, mapOut] =
+    from === 'button'
+      ? [BUTTON_NAMES, BUTTONS_NAMES]
+      : [BUTTONS_NAMES, BUTTON_NAMES]
+
+  const name = Object.entries(mapIn).find(([, i]) => i === value)?.[0]
+
+  // istanbul ignore next
+  return name && Object.prototype.hasOwnProperty.call(mapOut, name)
+    ? mapOut[name as keyof typeof mapOut]
+    : 0
+}
+
+function convertMouseButtons(
+  event: string,
+  init: MouseEventInit,
+  property: 'buttons' | 'button',
+): number {
+  if (!isMousePressEvent(event)) {
+    return 0
+  }
+
+  if (typeof init[property] === 'number') {
+    return init[property] as number
+  } else if (property === 'button' && typeof init.buttons === 'number') {
+    return translateButtonNumber(init.buttons, 'buttons')
+  } else if (property === 'buttons' && typeof init.button === 'number') {
+    return translateButtonNumber(init.button, 'button')
+  }
+
+  return property != 'button' && isMousePressEvent(event) ? 1 : 0
+}
+
+export function getMouseEventOptions(
+  event: string,
+  init?: MouseEventInit,
+  clickCount = 0,
+) {
+  init = init ?? {}
+  return {
+    ...init,
+    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+    detail:
+      event === 'mousedown' || event === 'mouseup' || event === 'click'
+        ? 1 + clickCount
+        : clickCount,
+    buttons: convertMouseButtons(event, init, 'buttons'),
+    button: convertMouseButtons(event, init, 'button'),
+  }
+}
diff --git a/src/utils/click/index.ts b/src/utils/click/index.ts
new file mode 100644
index 00000000..d8f3f907
--- /dev/null
+++ b/src/utils/click/index.ts
@@ -0,0 +1,2 @@
+export * from './getMouseEventOptions'
+export * from './isClickableInput'
diff --git a/src/utils/click/isClickableInput.ts b/src/utils/click/isClickableInput.ts
new file mode 100644
index 00000000..21fef8f9
--- /dev/null
+++ b/src/utils/click/isClickableInput.ts
@@ -0,0 +1,18 @@
+import {isInstanceOfElement} from '../misc'
+
+const CLICKABLE_INPUT_TYPES = [
+  'button',
+  'color',
+  'file',
+  'image',
+  'reset',
+  'submit',
+]
+
+export function isClickableInput(element: Element): boolean {
+  return (
+    element.tagName === 'BUTTON' ||
+    (isInstanceOfElement(element, 'HTMLInputElement') &&
+      CLICKABLE_INPUT_TYPES.includes((element as HTMLInputElement).type))
+  )
+}
diff --git a/src/utils/edit/buildTimeValue.ts b/src/utils/edit/buildTimeValue.ts
new file mode 100644
index 00000000..145b65e1
--- /dev/null
+++ b/src/utils/edit/buildTimeValue.ts
@@ -0,0 +1,32 @@
+export function buildTimeValue(value: string): string {
+  const onlyDigitsValue = value.replace(/\D/g, '')
+  if (onlyDigitsValue.length < 2) {
+    return value
+  }
+  const firstDigit = parseInt(onlyDigitsValue[0], 10)
+  const secondDigit = parseInt(onlyDigitsValue[1], 10)
+  if (firstDigit >= 3 || (firstDigit === 2 && secondDigit >= 4)) {
+    let index
+    if (firstDigit >= 3) {
+      index = 1
+    } else {
+      index = 2
+    }
+    return build(onlyDigitsValue, index)
+  }
+  if (value.length === 2) {
+    return value
+  }
+  return build(onlyDigitsValue, 2)
+}
+
+function build(onlyDigitsValue: string, index: number): string {
+  const hours = onlyDigitsValue.slice(0, index)
+  const validHours = Math.min(parseInt(hours, 10), 23)
+  const minuteCharacters = onlyDigitsValue.slice(index)
+  const parsedMinutes = parseInt(minuteCharacters, 10)
+  const validMinutes = Math.min(parsedMinutes, 59)
+  return `${validHours
+    .toString()
+    .padStart(2, '0')}:${validMinutes.toString().padStart(2, '0')}`
+}
diff --git a/src/utils/edit/calculateNewValue.ts b/src/utils/edit/calculateNewValue.ts
new file mode 100644
index 00000000..6fbff870
--- /dev/null
+++ b/src/utils/edit/calculateNewValue.ts
@@ -0,0 +1,94 @@
+import {getSelectionRange} from './getSelectionRange'
+import {getValue} from './getValue'
+import {isValidDateValue} from './isValidDateValue'
+import {isValidInputTimeValue} from './isValidInputTimeValue'
+
+export function calculateNewValue(
+  newEntry: string,
+  element: HTMLElement,
+): {
+  newValue: string
+  newSelectionStart: number
+} {
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+  const value = getValue(element)
+
+  // can't use .maxLength property because of a jsdom bug:
+  // https://github.com/jsdom/jsdom/issues/2927
+  const maxLength = Number(element.getAttribute('maxlength') ?? -1)
+
+  let newValue: string, newSelectionStart: number
+
+  if (selectionStart === null) {
+    // at the end of an input type that does not support selection ranges
+    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+    newValue = `${value}${newEntry}`
+    newSelectionStart = newValue.length
+  } else if (selectionStart === selectionEnd) {
+    if (selectionStart === 0) {
+      // at the beginning of the input
+      newValue = `${newEntry}${value}`
+    } else if (selectionStart === value?.length) {
+      // at the end of the input
+      newValue = `${value}${newEntry}`
+    } else {
+      // in the middle of the input
+      newValue = `${value?.slice(0, selectionStart)}${newEntry}${value?.slice(
+        selectionEnd,
+      )}`
+    }
+    newSelectionStart = selectionStart + newEntry.length
+  } else {
+    // we have something selected
+    const firstPart = `${value?.slice(0, selectionStart)}${newEntry}`
+    newValue = `${firstPart}${value?.slice(selectionEnd as number)}`
+    newSelectionStart = firstPart.length
+  }
+
+  if (
+    (element as HTMLInputElement).type === 'date' &&
+    !isValidDateValue(element, newValue)
+  ) {
+    newValue = value as string
+  }
+
+  if (
+    (element as HTMLInputElement).type === 'time' &&
+    !isValidInputTimeValue(element, newValue)
+  ) {
+    if (isValidInputTimeValue(element, newEntry)) {
+      newValue = newEntry
+    } else {
+      newValue = value as string
+    }
+  }
+
+  if (!supportsMaxLength(element) || maxLength < 0) {
+    return {
+      newValue,
+      newSelectionStart,
+    }
+  } else {
+    return {
+      newValue: newValue.slice(0, maxLength),
+      newSelectionStart:
+        newSelectionStart > maxLength ? maxLength : newSelectionStart,
+    }
+  }
+}
+
+function supportsMaxLength(element: Element) {
+  if (element.tagName === 'TEXTAREA') return true
+
+  if (element.tagName === 'INPUT') {
+    const type = element.getAttribute('type')
+
+    // Missing value default is "text"
+    if (!type) return true
+
+    // https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
+    if (type.match(/email|password|search|telephone|text|url/)) return true
+  }
+
+  return false
+}
diff --git a/src/utils/edit/getSelectionRange.ts b/src/utils/edit/getSelectionRange.ts
new file mode 100644
index 00000000..7d8476f6
--- /dev/null
+++ b/src/utils/edit/getSelectionRange.ts
@@ -0,0 +1,31 @@
+import {isContentEditable} from './isContentEditable'
+
+export function getSelectionRange(
+  element: Element,
+): {
+  selectionStart: number | null
+  selectionEnd: number | null
+} {
+  if (isContentEditable(element)) {
+    const selection = element.ownerDocument.getSelection()
+    const range = selection?.getRangeAt(0)
+
+    // istanbul ignore else
+    if (range) {
+      return {
+        selectionStart: range.startOffset,
+        selectionEnd: range.endOffset,
+      }
+    } else {
+      return {
+        selectionStart: null,
+        selectionEnd: null,
+      }
+    }
+  }
+
+  return {
+    selectionStart: (element as HTMLInputElement).selectionStart,
+    selectionEnd: (element as HTMLInputElement).selectionEnd,
+  }
+}
diff --git a/src/utils/edit/getValue.ts b/src/utils/edit/getValue.ts
new file mode 100644
index 00000000..2dc0d786
--- /dev/null
+++ b/src/utils/edit/getValue.ts
@@ -0,0 +1,8 @@
+import {isContentEditable} from './isContentEditable'
+
+export function getValue(element: Element): string | null {
+  if (isContentEditable(element)) {
+    return element.textContent
+  }
+  return (element as HTMLInputElement).value
+}
diff --git a/src/utils/edit/index.ts b/src/utils/edit/index.ts
new file mode 100644
index 00000000..658bf669
--- /dev/null
+++ b/src/utils/edit/index.ts
@@ -0,0 +1,8 @@
+export * from './buildTimeValue'
+export * from './calculateNewValue'
+export * from './getSelectionRange'
+export * from './getValue'
+export * from './isContentEditable'
+export * from './isValidDateValue'
+export * from './isValidInputTimeValue'
+export * from './setSelectionRangeIfNecessary'
diff --git a/src/utils/edit/isContentEditable.ts b/src/utils/edit/isContentEditable.ts
new file mode 100644
index 00000000..877e63a8
--- /dev/null
+++ b/src/utils/edit/isContentEditable.ts
@@ -0,0 +1,8 @@
+//jsdom is not supporting isContentEditable
+export function isContentEditable(element: Element): boolean {
+  return (
+    element.hasAttribute('contenteditable') &&
+    (element.getAttribute('contenteditable') == 'true' ||
+      element.getAttribute('contenteditable') == '')
+  )
+}
diff --git a/src/utils/edit/isValidDateValue.ts b/src/utils/edit/isValidDateValue.ts
new file mode 100644
index 00000000..b21e4db8
--- /dev/null
+++ b/src/utils/edit/isValidDateValue.ts
@@ -0,0 +1,14 @@
+import {isInstanceOfElement} from '../misc'
+
+export function isValidDateValue(element: Element, value: string): boolean {
+  if (
+    !isInstanceOfElement(element, 'HTMLInputElement') ||
+    (element as HTMLInputElement).type !== 'date'
+  ) {
+    return false
+  }
+
+  const clone = element.cloneNode() as HTMLInputElement
+  clone.value = value
+  return clone.value === value
+}
diff --git a/src/utils/edit/isValidInputTimeValue.ts b/src/utils/edit/isValidInputTimeValue.ts
new file mode 100644
index 00000000..fccf95f1
--- /dev/null
+++ b/src/utils/edit/isValidInputTimeValue.ts
@@ -0,0 +1,17 @@
+import {isInstanceOfElement} from '../misc'
+
+export function isValidInputTimeValue(
+  element: Element,
+  timeValue: string,
+): boolean {
+  if (
+    !isInstanceOfElement(element, 'HTMLInputElement') ||
+    (element as HTMLInputElement).type !== 'time'
+  ) {
+    return false
+  }
+
+  const clone = element.cloneNode() as HTMLInputElement
+  clone.value = timeValue
+  return clone.value === timeValue
+}
diff --git a/src/utils/edit/setSelectionRangeIfNecessary.ts b/src/utils/edit/setSelectionRangeIfNecessary.ts
new file mode 100644
index 00000000..2a4078ed
--- /dev/null
+++ b/src/utils/edit/setSelectionRangeIfNecessary.ts
@@ -0,0 +1,46 @@
+import {isContentEditable} from './isContentEditable'
+import {getSelectionRange} from './getSelectionRange'
+
+export function setSelectionRangeIfNecessary(
+  element: Element,
+  newSelectionStart: number,
+  newSelectionEnd: number,
+) {
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+
+  if (
+    !isContentEditable(element) &&
+    (!(element as {setSelectionRange?: unknown}).setSelectionRange ||
+      selectionStart === null)
+  ) {
+    // cannot set selection
+    return
+  }
+  if (
+    selectionStart !== newSelectionStart ||
+    selectionEnd !== newSelectionStart
+  ) {
+    if (isContentEditable(element)) {
+      const range = element.ownerDocument.createRange()
+      range.selectNodeContents(element)
+
+      // istanbul ignore else
+      if (element.firstChild) {
+        range.setStart(element.firstChild, newSelectionStart)
+        range.setEnd(element.firstChild, newSelectionEnd)
+      }
+
+      const selection = element.ownerDocument.getSelection()
+      // istanbul ignore else
+      if (selection) {
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+    } else {
+      ;(element as HTMLInputElement).setSelectionRange(
+        newSelectionStart,
+        newSelectionEnd,
+      )
+    }
+  }
+}
diff --git a/src/utils/focus/getActiveElement.ts b/src/utils/focus/getActiveElement.ts
new file mode 100644
index 00000000..6d28ce79
--- /dev/null
+++ b/src/utils/focus/getActiveElement.ts
@@ -0,0 +1,10 @@
+export function getActiveElement(
+  document: Document | ShadowRoot,
+): Element | null {
+  const activeElement = document.activeElement
+  if (activeElement?.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot)
+  } else {
+    return activeElement
+  }
+}
diff --git a/src/utils/focus/index.ts b/src/utils/focus/index.ts
new file mode 100644
index 00000000..79d60fd5
--- /dev/null
+++ b/src/utils/focus/index.ts
@@ -0,0 +1,3 @@
+export * from './getActiveElement'
+export * from './isFocusable'
+export * from './selector'
diff --git a/src/utils/focus/isFocusable.ts b/src/utils/focus/isFocusable.ts
new file mode 100644
index 00000000..7a0f2606
--- /dev/null
+++ b/src/utils/focus/isFocusable.ts
@@ -0,0 +1,9 @@
+import {isLabelWithInternallyDisabledControl} from '../misc'
+import {FOCUSABLE_SELECTOR} from './selector'
+
+export function isFocusable(element: Element): element is HTMLElement {
+  return (
+    !isLabelWithInternallyDisabledControl(element) &&
+    element.matches(FOCUSABLE_SELECTOR)
+  )
+}
diff --git a/src/utils/focus/selector.ts b/src/utils/focus/selector.ts
new file mode 100644
index 00000000..52d500fa
--- /dev/null
+++ b/src/utils/focus/selector.ts
@@ -0,0 +1,10 @@
+export const FOCUSABLE_SELECTOR = [
+  'input:not([type=hidden]):not([disabled])',
+  'button:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  'a[href]',
+  '[tabindex]:not([disabled])',
+].join(', ')
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..e9a99d78
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,4 @@
+export * from './click'
+export * from './edit'
+export * from './focus'
+export * from './misc'
diff --git a/src/utils/misc/dom-helpers.d.ts b/src/utils/misc/dom-helpers.d.ts
new file mode 100644
index 00000000..a1945225
--- /dev/null
+++ b/src/utils/misc/dom-helpers.d.ts
@@ -0,0 +1,3 @@
+declare module '@testing-library/dom/dist/helpers' {
+  export function getWindowFromNode(node: Node): Window
+}
diff --git a/src/utils/misc/eventWrapper.ts b/src/utils/misc/eventWrapper.ts
new file mode 100644
index 00000000..12fc3f27
--- /dev/null
+++ b/src/utils/misc/eventWrapper.ts
@@ -0,0 +1,9 @@
+import {getConfig} from '@testing-library/dom'
+
+export function eventWrapper<T>(cb: () => T): T | undefined {
+  let result
+  getConfig().eventWrapper(() => {
+    result = cb()
+  })
+  return result
+}
diff --git a/src/utils/misc/index.ts b/src/utils/misc/index.ts
new file mode 100644
index 00000000..7ddba14a
--- /dev/null
+++ b/src/utils/misc/index.ts
@@ -0,0 +1,4 @@
+export * from './eventWrapper'
+export * from './isInstanceOfElement'
+export * from './isLabelWithInternallyDisabledControl'
+export * from './isVisible'
diff --git a/src/utils/misc/isDisabled.ts b/src/utils/misc/isDisabled.ts
new file mode 100644
index 00000000..ec700418
--- /dev/null
+++ b/src/utils/misc/isDisabled.ts
@@ -0,0 +1,5 @@
+// This should probably be extended with checking the element type
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
+export function isDisabled(element: Element): boolean {
+  return Boolean((element as {disabled?: boolean}).disabled)
+}
diff --git a/src/utils/misc/isInstanceOfElement.ts b/src/utils/misc/isInstanceOfElement.ts
new file mode 100644
index 00000000..a2302c24
--- /dev/null
+++ b/src/utils/misc/isInstanceOfElement.ts
@@ -0,0 +1,40 @@
+import {getWindowFromNode} from '@testing-library/dom/dist/helpers'
+
+// isInstanceOfElement can be removed once the peerDependency for @testing-library/dom is bumped to a version that includes https://github.com/testing-library/dom-testing-library/pull/885
+/**
+ * Check if an element is of a given type.
+ *
+ * @param {Element} element The element to test
+ * @param {string} elementType Constructor name. E.g. 'HTMLSelectElement'
+ */
+export function isInstanceOfElement(
+  element: Element,
+  elementType: string,
+  // TODO: make this a type guard
+  // This should be typed as a type guard, but there is no map with constructor names to element constructors.
+  // Window does not have the constructors as properties.
+): boolean {
+  try {
+    // Window usually has the element constructors as properties but is not required to do so per specs
+    const constructor = getWindowFromNode(element)[
+      elementType as keyof Window
+    ] as unknown
+    if (typeof constructor === 'function') {
+      return element instanceof constructor
+    }
+  } catch {
+    // The document might not be associated with a window
+  }
+
+  // Fall back to the constructor name as workaround for test environments that
+  // a) not associate the document with a window
+  // b) not provide the constructor as property of window
+  if (/^HTML(\w+)Element$/.test(element.constructor.name)) {
+    return element.constructor.name === elementType
+  }
+
+  // The user passed some node that is not created in a browser-like environment
+  throw new Error(
+    `Unable to verify if element is instance of ${elementType}. Please file an issue describing your test environment: https://github.com/testing-library/dom-testing-library/issues/new`,
+  )
+}
diff --git a/src/utils/misc/isLabelWithInternallyDisabledControl.ts b/src/utils/misc/isLabelWithInternallyDisabledControl.ts
new file mode 100644
index 00000000..86020a19
--- /dev/null
+++ b/src/utils/misc/isLabelWithInternallyDisabledControl.ts
@@ -0,0 +1,16 @@
+// Absolutely NO events fire on label elements that contain their control
+// if that control is disabled. NUTS!
+
+import {isDisabled} from './isDisabled'
+import {isInstanceOfElement} from './isInstanceOfElement'
+
+// no joke. There are NO events for: <label><input disabled /><label>
+export function isLabelWithInternallyDisabledControl(
+  element: Element,
+): boolean {
+  if (!isInstanceOfElement(element, 'HTMLLabelElement')) {
+    return false
+  }
+  const control = (element as HTMLLabelElement).control
+  return Boolean(control && element.contains(control) && isDisabled(control))
+}
diff --git a/src/utils/misc/isVisible.ts b/src/utils/misc/isVisible.ts
new file mode 100644
index 00000000..989b6171
--- /dev/null
+++ b/src/utils/misc/isVisible.ts
@@ -0,0 +1,18 @@
+import {getWindowFromNode} from '@testing-library/dom/dist/helpers'
+
+export function isVisible(element: Element): boolean {
+  const window = getWindowFromNode(element)
+
+  for (
+    let el: Element | null = element;
+    el?.ownerDocument;
+    el = el.parentElement
+  ) {
+    const display = window.getComputedStyle(el).display
+    if (display === 'none') {
+      return false
+    }
+  }
+
+  return true
+}

From fb61f97239e584318df0329036f09f08c1bfa4db Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 9 Mar 2021 22:31:21 +0100
Subject: [PATCH 03/43] refactor: convert and restructure type

---
 src/type.js                                   | 800 ------------------
 src/type/callbacks.ts                         |  13 +
 src/type/index.ts                             |  23 +
 src/type/modifierCallbackMap.ts               | 117 +++
 .../shared/fireChangeForInputTimeIfValid.ts   |  17 +
 src/type/shared/fireInputEventIfNeeded.ts     |  60 ++
 src/type/shared/index.ts                      |   3 +
 src/type/shared/setSelectionRange.ts          |  30 +
 .../specialCharCallbackMap/handleArrowDown.ts |  26 +
 .../specialCharCallbackMap/handleArrowUp.ts   |  26 +
 .../specialCharCallbackMap/handleBackspace.ts |  84 ++
 src/type/specialCharCallbackMap/handleDel.ts  |  71 ++
 .../specialCharCallbackMap/handleEnter.ts     |  88 ++
 src/type/specialCharCallbackMap/handleEsc.ts  |  25 +
 .../specialCharCallbackMap/handleSelectall.ts |  11 +
 .../specialCharCallbackMap/handleSpace.ts     |  58 ++
 src/type/specialCharCallbackMap/index.ts      |  26 +
 .../specialCharCallbackMap/navigationKey.ts}  |  68 +-
 src/type/specialCharMap.ts                    |  15 +
 src/type/typeCharacter.ts                     | 120 +++
 src/type/typeImplementation.ts                | 195 +++++
 src/utils/edit/getValue.ts                    |   6 +-
 src/utils/misc/index.ts                       |   1 +
 src/utils/misc/isDisabled.ts                  |   4 +-
 24 files changed, 1053 insertions(+), 834 deletions(-)
 delete mode 100644 src/type.js
 create mode 100644 src/type/callbacks.ts
 create mode 100644 src/type/index.ts
 create mode 100644 src/type/modifierCallbackMap.ts
 create mode 100644 src/type/shared/fireChangeForInputTimeIfValid.ts
 create mode 100644 src/type/shared/fireInputEventIfNeeded.ts
 create mode 100644 src/type/shared/index.ts
 create mode 100644 src/type/shared/setSelectionRange.ts
 create mode 100644 src/type/specialCharCallbackMap/handleArrowDown.ts
 create mode 100644 src/type/specialCharCallbackMap/handleArrowUp.ts
 create mode 100644 src/type/specialCharCallbackMap/handleBackspace.ts
 create mode 100644 src/type/specialCharCallbackMap/handleDel.ts
 create mode 100644 src/type/specialCharCallbackMap/handleEnter.ts
 create mode 100644 src/type/specialCharCallbackMap/handleEsc.ts
 create mode 100644 src/type/specialCharCallbackMap/handleSelectall.ts
 create mode 100644 src/type/specialCharCallbackMap/handleSpace.ts
 create mode 100644 src/type/specialCharCallbackMap/index.ts
 rename src/{keys/navigation-key.js => type/specialCharCallbackMap/navigationKey.ts} (58%)
 create mode 100644 src/type/specialCharMap.ts
 create mode 100644 src/type/typeCharacter.ts
 create mode 100644 src/type/typeImplementation.ts

diff --git a/src/type.js b/src/type.js
deleted file mode 100644
index 125c1968..00000000
--- a/src/type.js
+++ /dev/null
@@ -1,800 +0,0 @@
-// TODO: wrap in asyncWrapper
-import {
-  fireEvent,
-  getConfig as getDOMTestingLibraryConfig,
-} from '@testing-library/dom'
-
-import {
-  getActiveElement,
-  calculateNewValue,
-  setSelectionRangeIfNecessary,
-  isClickableInput,
-  isValidDateValue,
-  getSelectionRange,
-  getValue,
-  isContentEditable,
-  isValidInputTimeValue,
-  buildTimeValue,
-  isInstanceOfElement,
-} from './utils'
-import {click} from './click'
-import {navigationKey} from './keys/navigation-key'
-
-const modifierCallbackMap = {
-  ...createModifierCallbackEntries({
-    name: 'shift',
-    key: 'Shift',
-    keyCode: 16,
-    modifierProperty: 'shiftKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'ctrl',
-    key: 'Control',
-    keyCode: 17,
-    modifierProperty: 'ctrlKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'alt',
-    key: 'Alt',
-    keyCode: 18,
-    modifierProperty: 'altKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'meta',
-    key: 'Meta',
-    keyCode: 93,
-    modifierProperty: 'metaKey',
-  }),
-  // capslock is inline because of the need to fire both keydown and keyup on use, while preserving the modifier state.
-  '{capslock}': function capslockOn({currentElement, eventOverrides}) {
-    const newEventOverrides = {modifierCapsLock: true}
-
-    fireEvent.keyDown(currentElement(), {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-    fireEvent.keyUp(currentElement(), {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  },
-  '{/capslock}': function capslockOff({currentElement, eventOverrides}) {
-    const newEventOverrides = {modifierCapsLock: false}
-
-    fireEvent.keyDown(currentElement(), {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-    fireEvent.keyUp(currentElement(), {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  },
-}
-
-const specialCharMap = {
-  arrowLeft: '{arrowleft}',
-  arrowRight: '{arrowright}',
-  arrowDown: '{arrowdown}',
-  arrowUp: '{arrowup}',
-  enter: '{enter}',
-  escape: '{esc}',
-  delete: '{del}',
-  backspace: '{backspace}',
-  home: '{home}',
-  end: '{end}',
-  selectAll: '{selectall}',
-  space: '{space}',
-  whitespace: ' ',
-}
-
-const specialCharCallbackMap = {
-  [specialCharMap.arrowLeft]: navigationKey('ArrowLeft'),
-  [specialCharMap.arrowRight]: navigationKey('ArrowRight'),
-  [specialCharMap.arrowDown]: handleArrowDown,
-  [specialCharMap.arrowUp]: handleArrowUp,
-  [specialCharMap.home]: navigationKey('Home'),
-  [specialCharMap.end]: navigationKey('End'),
-  [specialCharMap.enter]: handleEnter,
-  [specialCharMap.escape]: handleEsc,
-  [specialCharMap.delete]: handleDel,
-  [specialCharMap.backspace]: handleBackspace,
-  [specialCharMap.selectAll]: handleSelectall,
-  [specialCharMap.space]: handleSpace,
-  [specialCharMap.whitespace]: handleSpace,
-}
-
-function wait(time) {
-  return new Promise(resolve => setTimeout(() => resolve(), time))
-}
-
-// this needs to be wrapped in the event/asyncWrapper for React's act and angular's change detection
-// depending on whether it will be async.
-async function type(element, text, {delay = 0, ...options} = {}) {
-  // we do not want to wrap in the asyncWrapper if we're not
-  // going to actually be doing anything async, so we only wrap
-  // if the delay is greater than 0
-  let result
-  if (delay > 0) {
-    await getDOMTestingLibraryConfig().asyncWrapper(async () => {
-      result = await typeImpl(element, text, {delay, ...options})
-    })
-  } else {
-    result = typeImpl(element, text, {delay, ...options})
-  }
-  return result
-}
-
-async function typeImpl(
-  element,
-  text,
-  {
-    delay,
-    skipClick = false,
-    skipAutoClose = false,
-    initialSelectionStart,
-    initialSelectionEnd,
-  },
-) {
-  if (element.disabled) return
-
-  if (!skipClick) click(element)
-
-  if (isContentEditable(element) && document.getSelection().rangeCount === 0) {
-    const range = document.createRange()
-    range.setStart(element, 0)
-    range.setEnd(element, 0)
-    document.getSelection().addRange(range)
-  }
-  // The focused element could change between each event, so get the currently active element each time
-  const currentElement = () => getActiveElement(element.ownerDocument)
-
-  // by default, a new element has it's selection start and end at 0
-  // but most of the time when people call "type", they expect it to type
-  // at the end of the current input value. So, if the selection start
-  // and end are both the default of 0, then we'll go ahead and change
-  // them to the length of the current value.
-  // the only time it would make sense to pass the initialSelectionStart or
-  // initialSelectionEnd is if you have an input with a value and want to
-  // explicitely start typing with the cursor at 0. Not super common.
-  const value = getValue(currentElement())
-
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-
-  if (value != null && selectionStart === 0 && selectionEnd === 0) {
-    setSelectionRangeIfNecessary(
-      currentElement(),
-      initialSelectionStart ?? value.length,
-      initialSelectionEnd ?? value.length,
-    )
-  }
-
-  const eventCallbacks = queueCallbacks()
-  await runCallbacks(eventCallbacks)
-
-  function queueCallbacks() {
-    const callbacks = []
-    let remainingString = text
-
-    while (remainingString) {
-      const {callback, remainingString: newRemainingString} = getNextCallback(
-        remainingString,
-        skipAutoClose,
-      )
-      callbacks.push(callback)
-      remainingString = newRemainingString
-    }
-
-    return callbacks
-  }
-
-  async function runCallbacks(callbacks) {
-    const eventOverrides = {}
-    let prevWasMinus, prevWasPeriod, prevValue, typedValue
-    for (const callback of callbacks) {
-      if (delay > 0) await wait(delay)
-      if (!currentElement().disabled) {
-        const returnValue = callback({
-          currentElement,
-          prevWasMinus,
-          prevWasPeriod,
-          prevValue,
-          eventOverrides,
-          typedValue,
-        })
-        Object.assign(eventOverrides, returnValue?.eventOverrides)
-        prevWasMinus = returnValue?.prevWasMinus
-        prevWasPeriod = returnValue?.prevWasPeriod
-        prevValue = returnValue?.prevValue
-        typedValue = returnValue?.typedValue
-      }
-    }
-  }
-}
-
-function getNextCallback(remainingString, skipAutoClose) {
-  const modifierCallback = getModifierCallback(remainingString, skipAutoClose)
-  if (modifierCallback) {
-    return modifierCallback
-  }
-
-  const specialCharCallback = getSpecialCharCallback(remainingString)
-  if (specialCharCallback) {
-    return specialCharCallback
-  }
-
-  return getTypeCallback(remainingString)
-}
-
-function getModifierCallback(remainingString, skipAutoClose) {
-  const modifierKey = Object.keys(modifierCallbackMap).find(key =>
-    remainingString.startsWith(key),
-  )
-  if (!modifierKey) {
-    return null
-  }
-  const callback = modifierCallbackMap[modifierKey]
-
-  // 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 &&
-    callback.closeName &&
-    !remainingString.includes(callback.closeName)
-  ) {
-    remainingString += callback.closeName
-  }
-  remainingString = remainingString.slice(modifierKey.length)
-  return {
-    callback,
-    remainingString,
-  }
-}
-
-function getSpecialCharCallback(remainingString) {
-  const specialChar = Object.keys(specialCharCallbackMap).find(key =>
-    remainingString.startsWith(key),
-  )
-  if (!specialChar) {
-    return null
-  }
-  return {
-    callback: specialCharCallbackMap[specialChar],
-    remainingString: remainingString.slice(specialChar.length),
-  }
-}
-
-function getTypeCallback(remainingString) {
-  const character = remainingString[0]
-  const callback = context => typeCharacter(character, context)
-  return {
-    callback,
-    remainingString: remainingString.slice(1),
-  }
-}
-
-function setSelectionRange({currentElement, newValue, newSelectionStart}) {
-  // if we *can* change the selection start, then we will if the new value
-  // is the same as the current value (so it wasn't programatically changed
-  // when the fireEvent.input was triggered).
-  // The reason we have to do this at all is because it actually *is*
-  // programmatically changed by fireEvent.input, so we have to simulate the
-  // browser's default behavior
-  const value = getValue(currentElement())
-
-  if (value === newValue) {
-    setSelectionRangeIfNecessary(
-      currentElement(),
-      newSelectionStart,
-      newSelectionStart,
-    )
-  } else {
-    // If the currentValue is different than the expected newValue and we *can*
-    // change the selection range, than we should set it to the length of the
-    // currentValue to ensure that the browser behavior is mimicked.
-    setSelectionRangeIfNecessary(currentElement(), value.length, value.length)
-  }
-}
-
-function fireInputEventIfNeeded({
-  currentElement,
-  newValue,
-  newSelectionStart,
-  eventOverrides,
-}) {
-  const prevValue = getValue(currentElement())
-  if (
-    !currentElement().readOnly &&
-    !isClickableInput(currentElement()) &&
-    newValue !== prevValue
-  ) {
-    if (isContentEditable(currentElement())) {
-      fireEvent.input(currentElement(), {
-        target: {textContent: newValue},
-        ...eventOverrides,
-      })
-    } else {
-      fireEvent.input(currentElement(), {
-        target: {value: newValue},
-        ...eventOverrides,
-      })
-    }
-
-    setSelectionRange({
-      currentElement,
-      newValue,
-      newSelectionStart,
-    })
-  }
-
-  return {prevValue}
-}
-
-function typeCharacter(
-  char,
-  {
-    currentElement,
-    prevWasMinus = false,
-    prevWasPeriod = false,
-    prevValue = '',
-    typedValue = '',
-    eventOverrides,
-  },
-) {
-  const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
-  const keyCode = char.charCodeAt(0)
-  let nextPrevWasMinus, nextPrevWasPeriod
-  const textToBeTyped = typedValue + char
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyDownDefaultNotPrevented) {
-    const keyPressDefaultNotPrevented = fireEvent.keyPress(currentElement(), {
-      key,
-      keyCode,
-      charCode: keyCode,
-      ...eventOverrides,
-    })
-    if (getValue(currentElement()) != null && keyPressDefaultNotPrevented) {
-      let newEntry = char
-      if (prevWasMinus) {
-        newEntry = `-${char}`
-      } else if (prevWasPeriod) {
-        newEntry = `${prevValue}.${char}`
-      }
-
-      if (isValidDateValue(currentElement(), textToBeTyped)) {
-        newEntry = textToBeTyped
-      }
-
-      const timeNewEntry = buildTimeValue(textToBeTyped)
-      if (isValidInputTimeValue(currentElement(), timeNewEntry)) {
-        newEntry = timeNewEntry
-      }
-
-      const inputEvent = fireInputEventIfNeeded({
-        ...calculateNewValue(newEntry, currentElement()),
-        eventOverrides: {
-          data: key,
-          inputType: 'insertText',
-          ...eventOverrides,
-        },
-        currentElement,
-      })
-      prevValue = inputEvent.prevValue
-
-      if (isValidDateValue(currentElement(), textToBeTyped)) {
-        fireEvent.change(currentElement(), {target: {value: textToBeTyped}})
-      }
-
-      fireChangeForInputTimeIfValid(currentElement, prevValue, timeNewEntry)
-
-      // typing "-" into a number input will not actually update the value
-      // so for the next character we type, the value should be set to
-      // `-${newEntry}`
-      // we also preserve the prevWasMinus when the value is unchanged due
-      // to typing an invalid character (typing "-a3" results in "-3")
-      // same applies for the decimal character.
-      if (currentElement().type === 'number') {
-        const newValue = getValue(currentElement())
-        if (newValue === prevValue && newEntry !== '-') {
-          nextPrevWasMinus = prevWasMinus
-        } else {
-          nextPrevWasMinus = newEntry === '-'
-        }
-        if (newValue === prevValue && newEntry !== '.') {
-          nextPrevWasPeriod = prevWasPeriod
-        } else {
-          nextPrevWasPeriod = newEntry === '.'
-        }
-      }
-    }
-  }
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return {
-    prevWasMinus: nextPrevWasMinus,
-    prevWasPeriod: nextPrevWasPeriod,
-    prevValue,
-    typedValue: textToBeTyped,
-  }
-}
-
-function fireChangeForInputTimeIfValid(
-  currentElement,
-  prevValue,
-  timeNewEntry,
-) {
-  if (
-    isValidInputTimeValue(currentElement(), timeNewEntry) &&
-    prevValue !== timeNewEntry
-  ) {
-    fireEvent.change(currentElement(), {target: {value: timeNewEntry}})
-  }
-}
-
-// yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
-// and you may be tempted to create a shared abstraction.
-// If you, brave soul, decide to so endevor, please increment this count
-// when you inevitably fail: 1
-function calculateNewBackspaceValue(element) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-  const value = getValue(element)
-  let newValue, newSelectionStart
-
-  if (selectionStart === null) {
-    // at the end of an input type that does not support selection ranges
-    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-    newValue = value.slice(0, value.length - 1)
-    newSelectionStart = selectionStart - 1
-  } else if (selectionStart === selectionEnd) {
-    if (selectionStart === 0) {
-      // at the beginning of the input
-      newValue = value
-      newSelectionStart = selectionStart
-    } else if (selectionStart === value.length) {
-      // at the end of the input
-      newValue = value.slice(0, value.length - 1)
-      newSelectionStart = selectionStart - 1
-    } else {
-      // in the middle of the input
-      newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
-      newSelectionStart = selectionStart - 1
-    }
-  } else {
-    // we have something selected
-    const firstPart = value.slice(0, selectionStart)
-    newValue = firstPart + value.slice(selectionEnd)
-    newSelectionStart = firstPart.length
-  }
-
-  return {newValue, newSelectionStart}
-}
-
-function calculateNewDeleteValue(element) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-  const value = getValue(element)
-  let newValue
-
-  if (selectionStart === null) {
-    // at the end of an input type that does not support selection ranges
-    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-    newValue = value
-  } else if (selectionStart === selectionEnd) {
-    if (selectionStart === 0) {
-      // at the beginning of the input
-      newValue = value.slice(1)
-    } else if (selectionStart === value.length) {
-      // at the end of the input
-      newValue = value
-    } else {
-      // in the middle of the input
-      newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
-    }
-  } else {
-    // we have something selected
-    const firstPart = value.slice(0, selectionStart)
-    newValue = firstPart + value.slice(selectionEnd)
-  }
-
-  return {newValue, newSelectionStart: selectionStart}
-}
-
-function createModifierCallbackEntries({name, key, keyCode, modifierProperty}) {
-  const openName = `{${name}}`
-  const closeName = `{/${name}}`
-
-  function open({currentElement, eventOverrides}) {
-    const newEventOverrides = {[modifierProperty]: true}
-
-    fireEvent.keyDown(currentElement(), {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  }
-  open.closeName = closeName
-  function close({currentElement, eventOverrides}) {
-    const newEventOverrides = {[modifierProperty]: false}
-
-    fireEvent.keyUp(currentElement(), {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  }
-  return {
-    [openName]: open,
-    [closeName]: close,
-  }
-}
-
-function handleEnter({currentElement, eventOverrides}) {
-  const key = 'Enter'
-  const keyCode = 13
-
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyDownDefaultNotPrevented) {
-    const keyPressDefaultNotPrevented = fireEvent.keyPress(currentElement(), {
-      key,
-      keyCode,
-      charCode: keyCode,
-      ...eventOverrides,
-    })
-
-    if (keyPressDefaultNotPrevented) {
-      if (
-        isClickableInput(currentElement()) ||
-        // Links with href defined should handle Enter the same as a click
-        (isInstanceOfElement(currentElement(), 'HTMLAnchorElement') &&
-          currentElement().href)
-      ) {
-        fireEvent.click(currentElement(), {
-          ...eventOverrides,
-        })
-      }
-
-      if (currentElement().tagName === 'TEXTAREA') {
-        const {newValue, newSelectionStart} = calculateNewValue(
-          '\n',
-          currentElement(),
-        )
-        fireEvent.input(currentElement(), {
-          target: {value: newValue},
-          inputType: 'insertLineBreak',
-          ...eventOverrides,
-        })
-        setSelectionRange({
-          currentElement,
-          newValue,
-          newSelectionStart,
-        })
-      }
-
-      if (
-        currentElement().tagName === 'INPUT' &&
-        currentElement().form &&
-        (currentElement().form.querySelectorAll('input').length === 1 ||
-          currentElement().form.querySelector('input[type="submit"]') ||
-          currentElement().form.querySelector('button[type="submit"]'))
-      ) {
-        fireEvent.submit(currentElement().form)
-      }
-    }
-  }
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-function handleEsc({currentElement, eventOverrides}) {
-  const key = 'Escape'
-  const keyCode = 27
-
-  fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  // NOTE: Browsers do not fire a keypress on meta key presses
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-function handleDel({currentElement, eventOverrides}) {
-  const key = 'Delete'
-  const keyCode = 46
-
-  const keyPressDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyPressDefaultNotPrevented) {
-    fireInputEventIfNeeded({
-      ...calculateNewDeleteValue(currentElement()),
-      eventOverrides: {
-        inputType: 'deleteContentForward',
-        ...eventOverrides,
-      },
-      currentElement,
-    })
-  }
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-function handleBackspace({currentElement, eventOverrides}) {
-  const key = 'Backspace'
-  const keyCode = 8
-
-  const keyPressDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyPressDefaultNotPrevented) {
-    fireInputEventIfNeeded({
-      ...calculateNewBackspaceValue(currentElement()),
-      eventOverrides: {
-        inputType: 'deleteContentBackward',
-        ...eventOverrides,
-      },
-      currentElement,
-    })
-  }
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-function handleSelectall({currentElement}) {
-  currentElement().setSelectionRange(0, getValue(currentElement()).length)
-}
-
-function handleSpace(context) {
-  if (isClickableInput(context.currentElement())) {
-    handleSpaceOnClickable(context)
-    return
-  }
-  typeCharacter(' ', context)
-}
-
-function handleSpaceOnClickable({currentElement, eventOverrides}) {
-  const key = ' '
-  const keyCode = 32
-
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyDownDefaultNotPrevented) {
-    fireEvent.keyPress(currentElement(), {
-      key,
-      keyCode,
-      charCode: keyCode,
-      ...eventOverrides,
-    })
-  }
-
-  const keyUpDefaultNotPrevented = fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  if (keyDownDefaultNotPrevented && keyUpDefaultNotPrevented) {
-    fireEvent.click(currentElement(), {
-      ...eventOverrides,
-    })
-  }
-}
-
-function handleArrowDown({currentElement, eventOverrides}) {
-  const key = 'ArrowDown'
-  const keyCode = 40
-
-  fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-function handleArrowUp({currentElement, eventOverrides}) {
-  const key = 'ArrowUp'
-  const keyCode = 38
-
-  fireEvent.keyDown(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  fireEvent.keyUp(currentElement(), {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-}
-
-export {type, specialCharMap}
diff --git a/src/type/callbacks.ts b/src/type/callbacks.ts
new file mode 100644
index 00000000..b3a45539
--- /dev/null
+++ b/src/type/callbacks.ts
@@ -0,0 +1,13 @@
+export interface callbackPayload {
+  currentElement: () => Element | null
+  prevWasMinus?: boolean
+  prevWasPeriod?: boolean
+  prevValue?: string
+  typedValue?: string
+  eventOverrides?: {[k: string]: unknown}
+}
+
+export interface callback {
+  (callbackPayload: callbackPayload): Partial<callbackPayload> | undefined
+  closeName?: string
+}
diff --git a/src/type/index.ts b/src/type/index.ts
new file mode 100644
index 00000000..ced56967
--- /dev/null
+++ b/src/type/index.ts
@@ -0,0 +1,23 @@
+import {getConfig as getDOMTestingLibraryConfig} from '@testing-library/dom'
+import {typeImplementation, typeOptions} from './typeImplementation'
+
+// this needs to be wrapped in the event/asyncWrapper for React's act and angular's change detection
+// depending on whether it will be async.
+export function type(
+  element: Element,
+  text: string,
+  {delay = 0, ...options}: typeOptions = {},
+): Promise<void> {
+  // we do not want to wrap in the asyncWrapper if we're not
+  // going to actually be doing anything async, so we only wrap
+  // if the delay is greater than 0
+  if (delay > 0) {
+    return getDOMTestingLibraryConfig().asyncWrapper(async () => {
+      await typeImplementation(element, text, {delay, ...options})
+    })
+  } else {
+    return typeImplementation(element, text, {delay, ...options})
+  }
+}
+
+export {specialCharMap} from './specialCharMap'
diff --git a/src/type/modifierCallbackMap.ts b/src/type/modifierCallbackMap.ts
new file mode 100644
index 00000000..ba05428e
--- /dev/null
+++ b/src/type/modifierCallbackMap.ts
@@ -0,0 +1,117 @@
+import {fireEvent} from '@testing-library/dom'
+import {callback, callbackPayload} from './callbacks'
+
+function createModifierCallbackEntries({
+  name,
+  key,
+  keyCode,
+  modifierProperty,
+}: {
+  name: string
+  key: string
+  keyCode: number
+  modifierProperty: string
+}): {[k: string]: callback} {
+  const openName = `{${name}}`
+  const closeName = `{/${name}}`
+
+  function open({currentElement, eventOverrides}: callbackPayload) {
+    const newEventOverrides = {[modifierProperty]: true}
+
+    fireEvent.keyDown(currentElement() as Element, {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+
+    return {eventOverrides: newEventOverrides}
+  }
+  open.closeName = closeName
+  function close({currentElement, eventOverrides}: callbackPayload) {
+    const newEventOverrides = {[modifierProperty]: false}
+
+    fireEvent.keyUp(currentElement() as Element, {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+
+    return {eventOverrides: newEventOverrides}
+  }
+  return {
+    [openName]: open,
+    [closeName]: close,
+  }
+}
+
+export const modifierCallbackMap: {[k: string]: callback} = {
+  ...createModifierCallbackEntries({
+    name: 'shift',
+    key: 'Shift',
+    keyCode: 16,
+    modifierProperty: 'shiftKey',
+  }),
+  ...createModifierCallbackEntries({
+    name: 'ctrl',
+    key: 'Control',
+    keyCode: 17,
+    modifierProperty: 'ctrlKey',
+  }),
+  ...createModifierCallbackEntries({
+    name: 'alt',
+    key: 'Alt',
+    keyCode: 18,
+    modifierProperty: 'altKey',
+  }),
+  ...createModifierCallbackEntries({
+    name: 'meta',
+    key: 'Meta',
+    keyCode: 93,
+    modifierProperty: 'metaKey',
+  }),
+  // capslock is inline because of the need to fire both keydown and keyup on use, while preserving the modifier state.
+  '{capslock}': function capslockOn({currentElement, eventOverrides}) {
+    const newEventOverrides = {modifierCapsLock: true}
+
+    fireEvent.keyDown(currentElement() as Element, {
+      key: 'CapsLock',
+      keyCode: 20,
+      which: 20,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+    fireEvent.keyUp(currentElement() as Element, {
+      key: 'CapsLock',
+      keyCode: 20,
+      which: 20,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+
+    return {eventOverrides: newEventOverrides}
+  },
+  '{/capslock}': function capslockOff({currentElement, eventOverrides}) {
+    const newEventOverrides = {modifierCapsLock: false}
+
+    fireEvent.keyDown(currentElement() as Element, {
+      key: 'CapsLock',
+      keyCode: 20,
+      which: 20,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+    fireEvent.keyUp(currentElement() as Element, {
+      key: 'CapsLock',
+      keyCode: 20,
+      which: 20,
+      ...eventOverrides,
+      ...newEventOverrides,
+    })
+
+    return {eventOverrides: newEventOverrides}
+  },
+}
diff --git a/src/type/shared/fireChangeForInputTimeIfValid.ts b/src/type/shared/fireChangeForInputTimeIfValid.ts
new file mode 100644
index 00000000..0e8937d4
--- /dev/null
+++ b/src/type/shared/fireChangeForInputTimeIfValid.ts
@@ -0,0 +1,17 @@
+import {fireEvent} from '@testing-library/dom'
+import {isValidInputTimeValue} from '../../utils/edit'
+
+export function fireChangeForInputTimeIfValid(
+  currentElement: () => Element | null,
+  prevValue: unknown,
+  timeNewEntry: string,
+) {
+  const el = currentElement()
+  if (
+    el &&
+    isValidInputTimeValue(el, timeNewEntry) &&
+    prevValue !== timeNewEntry
+  ) {
+    fireEvent.change(el, {target: {value: timeNewEntry}})
+  }
+}
diff --git a/src/type/shared/fireInputEventIfNeeded.ts b/src/type/shared/fireInputEventIfNeeded.ts
new file mode 100644
index 00000000..4cc005d7
--- /dev/null
+++ b/src/type/shared/fireInputEventIfNeeded.ts
@@ -0,0 +1,60 @@
+import {fireEvent} from '@testing-library/dom'
+import {isInstanceOfElement} from 'utils/misc'
+import {isClickableInput} from '../../utils/click'
+import {getValue, isContentEditable} from '../../utils/edit'
+import {setSelectionRange} from './setSelectionRange'
+
+export function fireInputEventIfNeeded({
+  currentElement,
+  newValue,
+  newSelectionStart,
+  eventOverrides,
+}: {
+  currentElement: () => Element | null
+  newValue: string
+  newSelectionStart: number
+  eventOverrides: Partial<Parameters<typeof fireEvent>[1]> & {
+    [k: string]: unknown
+  }
+}): {
+  prevValue: string | null
+} {
+  const el = currentElement()
+  const prevValue = getValue(el)
+  if (
+    el &&
+    !isReadonly(el) &&
+    !isClickableInput(el) &&
+    newValue !== prevValue
+  ) {
+    if (isContentEditable(el)) {
+      fireEvent.input(el, {
+        target: {textContent: newValue},
+        ...eventOverrides,
+      })
+    } else {
+      fireEvent.input(el, {
+        target: {value: newValue},
+        ...eventOverrides,
+      })
+    }
+
+    setSelectionRange({
+      currentElement,
+      newValue,
+      newSelectionStart,
+    })
+  }
+
+  return {prevValue}
+}
+
+function isReadonly(element: Element): boolean {
+  if (
+    !isInstanceOfElement(element, 'HTMLInputElement') &&
+    !isInstanceOfElement(element, 'HTMLTextAreaElement')
+  ) {
+    return false
+  }
+  return (element as HTMLInputElement | HTMLTextAreaElement).readOnly
+}
diff --git a/src/type/shared/index.ts b/src/type/shared/index.ts
new file mode 100644
index 00000000..d1f33cf7
--- /dev/null
+++ b/src/type/shared/index.ts
@@ -0,0 +1,3 @@
+export * from './fireChangeForInputTimeIfValid'
+export * from './fireInputEventIfNeeded'
+export * from './setSelectionRange'
diff --git a/src/type/shared/setSelectionRange.ts b/src/type/shared/setSelectionRange.ts
new file mode 100644
index 00000000..f8deca4d
--- /dev/null
+++ b/src/type/shared/setSelectionRange.ts
@@ -0,0 +1,30 @@
+import {getValue, setSelectionRangeIfNecessary} from '../../utils/edit'
+
+export function setSelectionRange({
+  currentElement,
+  newValue,
+  newSelectionStart,
+}: {
+  currentElement: () => Element | null
+  newValue: string
+  newSelectionStart: number
+}): void {
+  // if we *can* change the selection start, then we will if the new value
+  // is the same as the current value (so it wasn't programatically changed
+  // when the fireEvent.input was triggered).
+  // The reason we have to do this at all is because it actually *is*
+  // programmatically changed by fireEvent.input, so we have to simulate the
+  // browser's default behavior
+  const el = currentElement() as Element
+
+  const value = getValue(el) as string
+
+  if (value === newValue) {
+    setSelectionRangeIfNecessary(el, newSelectionStart, newSelectionStart)
+  } else {
+    // If the currentValue is different than the expected newValue and we *can*
+    // change the selection range, than we should set it to the length of the
+    // currentValue to ensure that the browser behavior is mimicked.
+    setSelectionRangeIfNecessary(el, value.length, value.length)
+  }
+}
diff --git a/src/type/specialCharCallbackMap/handleArrowDown.ts b/src/type/specialCharCallbackMap/handleArrowDown.ts
new file mode 100644
index 00000000..205fa072
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleArrowDown.ts
@@ -0,0 +1,26 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+
+export function handleArrowDown({
+  currentElement,
+  eventOverrides,
+}: callbackPayload) {
+  const key = 'ArrowDown'
+  const keyCode = 40
+
+  fireEvent.keyDown(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/handleArrowUp.ts b/src/type/specialCharCallbackMap/handleArrowUp.ts
new file mode 100644
index 00000000..a8f5866a
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleArrowUp.ts
@@ -0,0 +1,26 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+
+export function handleArrowUp({
+  currentElement,
+  eventOverrides,
+}: callbackPayload) {
+  const key = 'ArrowUp'
+  const keyCode = 38
+
+  fireEvent.keyDown(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/handleBackspace.ts b/src/type/specialCharCallbackMap/handleBackspace.ts
new file mode 100644
index 00000000..9ba50251
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleBackspace.ts
@@ -0,0 +1,84 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+import {getSelectionRange, getValue} from '../../utils'
+import {fireInputEventIfNeeded} from '../shared'
+
+export function handleBackspace({
+  currentElement,
+  eventOverrides,
+}: callbackPayload) {
+  const key = 'Backspace'
+  const keyCode = 8
+
+  const keyPressDefaultNotPrevented = fireEvent.keyDown(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyPressDefaultNotPrevented) {
+    fireInputEventIfNeeded({
+      ...calculateNewBackspaceValue(currentElement() as Element),
+      eventOverrides: {
+        inputType: 'deleteContentBackward',
+        ...eventOverrides,
+      },
+      currentElement,
+    })
+  }
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
+
+// yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
+// and you may be tempted to create a shared abstraction.
+// If you, brave soul, decide to so endevor, please increment this count
+// when you inevitably fail: 1
+function calculateNewBackspaceValue(element: Element) {
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+
+  // istanbul ignore next
+  const value = getValue(element) ?? ''
+
+  let newValue, newSelectionStart
+
+  if (selectionStart === null) {
+    // at the end of an input type that does not support selection ranges
+    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+    newValue = value.slice(0, value.length - 1)
+
+    newSelectionStart = newValue.length
+  } else if (selectionStart === selectionEnd) {
+    if (selectionStart === 0) {
+      // at the beginning of the input
+      newValue = value
+      newSelectionStart = selectionStart
+    } else if (selectionStart === value.length) {
+      // at the end of the input
+      newValue = value.slice(0, value.length - 1)
+      newSelectionStart = selectionStart - 1
+    } else {
+      // in the middle of the input
+      newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
+      newSelectionStart = selectionStart - 1
+    }
+  } else {
+    // we have something selected
+    const firstPart = value.slice(0, selectionStart)
+    newValue = firstPart + value.slice(selectionEnd as number)
+    newSelectionStart = firstPart.length
+  }
+
+  return {newValue, newSelectionStart}
+}
diff --git a/src/type/specialCharCallbackMap/handleDel.ts b/src/type/specialCharCallbackMap/handleDel.ts
new file mode 100644
index 00000000..bac9e603
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleDel.ts
@@ -0,0 +1,71 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+import {getSelectionRange, getValue} from '../../utils'
+import {fireInputEventIfNeeded} from '../shared'
+
+export function handleDel({currentElement, eventOverrides}: callbackPayload) {
+  const key = 'Delete'
+  const keyCode = 46
+
+  const keyPressDefaultNotPrevented = fireEvent.keyDown(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyPressDefaultNotPrevented) {
+    fireInputEventIfNeeded({
+      ...calculateNewDeleteValue(currentElement() as Element),
+      eventOverrides: {
+        inputType: 'deleteContentForward',
+        ...eventOverrides,
+      },
+      currentElement,
+    })
+  }
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
+
+function calculateNewDeleteValue(element: Element) {
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+
+  // istanbul ignore next
+  const value = getValue(element) ?? ''
+
+  let newValue
+
+  if (selectionStart === null) {
+    // at the end of an input type that does not support selection ranges
+    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+    newValue = value
+  } else if (selectionStart === selectionEnd) {
+    if (selectionStart === 0) {
+      // at the beginning of the input
+      newValue = value.slice(1)
+    } else if (selectionStart === value.length) {
+      // at the end of the input
+      newValue = value
+    } else {
+      // in the middle of the input
+      newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
+    }
+  } else {
+    // we have something selected
+    const firstPart = value.slice(0, selectionStart)
+    newValue = firstPart + value.slice(selectionEnd as number)
+  }
+
+  return {newValue, newSelectionStart: selectionStart ?? 0}
+}
diff --git a/src/type/specialCharCallbackMap/handleEnter.ts b/src/type/specialCharCallbackMap/handleEnter.ts
new file mode 100644
index 00000000..5eae5479
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleEnter.ts
@@ -0,0 +1,88 @@
+import {fireEvent} from '@testing-library/dom'
+import {
+  calculateNewValue,
+  isClickableInput,
+  isInstanceOfElement,
+} from '../../utils/'
+import {setSelectionRange} from '../shared'
+import {callbackPayload} from '../callbacks'
+
+export function handleEnter({currentElement, eventOverrides}: callbackPayload) {
+  const key = 'Enter'
+  const keyCode = 13
+
+  const keyDownDefaultNotPrevented = fireEvent.keyDown(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyDownDefaultNotPrevented) {
+    const keyPressDefaultNotPrevented = fireEvent.keyPress(
+      currentElement() as Element,
+      {
+        key,
+        keyCode,
+        charCode: keyCode,
+        ...eventOverrides,
+      },
+    )
+
+    if (keyPressDefaultNotPrevented) {
+      if (
+        isClickableInput(currentElement() as Element) ||
+        // Links with href defined should handle Enter the same as a click
+        (isInstanceOfElement(
+          currentElement() as Element,
+          'HTMLAnchorElement',
+        ) &&
+          (currentElement() as HTMLAnchorElement).href)
+      ) {
+        fireEvent.click(currentElement() as Element, {
+          ...eventOverrides,
+        })
+      }
+
+      if ((currentElement() as Element).tagName === 'TEXTAREA') {
+        const {newValue, newSelectionStart} = calculateNewValue(
+          '\n',
+          currentElement() as HTMLElement,
+        )
+        fireEvent.input(currentElement() as Element, {
+          target: {value: newValue},
+          inputType: 'insertLineBreak',
+          ...eventOverrides,
+        })
+        setSelectionRange({
+          currentElement,
+          newValue,
+          newSelectionStart,
+        })
+      }
+
+      const el = currentElement()
+      const form = el?.tagName === 'INPUT' && (el as HTMLInputElement).form
+      if (
+        form &&
+        (form.querySelectorAll('input').length === 1 ||
+          form.querySelector('input[type="submit"]') ||
+          form.querySelector('button[type="submit"]'))
+      ) {
+        fireEvent.submit(form)
+      }
+    }
+  }
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/handleEsc.ts b/src/type/specialCharCallbackMap/handleEsc.ts
new file mode 100644
index 00000000..aa7fcceb
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleEsc.ts
@@ -0,0 +1,25 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+
+export function handleEsc({currentElement, eventOverrides}: callbackPayload) {
+  const key = 'Escape'
+  const keyCode = 27
+
+  fireEvent.keyDown(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  // NOTE: Browsers do not fire a keypress on meta key presses
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/handleSelectall.ts b/src/type/specialCharCallbackMap/handleSelectall.ts
new file mode 100644
index 00000000..41270797
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleSelectall.ts
@@ -0,0 +1,11 @@
+import {callbackPayload} from '../callbacks'
+import {getValue} from '../../utils/edit'
+
+export function handleSelectall({currentElement}: callbackPayload) {
+  ;(currentElement() as HTMLInputElement).setSelectionRange(
+    0,
+    (getValue(currentElement() as HTMLInputElement) as string).length,
+  )
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/handleSpace.ts b/src/type/specialCharCallbackMap/handleSpace.ts
new file mode 100644
index 00000000..e7856149
--- /dev/null
+++ b/src/type/specialCharCallbackMap/handleSpace.ts
@@ -0,0 +1,58 @@
+import {fireEvent} from '@testing-library/dom'
+import {callbackPayload} from '../callbacks'
+import {isClickableInput} from '../../utils/click'
+import {typeCharacter} from '../typeCharacter'
+
+export function handleSpace(context: callbackPayload) {
+  const el = context.currentElement()
+  if (el && isClickableInput(el)) {
+    return handleSpaceOnClickable(context)
+  }
+
+  return typeCharacter(' ', context)
+}
+
+function handleSpaceOnClickable({
+  currentElement,
+  eventOverrides,
+}: callbackPayload) {
+  const key = ' '
+  const keyCode = 32
+
+  const keyDownDefaultNotPrevented = fireEvent.keyDown(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyDownDefaultNotPrevented) {
+    fireEvent.keyPress(currentElement() as Element, {
+      key,
+      keyCode,
+      charCode: keyCode,
+      ...eventOverrides,
+    })
+  }
+
+  const keyUpDefaultNotPrevented = fireEvent.keyUp(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyDownDefaultNotPrevented && keyUpDefaultNotPrevented) {
+    fireEvent.click(currentElement() as Element, {
+      ...eventOverrides,
+    })
+  }
+
+  return undefined
+}
diff --git a/src/type/specialCharCallbackMap/index.ts b/src/type/specialCharCallbackMap/index.ts
new file mode 100644
index 00000000..41b456fc
--- /dev/null
+++ b/src/type/specialCharCallbackMap/index.ts
@@ -0,0 +1,26 @@
+import {specialCharMap} from '../specialCharMap'
+import {handleArrowDown} from './handleArrowDown'
+import {handleArrowUp} from './handleArrowUp'
+import {handleBackspace} from './handleBackspace'
+import {handleDel} from './handleDel'
+import {handleEnter} from './handleEnter'
+import {handleEsc} from './handleEsc'
+import {handleSelectall} from './handleSelectall'
+import {handleSpace} from './handleSpace'
+import {navigationKey} from './navigationKey'
+
+export const specialCharCallbackMap = {
+  [specialCharMap.arrowLeft]: navigationKey('ArrowLeft'),
+  [specialCharMap.arrowRight]: navigationKey('ArrowRight'),
+  [specialCharMap.arrowDown]: handleArrowDown,
+  [specialCharMap.arrowUp]: handleArrowUp,
+  [specialCharMap.home]: navigationKey('Home'),
+  [specialCharMap.end]: navigationKey('End'),
+  [specialCharMap.enter]: handleEnter,
+  [specialCharMap.escape]: handleEsc,
+  [specialCharMap.delete]: handleDel,
+  [specialCharMap.backspace]: handleBackspace,
+  [specialCharMap.selectAll]: handleSelectall,
+  [specialCharMap.space]: handleSpace,
+  [specialCharMap.whitespace]: handleSpace,
+}
diff --git a/src/keys/navigation-key.js b/src/type/specialCharCallbackMap/navigationKey.ts
similarity index 58%
rename from src/keys/navigation-key.js
rename to src/type/specialCharCallbackMap/navigationKey.ts
index 2bbcce8c..2ca39362 100644
--- a/src/keys/navigation-key.js
+++ b/src/type/specialCharCallbackMap/navigationKey.ts
@@ -1,6 +1,7 @@
 import {fireEvent} from '@testing-library/dom'
+import {callback} from '../callbacks'
 
-import {setSelectionRangeIfNecessary} from '../utils'
+import {setSelectionRangeIfNecessary} from '../../utils/edit'
 
 const keys = {
   Home: {
@@ -17,31 +18,7 @@ const keys = {
   },
 }
 
-function getSelectionRange(currentElement, key) {
-  const {selectionStart, selectionEnd} = currentElement()
-
-  if (key === 'Home') {
-    return {
-      selectionStart: 0,
-      selectionEnd: 0,
-    }
-  }
-
-  if (key === 'End') {
-    return {
-      selectionStart: selectionEnd + 1,
-      selectionEnd: selectionEnd + 1,
-    }
-  }
-
-  const cursorChange = Number(key in keys) * (key === 'ArrowLeft' ? -1 : 1)
-  return {
-    selectionStart: selectionStart + cursorChange,
-    selectionEnd: selectionEnd + cursorChange,
-  }
-}
-
-function navigationKey(key) {
+export function navigationKey(key: keyof typeof keys): callback {
   const event = {
     key,
     keyCode: keys[key].keyCode,
@@ -49,23 +26,52 @@ function navigationKey(key) {
   }
 
   return ({currentElement, eventOverrides}) => {
-    fireEvent.keyDown(currentElement(), {
+    fireEvent.keyDown(currentElement() as Element, {
       ...event,
       ...eventOverrides,
     })
 
-    const range = getSelectionRange(currentElement, key)
+    const range = getSelectionRange(currentElement() as HTMLInputElement, key)
     setSelectionRangeIfNecessary(
-      currentElement(),
+      currentElement() as Element,
       range.selectionStart,
       range.selectionEnd,
     )
 
-    fireEvent.keyUp(currentElement(), {
+    fireEvent.keyUp(currentElement() as Element, {
       ...event,
       ...eventOverrides,
     })
+
+    return undefined
   }
 }
 
-export {navigationKey}
+function getSelectionRange(element: HTMLInputElement, key: string) {
+  const {selectionStart, selectionEnd} = element
+
+  // istanbul ignore if
+  if (typeof selectionStart !== 'number' || typeof selectionEnd !== 'number') {
+    return {selectionStart: 0, selectionEnd: 0}
+  }
+
+  if (key === 'Home') {
+    return {
+      selectionStart: 0,
+      selectionEnd: 0,
+    }
+  }
+
+  if (key === 'End') {
+    return {
+      selectionStart: selectionEnd + 1,
+      selectionEnd: selectionEnd + 1,
+    }
+  }
+
+  const cursorChange = Number(key in keys) * (key === 'ArrowLeft' ? -1 : 1)
+  return {
+    selectionStart: selectionStart + cursorChange,
+    selectionEnd: selectionEnd + cursorChange,
+  }
+}
diff --git a/src/type/specialCharMap.ts b/src/type/specialCharMap.ts
new file mode 100644
index 00000000..30e27775
--- /dev/null
+++ b/src/type/specialCharMap.ts
@@ -0,0 +1,15 @@
+export const specialCharMap = {
+  arrowLeft: '{arrowleft}',
+  arrowRight: '{arrowright}',
+  arrowDown: '{arrowdown}',
+  arrowUp: '{arrowup}',
+  enter: '{enter}',
+  escape: '{esc}',
+  delete: '{del}',
+  backspace: '{backspace}',
+  home: '{home}',
+  end: '{end}',
+  selectAll: '{selectall}',
+  space: '{space}',
+  whitespace: ' ',
+}
diff --git a/src/type/typeCharacter.ts b/src/type/typeCharacter.ts
new file mode 100644
index 00000000..9ef3bb12
--- /dev/null
+++ b/src/type/typeCharacter.ts
@@ -0,0 +1,120 @@
+// TODO: wrap in asyncWrapper
+import {fireEvent} from '@testing-library/dom'
+
+import {
+  calculateNewValue,
+  isValidDateValue,
+  getValue,
+  isValidInputTimeValue,
+  buildTimeValue,
+} from '../utils/edit'
+import {callbackPayload} from './callbacks'
+import {fireChangeForInputTimeIfValid, fireInputEventIfNeeded} from './shared'
+
+export function typeCharacter(
+  char: string,
+  {
+    currentElement,
+    prevWasMinus = false,
+    prevWasPeriod = false,
+    prevValue = '',
+    typedValue = '',
+    eventOverrides,
+  }: callbackPayload,
+) {
+  const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
+  const keyCode = char.charCodeAt(0)
+  let nextPrevWasMinus, nextPrevWasPeriod
+  const textToBeTyped = typedValue + char
+  const keyDownDefaultNotPrevented = fireEvent.keyDown(
+    currentElement() as Element,
+    {
+      key,
+      keyCode,
+      which: keyCode,
+      ...eventOverrides,
+    },
+  )
+
+  if (keyDownDefaultNotPrevented) {
+    const keyPressDefaultNotPrevented = fireEvent.keyPress(
+      currentElement() as Element,
+      {
+        key,
+        keyCode,
+        charCode: keyCode,
+        ...eventOverrides,
+      },
+    )
+    if (getValue(currentElement()) != null && keyPressDefaultNotPrevented) {
+      let newEntry = char
+      if (prevWasMinus) {
+        newEntry = `-${char}`
+      } else if (prevWasPeriod) {
+        newEntry = `${prevValue}.${char}`
+      }
+
+      if (isValidDateValue(currentElement() as Element, textToBeTyped)) {
+        newEntry = textToBeTyped
+      }
+
+      const timeNewEntry = buildTimeValue(textToBeTyped)
+      if (isValidInputTimeValue(currentElement() as Element, timeNewEntry)) {
+        newEntry = timeNewEntry
+      }
+
+      const inputEvent = fireInputEventIfNeeded({
+        ...calculateNewValue(newEntry, currentElement() as HTMLElement),
+        eventOverrides: {
+          data: key,
+          inputType: 'insertText',
+          ...eventOverrides,
+        },
+        currentElement,
+      })
+      prevValue = inputEvent.prevValue as string
+
+      if (isValidDateValue(currentElement() as Element, textToBeTyped)) {
+        fireEvent.change(currentElement() as Element, {
+          target: {value: textToBeTyped},
+        })
+      }
+
+      fireChangeForInputTimeIfValid(currentElement, prevValue, timeNewEntry)
+
+      // typing "-" into a number input will not actually update the value
+      // so for the next character we type, the value should be set to
+      // `-${newEntry}`
+      // we also preserve the prevWasMinus when the value is unchanged due
+      // to typing an invalid character (typing "-a3" results in "-3")
+      // same applies for the decimal character.
+      if ((currentElement() as HTMLInputElement).type === 'number') {
+        const newValue = getValue(currentElement())
+        if (newValue === prevValue && newEntry !== '-') {
+          nextPrevWasMinus = prevWasMinus
+        } else {
+          nextPrevWasMinus = newEntry === '-'
+        }
+        if (newValue === prevValue && newEntry !== '.') {
+          nextPrevWasPeriod = prevWasPeriod
+        } else {
+          nextPrevWasPeriod = newEntry === '.'
+        }
+      }
+    }
+  }
+
+  fireEvent.keyUp(currentElement() as Element, {
+    key,
+    keyCode,
+    which: keyCode,
+    ...eventOverrides,
+  })
+
+  return {
+    prevWasMinus: nextPrevWasMinus,
+    prevWasPeriod: nextPrevWasPeriod,
+    prevValue,
+    typedValue: textToBeTyped,
+  }
+}
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
new file mode 100644
index 00000000..bbafe30d
--- /dev/null
+++ b/src/type/typeImplementation.ts
@@ -0,0 +1,195 @@
+// TODO: wrap in asyncWrapper
+import {
+  setSelectionRangeIfNecessary,
+  getSelectionRange,
+  getValue,
+  isContentEditable,
+  getActiveElement,
+  isDisabled,
+} from '../utils'
+import {click} from '../click'
+import {modifierCallbackMap} from './modifierCallbackMap'
+import {specialCharCallbackMap} from './specialCharCallbackMap'
+import {typeCharacter} from './typeCharacter'
+import {callback, callbackPayload} from './callbacks'
+
+export interface typeOptions {
+  delay?: number
+  skipClick?: boolean
+  skipAutoClose?: boolean
+  initialSelectionStart?: number
+  initialSelectionEnd?: number
+}
+
+export async function typeImplementation(
+  element: Element,
+  text: string,
+  {
+    delay,
+    skipClick = false,
+    skipAutoClose = false,
+    initialSelectionStart = undefined,
+    initialSelectionEnd = undefined,
+  }: typeOptions & {delay: number},
+) {
+  // TODO: properly type guard
+  // we use this workaround for now to prevent changing behavior
+  if ((element as {disabled?: boolean}).disabled) return
+
+  if (!skipClick) click(element)
+
+  if (isContentEditable(element)) {
+    const selection = document.getSelection()
+    // istanbul ignore else
+    if (selection && selection.rangeCount === 0) {
+      const range = document.createRange()
+      range.setStart(element, 0)
+      range.setEnd(element, 0)
+      selection.addRange(range)
+    }
+  }
+  // The focused element could change between each event, so get the currently active element each time
+  const currentElement = () => getActiveElement(element.ownerDocument)
+
+  // by default, a new element has it's selection start and end at 0
+  // but most of the time when people call "type", they expect it to type
+  // at the end of the current input value. So, if the selection start
+  // and end are both the default of 0, then we'll go ahead and change
+  // them to the length of the current value.
+  // the only time it would make sense to pass the initialSelectionStart or
+  // initialSelectionEnd is if you have an input with a value and want to
+  // explicitely start typing with the cursor at 0. Not super common.
+  const value = getValue(currentElement())
+
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+
+  if (value != null && selectionStart === 0 && selectionEnd === 0) {
+    setSelectionRangeIfNecessary(
+      currentElement() as Element,
+      initialSelectionStart ?? value.length,
+      initialSelectionEnd ?? value.length,
+    )
+  }
+
+  const eventCallbacks = queueCallbacks()
+  await runCallbacks(eventCallbacks)
+
+  function queueCallbacks() {
+    const callbacks = []
+    let remainingString = text
+
+    while (remainingString) {
+      const {
+        callback: cb,
+        remainingString: newRemainingString,
+      } = getNextCallback(remainingString, skipAutoClose)
+
+      callbacks.push(cb)
+      remainingString = newRemainingString
+    }
+
+    return callbacks
+  }
+
+  async function runCallbacks(callbacks: callback[]) {
+    const eventOverrides = {}
+    let prevWasMinus, prevWasPeriod, prevValue, typedValue
+    for (const cb of callbacks) {
+      if (delay > 0) await wait(delay)
+      if (!isDisabled(currentElement())) {
+        const returnValue: Partial<callbackPayload> | undefined = cb({
+          currentElement,
+          prevWasMinus,
+          prevWasPeriod,
+          prevValue,
+          eventOverrides,
+          typedValue,
+        })
+        Object.assign(eventOverrides, returnValue?.eventOverrides)
+        prevWasMinus = returnValue?.prevWasMinus
+        prevWasPeriod = returnValue?.prevWasPeriod
+        prevValue = returnValue?.prevValue
+        typedValue = returnValue?.typedValue
+      }
+    }
+  }
+}
+
+function wait(time?: number) {
+  return new Promise<void>(resolve => setTimeout(() => resolve(), time))
+}
+
+type callbackPrep =
+  | {
+      callback: callback
+      remainingString: string
+    }
+  | undefined
+
+function getNextCallback(
+  remainingString: string,
+  skipAutoClose: boolean,
+): NonNullable<callbackPrep> {
+  const modifierCallback = getModifierCallback(remainingString, skipAutoClose)
+  if (modifierCallback) {
+    return modifierCallback
+  }
+
+  const specialCharCallback = getSpecialCharCallback(remainingString)
+  if (specialCharCallback) {
+    return specialCharCallback
+  }
+
+  return getTypeCallback(remainingString)
+}
+
+function getModifierCallback(
+  remainingString: string,
+  skipAutoClose: boolean,
+): callbackPrep {
+  const modifierKey = Object.keys(modifierCallbackMap).find(key =>
+    remainingString.startsWith(key),
+  )
+  if (!modifierKey) {
+    return undefined
+  }
+  const cb =
+    modifierCallbackMap[modifierKey as keyof typeof modifierCallbackMap]
+
+  // 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 &&
+    cb.closeName &&
+    !remainingString.includes(cb.closeName)
+  ) {
+    remainingString += cb.closeName
+  }
+  remainingString = remainingString.slice(modifierKey.length)
+  return {
+    callback: cb,
+    remainingString,
+  }
+}
+
+function getSpecialCharCallback(remainingString: string): callbackPrep {
+  const specialChar = Object.keys(specialCharCallbackMap).find(key =>
+    remainingString.startsWith(key),
+  )
+  if (!specialChar) {
+    return undefined
+  }
+  return {
+    callback: specialCharCallbackMap[specialChar],
+    remainingString: remainingString.slice(specialChar.length),
+  }
+}
+
+function getTypeCallback(remainingString: string): NonNullable<callbackPrep> {
+  const character = remainingString[0]
+  return {
+    callback: (context: callbackPayload) => typeCharacter(character, context),
+    remainingString: remainingString.slice(1),
+  }
+}
diff --git a/src/utils/edit/getValue.ts b/src/utils/edit/getValue.ts
index 2dc0d786..126e258f 100644
--- a/src/utils/edit/getValue.ts
+++ b/src/utils/edit/getValue.ts
@@ -1,6 +1,10 @@
 import {isContentEditable} from './isContentEditable'
 
-export function getValue(element: Element): string | null {
+export function getValue(element: Element | null): string | null {
+  // istanbul ignore if
+  if (!element) {
+    return null
+  }
   if (isContentEditable(element)) {
     return element.textContent
   }
diff --git a/src/utils/misc/index.ts b/src/utils/misc/index.ts
index 7ddba14a..090552d6 100644
--- a/src/utils/misc/index.ts
+++ b/src/utils/misc/index.ts
@@ -2,3 +2,4 @@ export * from './eventWrapper'
 export * from './isInstanceOfElement'
 export * from './isLabelWithInternallyDisabledControl'
 export * from './isVisible'
+export * from './isDisabled'
diff --git a/src/utils/misc/isDisabled.ts b/src/utils/misc/isDisabled.ts
index ec700418..466db942 100644
--- a/src/utils/misc/isDisabled.ts
+++ b/src/utils/misc/isDisabled.ts
@@ -1,5 +1,5 @@
 // This should probably be extended with checking the element type
 // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
-export function isDisabled(element: Element): boolean {
-  return Boolean((element as {disabled?: boolean}).disabled)
+export function isDisabled(element: Element | null): boolean {
+  return Boolean(element && (element as {disabled?: boolean}).disabled)
 }

From 423595d35a75a9743f1ea239b867879784a64952 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Wed, 10 Mar 2021 15:23:41 +0100
Subject: [PATCH 04/43] wip: keyboard mapping

---
 src/type/getNextKeyDef.ts | 95 +++++++++++++++++++++++++++++++++++++++
 src/type/keyMap.ts        | 28 ++++++++++++
 src/type/types.ts         | 61 +++++++++++++++++++++++++
 3 files changed, 184 insertions(+)
 create mode 100644 src/type/getNextKeyDef.ts
 create mode 100644 src/type/keyMap.ts
 create mode 100644 src/type/types.ts

diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
new file mode 100644
index 00000000..45fac854
--- /dev/null
+++ b/src/type/getNextKeyDef.ts
@@ -0,0 +1,95 @@
+import {keyboardKey, modernTypeOptions} from './types'
+
+/**
+ * Get the next key from keyMap
+ *
+ * Keys can be referenced by `{key}` or `{special}` as well as physical locations per `[code]`.
+ * Everything else will be interpreted as a typed character - e.g. `a`.
+ * Brackets `{` and `[` can be escaped by doubling - e.g. `foo[[bar` translates to `foo[bar`.
+ * Keeping the key pressed can be written as `{key>}`.
+ * Modifiers like `{shift}` imply being kept pressed. This can be turned of per `{shift/}`.
+ */
+export function getNextKeyDef(
+  text: string,
+  options: modernTypeOptions,
+): {
+  key: keyboardKey
+  consumedLength: number
+  releasePrevious: boolean
+  releaseSelf: boolean
+  press: boolean
+} {
+  const startBracket = ['{', '['].includes(text[0]) ? text[0] : ''
+  const startModifier = text[1] === '/' ? '/' : ''
+
+  const descriptorStart = startBracket.length + startModifier.length
+  const descriptor =
+    text[descriptorStart] === startBracket
+      ? startBracket
+      : text.slice().match(/^\w+/)?.[0]
+
+  // istanbul ignore if
+  if (!descriptor) {
+    throw new Error(
+      `Unexpected character: "${text[descriptorStart]}" - Expected key descriptor`,
+    )
+  }
+
+  const descriptorEnd = descriptorStart + descriptor.length
+  const endModifier =
+    descriptor !== startBracket && ['/', '>'].includes(text[descriptorEnd])
+      ? text[descriptorEnd]
+      : ''
+
+  const endBracket =
+    descriptor === startBracket ? '' : startBracket === '{' ? '}' : ']'
+
+  // istanbul ignore if
+  if (endBracket && text[descriptorEnd + endModifier.length] !== endBracket) {
+    throw new Error(
+      `Unexpected character: "${
+        text[descriptorEnd + endModifier.length]
+      }" - Expected closing bracket`,
+    )
+  }
+
+  const modifiers = {
+    consumedLength: [
+      startBracket,
+      startModifier,
+      descriptor,
+      endModifier,
+      endBracket,
+    ]
+      .map(c => c.length)
+      .reduce((a, b) => a + b),
+
+    releasePrevious: startModifier === '/',
+    releaseSelf: endModifier === '/',
+    press: endModifier === '>',
+  }
+
+  if (!startBracket || (startBracket === '{' && descriptor.length === 1)) {
+    return {
+      ...modifiers,
+      key: options.keyboardMap.find(k => k.key === descriptor) ?? {
+        key: descriptor,
+        code: 'Unknown',
+      },
+    }
+  } else if (startBracket === '{') {
+    return {
+      ...modifiers,
+      key: options.keyboardMap.find(
+        k => k.key?.toLowerCase() === descriptor.toLowerCase(),
+      ) ?? {key: descriptor, code: 'Unknown'},
+    }
+  } else {
+    return {
+      ...modifiers,
+      key: options.keyboardMap.find(
+        k => k.code?.toLowerCase() === descriptor.toLowerCase(),
+      ) ?? {key: 'Unknown', code: descriptor},
+    }
+  }
+}
diff --git a/src/type/keyMap.ts b/src/type/keyMap.ts
new file mode 100644
index 00000000..0b4deb87
--- /dev/null
+++ b/src/type/keyMap.ts
@@ -0,0 +1,28 @@
+import {DOM_KEY_LOCATION, keyboardKey} from './types'
+
+/**
+ * Mapping for a default US-104-QWERTY keyboard
+ */
+export const defaultKeyMap: keyboardKey[] = [
+  ...'0123456789'.split('').map(c => ({code: `Digit${c}`, key: c})),
+  ...')!@#$%^&*('
+    .split('')
+    .map((c, i) => ({code: `Digit${i}`, key: c, shiftKey: true})),
+  ...'abcdefghijklmnopqrstuvwxyz'
+    .split('')
+    .map(c => ({code: `Key${c.toUpperCase()}`, key: c})),
+  ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+    .split('')
+    .map(c => ({code: `Key${c}`, key: c, shiftKey: true})),
+  {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT},
+  {code: 'ShiftLeft', key: 'Shift', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'ShiftRight', key: 'Shift', location: DOM_KEY_LOCATION.RIGHT},
+  {code: 'ControlLeft', key: 'Control', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'ControlRight', key: 'Control', location: DOM_KEY_LOCATION.RIGHT},
+  {code: 'MetaLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'MetaRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT},
+  {code: 'CapsLock', key: 'CapsLock'},
+
+  // TODO: add mappings
+]
diff --git a/src/type/types.ts b/src/type/types.ts
new file mode 100644
index 00000000..55992dd7
--- /dev/null
+++ b/src/type/types.ts
@@ -0,0 +1,61 @@
+export type keyboardState = {
+  /*
+      All keys that have been pressed and not been lifted up yet.
+    */
+  pressed: keyboardKey[]
+
+  /*
+      Active modifiers
+    */
+  modifiers: {
+    alt: boolean
+    caps: boolean
+    ctrl: boolean
+    meta: boolean
+    shift: boolean
+  }
+
+  /*
+      The element the keyboard input is performed on.
+      Some behavior might differ if the activeElement changes between corresponding keyboard events.
+    */
+  activeElement: HTMLElement | null
+
+  /*
+      For HTMLInputElements type='number':
+      If the last input char is '.', '-' or 'e',
+      the IDL value attribute does not reflect the input value.
+    */
+  carryChar?: string
+}
+
+export type modernTypeOptions = {
+  /* Delay between keystrokes */
+  delay: number
+  /* Do not automatically add keyup events for opened modifiers */
+  skipAutoClose: boolean
+  /* Add modifiers for given keys */
+  autoModify: boolean
+  /* Keyboard layout to use */
+  keyboardMap: keyboardKey[]
+}
+
+export enum DOM_KEY_LOCATION {
+  STANDARD = 0,
+  LEFT = 1,
+  RIGHT = 2,
+  NUMPAD = 3,
+}
+
+export interface keyboardKey {
+  /* Physical location on a keyboard */
+  code?: string
+  /* Character or functional key descriptor */
+  key?: string
+  /* Location on the keyboard for keys with multiple representation */
+  location?: DOM_KEY_LOCATION
+  /* Does the character in `key` require/imply AltRight to be pressed? */
+  altGr?: boolean
+  /* Does the character in `key` require/imply a shiftKey to be pressed? */
+  shift?: boolean
+}

From 492493e834a7c5ca55096e52f2363769d188aa66 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 01:27:02 +0100
Subject: [PATCH 05/43] wip: new type implementation

---
 src/type/getKeyEventProps.ts   |  18 +++
 src/type/getNextKeyDef.ts      |  34 +++---
 src/type/plugins/character.ts  |  65 +++++++++++
 src/type/plugins/functional.ts |  60 ++++++++++
 src/type/plugins/index.ts      |  30 +++++
 src/type/typeImplementation.ts | 207 ++++++++++++++++-----------------
 src/type/types.ts              |   9 +-
 7 files changed, 303 insertions(+), 120 deletions(-)
 create mode 100644 src/type/getKeyEventProps.ts
 create mode 100644 src/type/plugins/character.ts
 create mode 100644 src/type/plugins/functional.ts
 create mode 100644 src/type/plugins/index.ts

diff --git a/src/type/getKeyEventProps.ts b/src/type/getKeyEventProps.ts
new file mode 100644
index 00000000..1a896f2e
--- /dev/null
+++ b/src/type/getKeyEventProps.ts
@@ -0,0 +1,18 @@
+import { keyboardKey, keyboardState } from "./types";
+
+export function getKeyEventProps(
+    keyDef: keyboardKey,
+    state: keyboardState,
+) {
+    return {
+        key: keyDef.key,
+        code: keyDef.code,
+        altKey: state.modifiers.alt,
+        ctrlKey: state.modifiers.ctrl,
+        metaKey: state.modifiers.meta,
+        shiftKey: state.modifiers.shift,
+
+        // deprecated
+        keyCode: keyDef.key?.charCodeAt(0),
+    }
+}
diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
index 45fac854..73eabcf2 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/type/getNextKeyDef.ts
@@ -13,20 +13,20 @@ export function getNextKeyDef(
   text: string,
   options: modernTypeOptions,
 ): {
-  key: keyboardKey
+  keyDef: keyboardKey
   consumedLength: number
   releasePrevious: boolean
   releaseSelf: boolean
-  press: boolean
 } {
   const startBracket = ['{', '['].includes(text[0]) ? text[0] : ''
   const startModifier = text[1] === '/' ? '/' : ''
 
   const descriptorStart = startBracket.length + startModifier.length
-  const descriptor =
-    text[descriptorStart] === startBracket
+  const descriptor = startBracket
+    ? text[descriptorStart] === startBracket
       ? startBracket
       : text.slice().match(/^\w+/)?.[0]
+    : text[descriptorStart]
 
   // istanbul ignore if
   if (!descriptor) {
@@ -42,7 +42,7 @@ export function getNextKeyDef(
       : ''
 
   const endBracket =
-    descriptor === startBracket ? '' : startBracket === '{' ? '}' : ']'
+    (!startBracket || descriptor === startBracket) ? '' : startBracket === '{' ? '}' : ']'
 
   // istanbul ignore if
   if (endBracket && text[descriptorEnd + endModifier.length] !== endBracket) {
@@ -65,31 +65,39 @@ export function getNextKeyDef(
       .reduce((a, b) => a + b),
 
     releasePrevious: startModifier === '/',
-    releaseSelf: endModifier === '/',
-    press: endModifier === '>',
+    releaseSelf: hasReleaseSelf(startBracket, descriptor, endModifier),
   }
 
   if (!startBracket || (startBracket === '{' && descriptor.length === 1)) {
     return {
       ...modifiers,
-      key: options.keyboardMap.find(k => k.key === descriptor) ?? {
-        key: descriptor,
-        code: 'Unknown',
-      },
+      keyDef: options.keyboardMap.find(
+        k => k.key === descriptor,
+      ) ?? { key: descriptor, code: 'Unknown'},
     }
   } else if (startBracket === '{') {
     return {
       ...modifiers,
-      key: options.keyboardMap.find(
+      keyDef: options.keyboardMap.find(
         k => k.key?.toLowerCase() === descriptor.toLowerCase(),
       ) ?? {key: descriptor, code: 'Unknown'},
     }
   } else {
     return {
       ...modifiers,
-      key: options.keyboardMap.find(
+      keyDef: options.keyboardMap.find(
         k => k.code?.toLowerCase() === descriptor.toLowerCase(),
       ) ?? {key: 'Unknown', code: descriptor},
     }
   }
 }
+
+function hasReleaseSelf(startBracket: string, descriptor: string, endModifier: string) {
+  if (endModifier === '/' || !startBracket) {
+    return true
+  }
+  if (startBracket === '{' && ['alt', 'control', 'meta', 'shift'].includes(descriptor.toLowerCase())) {
+    return false
+  }
+  return endModifier === '>'
+}
diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
new file mode 100644
index 00000000..976cda5b
--- /dev/null
+++ b/src/type/plugins/character.ts
@@ -0,0 +1,65 @@
+/**
+ * This file should cover the behavior for keys that produce character input
+ */
+
+import { fireEvent } from "@testing-library/dom";
+import { getKeyEventProps } from "type/getKeyEventProps";
+import { fireChangeForInputTimeIfValid, fireInputEventIfNeeded } from "type/shared";
+import { behaviorPlugin } from "type/types";
+import { buildTimeValue, calculateNewValue, getValue, isContentEditable, isInstanceOfElement, isValidDateValue, isValidInputTimeValue } from "utils";
+
+export const keydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef, element) => keyDef.key?.length === 1 && (
+            isInstanceOfElement(element, 'HTMLInputElement')
+            || isInstanceOfElement(element, 'HTMLTextareaElement')
+            || isContentEditable(element)
+        ),
+        handle: (keyDef, element, options, state) => {
+            const keyPressResult = fireEvent.keyPress(element, getKeyEventProps(keyDef, state))
+            if (!keyPressResult) {
+                return
+            }
+
+            const isInputElement = isInstanceOfElement(element, 'HTMLInputElement')
+
+            const oldValue = getValue(element) ?? ''
+            let newTypeValue = state.carryChar + (keyDef.key as string)
+
+            if (isInputElement && (element as HTMLInputElement).type === 'time') {
+                const timeNewEntry = buildTimeValue(newTypeValue)
+                if (isValidInputTimeValue(element, timeNewEntry)) {
+                    newTypeValue = timeNewEntry
+                }
+            }
+
+            const { newValue, newSelectionStart } = calculateNewValue(newTypeValue, element as HTMLElement)
+
+            fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    data: keyDef.key,
+                    inputType: 'insertText',
+                },
+                currentElement: () => element,
+            })
+
+            if (isInputElement
+                && (element as HTMLInputElement).type === 'date'
+                && isValidDateValue(element, newValue)
+            ) {
+                fireEvent.change(element, {
+                    target: { value: newValue },
+                })
+            }
+            fireChangeForInputTimeIfValid(() => element, oldValue, newTypeValue)
+
+            if (newValue === oldValue) {
+                state.carryChar += keyDef.key
+            } else {
+                state.carryChar = ''
+            }
+        },
+    }
+]
\ No newline at end of file
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
new file mode 100644
index 00000000..c25383c3
--- /dev/null
+++ b/src/type/plugins/functional.ts
@@ -0,0 +1,60 @@
+/**
+ * This file should contain behavior for functional keys as described here:
+ * https://w3c.github.io/uievents-code/#key-alphanumeric-functional
+ */
+
+import { fireEvent } from "@testing-library/dom"
+import { getKeyEventProps } from "type/getKeyEventProps"
+import { behaviorPlugin } from "../types"
+
+const modifierKeys = {
+    'Alt': 'alt',
+    'CapsLock': 'caps',
+    'Control': 'ctrl',
+    'Shift': 'shift',
+    'OS': 'meta',
+} as const
+
+export const preKeydownBehavior: behaviorPlugin[] = [
+    // modifierKeys switch on the modifier BEFORE the keydown event
+    ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
+        matches: (keyDef) => keyDef.key === key,
+        handle: (keyDef, element, options, state) => {
+            state.modifiers[modKey] = true
+        },
+    })),
+
+    // AltGraph produces an extra keydown for Control
+    // The modifier does not change
+    {
+        matches: (keyDef) => keyDef.key === 'AltGraph',
+        handle: (keyDef, element, options, state) => {
+            const ctrlKeyDef = options.keyboardMap.find(k => k.key === 'Control')
+                ?? {key: 'Control', code: 'Control'}
+            fireEvent.keyDown(element, getKeyEventProps(ctrlKeyDef, state))
+        },
+    },
+]
+
+export const preKeyupBehavior: behaviorPlugin[] = [
+    // modifierKeys switch off the modifier BEFORE the keyup event
+    ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
+        matches: (keyDef) => keyDef.key === key,
+        handle: (keyDef, element, options, state) => {
+            state.modifiers[modKey] = false
+        },
+    })),
+]
+
+export const postKeyupBehavior: behaviorPlugin[] = [
+    // AltGraph produces an extra keyup for Control
+    // The modifier does not change
+    {
+        matches: (keyDef) => keyDef.key === 'AltGraph',
+        handle: (keyDef, element, options, state) => {
+            const ctrlKeyDef = options.keyboardMap.find(k => k.key === 'Control')
+                ?? { key: 'Control', code: 'Control' }
+            fireEvent.keyUp(element, getKeyEventProps(ctrlKeyDef, state))
+        },
+    },
+]
\ No newline at end of file
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
new file mode 100644
index 00000000..86192b8c
--- /dev/null
+++ b/src/type/plugins/index.ts
@@ -0,0 +1,30 @@
+import { handleSelectall } from "type/specialCharCallbackMap/handleSelectall"
+import { behaviorPlugin } from "../types"
+import * as functionalKeys from './functional'
+import * as characterKeys from './character'
+
+export const replaceKeydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef) => keyDef.key === 'selectall',
+        handle: (keyDef, element) => {
+            handleSelectall({currentElement: () => element})
+            return false
+        }
+    }
+]
+
+export const preKeydownBehavior: behaviorPlugin[] = [
+    ...functionalKeys.preKeydownBehavior,
+]
+
+export const keydownBehavior: behaviorPlugin[] = [
+    ...characterKeys.keydownBehavior,
+]
+
+export const preKeyupBehavior: behaviorPlugin[] = [
+    ...functionalKeys.preKeyupBehavior,
+]
+
+export const postKeyupBehavior: behaviorPlugin[] = [
+    ...functionalKeys.postKeyupBehavior,
+]
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index bbafe30d..edb838f4 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -1,3 +1,4 @@
+import { fireEvent } from '@testing-library/dom'
 // TODO: wrap in asyncWrapper
 import {
   setSelectionRangeIfNecessary,
@@ -5,13 +6,13 @@ import {
   getValue,
   isContentEditable,
   getActiveElement,
-  isDisabled,
 } from '../utils'
 import {click} from '../click'
-import {modifierCallbackMap} from './modifierCallbackMap'
-import {specialCharCallbackMap} from './specialCharCallbackMap'
-import {typeCharacter} from './typeCharacter'
-import {callback, callbackPayload} from './callbacks'
+import { getNextKeyDef } from './getNextKeyDef'
+import type { modernTypeOptions, keyboardState, behaviorPlugin, keyboardKey } from './types'
+import * as plugins from './plugins'
+import { getKeyEventProps } from './getKeyEventProps'
+import { defaultKeyMap } from './keyMap'
 
 export interface typeOptions {
   delay?: number
@@ -71,125 +72,121 @@ export async function typeImplementation(
     )
   }
 
-  const eventCallbacks = queueCallbacks()
-  await runCallbacks(eventCallbacks)
-
-  function queueCallbacks() {
-    const callbacks = []
-    let remainingString = text
-
-    while (remainingString) {
-      const {
-        callback: cb,
-        remainingString: newRemainingString,
-      } = getNextCallback(remainingString, skipAutoClose)
+  await modernTypeImplementation(
+    element.ownerDocument,
+    text,
+    {
+      delay,
+      autoModify: false,
+      keyboardMap: defaultKeyMap,
+      skipAutoClose
+    },
+    createKeyboardState(),
+  ).catch(e => console.error(e))
+}
 
-      callbacks.push(cb)
-      remainingString = newRemainingString
-    }
+function wait(time?: number) {
+  return new Promise<void>(resolve => setTimeout(() => resolve(), time))
+}
 
-    return callbacks
+function createKeyboardState(): keyboardState {
+  return {
+    activeElement: null,
+    pressed: [],
+    carryChar: '',
+    modifiers: {
+      alt: false,
+      caps: false,
+      ctrl: false,
+      meta: false,
+      shift: false,
+    },
   }
+}
 
-  async function runCallbacks(callbacks: callback[]) {
-    const eventOverrides = {}
-    let prevWasMinus, prevWasPeriod, prevValue, typedValue
-    for (const cb of callbacks) {
-      if (delay > 0) await wait(delay)
-      if (!isDisabled(currentElement())) {
-        const returnValue: Partial<callbackPayload> | undefined = cb({
-          currentElement,
-          prevWasMinus,
-          prevWasPeriod,
-          prevValue,
-          eventOverrides,
-          typedValue,
-        })
-        Object.assign(eventOverrides, returnValue?.eventOverrides)
-        prevWasMinus = returnValue?.prevWasMinus
-        prevWasPeriod = returnValue?.prevWasPeriod
-        prevValue = returnValue?.prevValue
-        typedValue = returnValue?.typedValue
-      }
-    }
+async function modernTypeImplementation(
+  document: Document,
+  text: string,
+  options: modernTypeOptions,
+  state: keyboardState,
+): Promise<void> {
+  const currentElement = () => getActiveElement(document) ?? document.body
+  const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(text, options)
+
+  if (releasePrevious || state.pressed.includes(keyDef)) {
+    // this should probably throw an error when trying to release a key that is not pressed
+    keyup(keyDef, currentElement(), options, state)
   }
-}
 
-function wait(time?: number) {
-  return new Promise<void>(resolve => setTimeout(() => resolve(), time))
-}
+  if (!releasePrevious) {
+    keydown(keyDef, currentElement(), options, state)
 
-type callbackPrep =
-  | {
-      callback: callback
-      remainingString: string
+    if (releaseSelf) {
+      keyup(keyDef, currentElement(), options, state)
     }
-  | undefined
-
-function getNextCallback(
-  remainingString: string,
-  skipAutoClose: boolean,
-): NonNullable<callbackPrep> {
-  const modifierCallback = getModifierCallback(remainingString, skipAutoClose)
-  if (modifierCallback) {
-    return modifierCallback
   }
 
-  const specialCharCallback = getSpecialCharCallback(remainingString)
-  if (specialCharCallback) {
-    return specialCharCallback
+  if (text.length > consumedLength) {
+    if (options.delay > 0) {
+      await wait(options.delay)
+    }
+    await modernTypeImplementation(document, text.slice(consumedLength), options, state)
   }
-
-  return getTypeCallback(remainingString)
 }
 
-function getModifierCallback(
-  remainingString: string,
-  skipAutoClose: boolean,
-): callbackPrep {
-  const modifierKey = Object.keys(modifierCallbackMap).find(key =>
-    remainingString.startsWith(key),
-  )
-  if (!modifierKey) {
-    return undefined
+function keydown(
+  keyDef: keyboardKey,
+  element: Element,
+  options: modernTypeOptions,
+  state: keyboardState
+) {
+  // clear carried characters when focus is moved
+  if (element !== state.activeElement) {
+    state.carryChar = ''
   }
-  const cb =
-    modifierCallbackMap[modifierKey as keyof typeof modifierCallbackMap]
-
-  // 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 &&
-    cb.closeName &&
-    !remainingString.includes(cb.closeName)
-  ) {
-    remainingString += cb.closeName
+  state.activeElement = element
+
+  const replace = applyPlugins(plugins.replaceKeydownBehavior, keyDef, element, options, state)
+  if (replace) {
+    return
   }
-  remainingString = remainingString.slice(modifierKey.length)
-  return {
-    callback: cb,
-    remainingString,
+
+  applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
+
+  const unpreventedDefault = fireEvent.keyDown(element, getKeyEventProps(keyDef, state))
+
+  state.pressed.push(keyDef)
+
+  if (unpreventedDefault) {
+    applyPlugins(plugins.keydownBehavior, keyDef, element, options, state)
   }
 }
 
-function getSpecialCharCallback(remainingString: string): callbackPrep {
-  const specialChar = Object.keys(specialCharCallbackMap).find(key =>
-    remainingString.startsWith(key),
-  )
-  if (!specialChar) {
-    return undefined
-  }
-  return {
-    callback: specialCharCallbackMap[specialChar],
-    remainingString: remainingString.slice(specialChar.length),
-  }
+function keyup(
+  keyDef: keyboardKey,
+  element: Element,
+  options: modernTypeOptions,
+  state: keyboardState
+) {
+  fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
+
+  state.pressed = state.pressed.filter(k => k === keyDef)
+
+  applyPlugins(plugins.postKeyupBehavior, keyDef, element, options, state)
 }
 
-function getTypeCallback(remainingString: string): NonNullable<callbackPrep> {
-  const character = remainingString[0]
-  return {
-    callback: (context: callbackPayload) => typeCharacter(character, context),
-    remainingString: remainingString.slice(1),
+function applyPlugins(
+  pluginCollection: behaviorPlugin[],
+  keyDef: keyboardKey,
+  element: Element,
+  options: modernTypeOptions,
+  state: keyboardState,
+): boolean {
+  const plugin = pluginCollection.find(p => p.matches(keyDef, element, options, state))
+
+  if (plugin) {
+    plugin.handle(keyDef, element, options, state)
   }
+
+  return !!plugin
 }
diff --git a/src/type/types.ts b/src/type/types.ts
index 55992dd7..c242c3b3 100644
--- a/src/type/types.ts
+++ b/src/type/types.ts
@@ -19,14 +19,14 @@ export type keyboardState = {
       The element the keyboard input is performed on.
       Some behavior might differ if the activeElement changes between corresponding keyboard events.
     */
-  activeElement: HTMLElement | null
+  activeElement: Element | null
 
   /*
       For HTMLInputElements type='number':
       If the last input char is '.', '-' or 'e',
       the IDL value attribute does not reflect the input value.
     */
-  carryChar?: string
+  carryChar: string
 }
 
 export type modernTypeOptions = {
@@ -59,3 +59,8 @@ export interface keyboardKey {
   /* Does the character in `key` require/imply a shiftKey to be pressed? */
   shift?: boolean
 }
+
+export interface behaviorPlugin {
+  matches: (keyDef: keyboardKey, element: Element, options: modernTypeOptions, state: keyboardState) => boolean,
+  handle: (keyDef: keyboardKey, element: Element, options: modernTypeOptions, state: keyboardState) => void,
+}

From 9863138195b512371bf3ca8debb7fd268c75e11b Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 12:00:10 +0100
Subject: [PATCH 06/43] wip: fix textarea

---
 src/type/plugins/character.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 976cda5b..2901bf52 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -12,7 +12,7 @@ export const keydownBehavior: behaviorPlugin[] = [
     {
         matches: (keyDef, element) => keyDef.key?.length === 1 && (
             isInstanceOfElement(element, 'HTMLInputElement')
-            || isInstanceOfElement(element, 'HTMLTextareaElement')
+            || isInstanceOfElement(element, 'HTMLTextAreaElement')
             || isContentEditable(element)
         ),
         handle: (keyDef, element, options, state) => {

From d078392fd9e70d97ae803dcb3ad0e72aa79fd6a7 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 12:29:50 +0100
Subject: [PATCH 07/43] wip: fix bracketed key descriptor

---
 src/type/getNextKeyDef.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
index 73eabcf2..cf808d05 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/type/getNextKeyDef.ts
@@ -25,13 +25,13 @@ export function getNextKeyDef(
   const descriptor = startBracket
     ? text[descriptorStart] === startBracket
       ? startBracket
-      : text.slice().match(/^\w+/)?.[0]
+      : text.slice(descriptorStart).match(/^\w+/)?.[0]
     : text[descriptorStart]
 
   // istanbul ignore if
   if (!descriptor) {
     throw new Error(
-      `Unexpected character: "${text[descriptorStart]}" - Expected key descriptor`,
+      `Expected key descriptor but found "${text[descriptorStart]}" in "${text}`,
     )
   }
 
@@ -47,9 +47,7 @@ export function getNextKeyDef(
   // istanbul ignore if
   if (endBracket && text[descriptorEnd + endModifier.length] !== endBracket) {
     throw new Error(
-      `Unexpected character: "${
-        text[descriptorEnd + endModifier.length]
-      }" - Expected closing bracket`,
+      `Expected closing bracket but found "${text[descriptorEnd + endModifier.length]}" in "${text}`,
     )
   }
 

From 7dcd1a5555c94a20d21346c6ed40e8916fd07529 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 12:42:41 +0100
Subject: [PATCH 08/43] wip: delay before first char

---
 src/type/typeImplementation.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index edb838f4..5b625135 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -72,6 +72,12 @@ export async function typeImplementation(
     )
   }
 
+  // previous implementation did wait before the first character
+  // this probably can be removed
+  if (delay > 0) {
+    await wait(delay)
+  }
+
   await modernTypeImplementation(
     element.ownerDocument,
     text,

From 2b9ec5051d5a80c7d57c23c29ba6657d6c739e2e Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 14:12:24 +0100
Subject: [PATCH 09/43] wip: get activeElement before default keydown behavior

---
 src/type/typeImplementation.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 5b625135..321ed0ba 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -116,19 +116,19 @@ async function modernTypeImplementation(
   options: modernTypeOptions,
   state: keyboardState,
 ): Promise<void> {
-  const currentElement = () => getActiveElement(document) ?? document.body
+  const getCurrentElement = () => getActiveElement(document) ?? document.body
   const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(text, options)
 
   if (releasePrevious || state.pressed.includes(keyDef)) {
     // this should probably throw an error when trying to release a key that is not pressed
-    keyup(keyDef, currentElement(), options, state)
+    keyup(keyDef, getCurrentElement, options, state)
   }
 
   if (!releasePrevious) {
-    keydown(keyDef, currentElement(), options, state)
+    keydown(keyDef, getCurrentElement, options, state)
 
     if (releaseSelf) {
-      keyup(keyDef, currentElement(), options, state)
+      keyup(keyDef, getCurrentElement, options, state)
     }
   }
 
@@ -142,10 +142,12 @@ async function modernTypeImplementation(
 
 function keydown(
   keyDef: keyboardKey,
-  element: Element,
+  getCurrentElement: () => Element,
   options: modernTypeOptions,
   state: keyboardState
 ) {
+  const element = getCurrentElement()
+
   // clear carried characters when focus is moved
   if (element !== state.activeElement) {
     state.carryChar = ''
@@ -164,16 +166,19 @@ function keydown(
   state.pressed.push(keyDef)
 
   if (unpreventedDefault) {
-    applyPlugins(plugins.keydownBehavior, keyDef, element, options, state)
+    // all default behavior like keypress/submit etc is applied to the currentElement
+    applyPlugins(plugins.keydownBehavior, keyDef, getCurrentElement(), options, state)
   }
 }
 
 function keyup(
   keyDef: keyboardKey,
-  element: Element,
+  getCurrentElement: () => Element,
   options: modernTypeOptions,
   state: keyboardState
 ) {
+  const element = getCurrentElement()
+
   fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
 
   state.pressed = state.pressed.filter(k => k === keyDef)

From 3944223ae87622a37e51289a92a138ca5b8f296d Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 14:31:12 +0100
Subject: [PATCH 10/43] fix: activeElement is never disabled

---
 src/utils/focus/getActiveElement.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/utils/focus/getActiveElement.ts b/src/utils/focus/getActiveElement.ts
index 6d28ce79..b6dce830 100644
--- a/src/utils/focus/getActiveElement.ts
+++ b/src/utils/focus/getActiveElement.ts
@@ -1,10 +1,22 @@
+import { isDisabled } from "../misc"
+
 export function getActiveElement(
   document: Document | ShadowRoot,
 ): Element | null {
   const activeElement = document.activeElement
+
   if (activeElement?.shadowRoot) {
     return getActiveElement(activeElement.shadowRoot)
   } else {
+
+    // Browser does not yield disabled elements as document.activeElement - jsdom does
+    if (isDisabled(activeElement)) {
+      return document.ownerDocument
+        // TODO: verify behavior in ShadowRoot
+        ? document.ownerDocument.body
+        : document.body
+    }
+
     return activeElement
   }
 }

From 421afee68c364dc7d9aa7b47279f3b0c8f872a6e Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 14:40:36 +0100
Subject: [PATCH 11/43] wip: fix change event on date/time

---
 src/type/plugins/character.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 2901bf52..6a3786cb 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -45,15 +45,17 @@ export const keydownBehavior: behaviorPlugin[] = [
                 currentElement: () => element,
             })
 
-            if (isInputElement
-                && (element as HTMLInputElement).type === 'date'
-                && isValidDateValue(element, newValue)
-            ) {
-                fireEvent.change(element, {
-                    target: { value: newValue },
-                })
+            if (newValue !== oldValue) {
+                if(isInputElement
+                    && (element as HTMLInputElement).type === 'date'
+                    && isValidDateValue(element, newValue)
+                ) {
+                    fireEvent.change(element, {
+                        target: { value: newValue },
+                    })
+                }
+                fireChangeForInputTimeIfValid(() => element, oldValue, newTypeValue)
             }
-            fireChangeForInputTimeIfValid(() => element, oldValue, newTypeValue)
 
             if (newValue === oldValue) {
                 state.carryChar += keyDef.key

From 84975332d579ef940c42e09dbe8e1444d9b42f54 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 16:13:44 +0100
Subject: [PATCH 12/43] wip: fix value for date/number

---
 src/type/plugins/character.ts  | 25 +++++++++++++++----------
 src/type/typeImplementation.ts |  1 +
 src/type/types.ts              |  6 ++++++
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 6a3786cb..6bb21618 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -23,8 +23,9 @@ export const keydownBehavior: behaviorPlugin[] = [
 
             const isInputElement = isInstanceOfElement(element, 'HTMLInputElement')
 
-            const oldValue = getValue(element) ?? ''
-            let newTypeValue = state.carryChar + (keyDef.key as string)
+            const oldValue = getValue(element)
+
+            let newTypeValue = (state.carryValue ?? '') + (keyDef.key as string)
 
             if (isInputElement && (element as HTMLInputElement).type === 'time') {
                 const timeNewEntry = buildTimeValue(newTypeValue)
@@ -45,22 +46,26 @@ export const keydownBehavior: behaviorPlugin[] = [
                 currentElement: () => element,
             })
 
-            if (newValue !== oldValue) {
-                if(isInputElement
-                    && (element as HTMLInputElement).type === 'date'
-                    && isValidDateValue(element, newValue)
-                ) {
+            if (isInputElement && (element as HTMLInputElement).type === 'date') {
+                if (newValue === oldValue) {
+                    state.carryValue = newTypeValue
+                } else if (isValidDateValue(element, newValue)) {
                     fireEvent.change(element, {
                         target: { value: newValue },
                     })
                 }
+                return
+            }
+
+            if (isInputElement && (element as HTMLInputElement).type === 'time') {
                 fireChangeForInputTimeIfValid(() => element, oldValue, newTypeValue)
             }
 
-            if (newValue === oldValue) {
-                state.carryChar += keyDef.key
+            const appliedValue = getValue(element)
+            if (appliedValue === newValue) {
+                state.carryValue = undefined
             } else {
-                state.carryChar = ''
+                state.carryValue = newValue
             }
         },
     }
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 321ed0ba..0bcb8562 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -150,6 +150,7 @@ function keydown(
 
   // clear carried characters when focus is moved
   if (element !== state.activeElement) {
+    state.carryValue = undefined
     state.carryChar = ''
   }
   state.activeElement = element
diff --git a/src/type/types.ts b/src/type/types.ts
index c242c3b3..21b44da8 100644
--- a/src/type/types.ts
+++ b/src/type/types.ts
@@ -26,6 +26,12 @@ export type keyboardState = {
       If the last input char is '.', '-' or 'e',
       the IDL value attribute does not reflect the input value.
     */
+  carryValue?: string
+
+  /*
+      Carry over characters to following key handlers.
+      E.g. ^1
+    */
   carryChar: string
 }
 

From 18f48c3000fc31021f7b5af44e7403ecc678d7bc Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 19:04:16 +0100
Subject: [PATCH 13/43] wip: keypress plugins

---
 src/type/plugins/character.ts       | 111 ++++++++++++++++++++--------
 src/type/plugins/index.ts           |   8 +-
 src/type/typeImplementation.ts      |  33 ++++++++-
 src/utils/edit/calculateNewValue.ts |   5 +-
 4 files changed, 119 insertions(+), 38 deletions(-)

diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 6bb21618..3e7e03b4 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -3,38 +3,50 @@
  */
 
 import { fireEvent } from "@testing-library/dom";
-import { getKeyEventProps } from "type/getKeyEventProps";
 import { fireChangeForInputTimeIfValid, fireInputEventIfNeeded } from "type/shared";
 import { behaviorPlugin } from "type/types";
 import { buildTimeValue, calculateNewValue, getValue, isContentEditable, isInstanceOfElement, isValidDateValue, isValidInputTimeValue } from "utils";
 
-export const keydownBehavior: behaviorPlugin[] = [
+export const keypressBehavior: behaviorPlugin[] = [
     {
-        matches: (keyDef, element) => keyDef.key?.length === 1 && (
-            isInstanceOfElement(element, 'HTMLInputElement')
-            || isInstanceOfElement(element, 'HTMLTextAreaElement')
-            || isContentEditable(element)
-        ),
+        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'time',
         handle: (keyDef, element, options, state) => {
-            const keyPressResult = fireEvent.keyPress(element, getKeyEventProps(keyDef, state))
-            if (!keyPressResult) {
-                return
+            let newEntry = (keyDef.key as string)
+
+            const textToBeTyped = (state.carryValue ?? '') + newEntry
+            const timeNewEntry = buildTimeValue(textToBeTyped)
+            if (isValidInputTimeValue(element, timeNewEntry)) {
+                newEntry = timeNewEntry
             }
 
-            const isInputElement = isInstanceOfElement(element, 'HTMLInputElement')
+            const { newValue, newSelectionStart } = calculateNewValue(newEntry, element as HTMLElement)
 
-            const oldValue = getValue(element)
+            const { prevValue } = fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    data: keyDef.key,
+                    inputType: 'insertText',
+                },
+                currentElement: () => element,
+            })
 
-            let newTypeValue = (state.carryValue ?? '') + (keyDef.key as string)
+            fireChangeForInputTimeIfValid(() => element, prevValue, timeNewEntry)
 
-            if (isInputElement && (element as HTMLInputElement).type === 'time') {
-                const timeNewEntry = buildTimeValue(newTypeValue)
-                if (isValidInputTimeValue(element, timeNewEntry)) {
-                    newTypeValue = timeNewEntry
-                }
+            state.carryValue = textToBeTyped
+        },
+    },
+    {
+        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'date',
+        handle: (keyDef, element, options, state) => {
+            let newEntry = (keyDef.key as string)
+
+            const textToBeTyped = (state.carryValue ?? '') + newEntry
+            if (isValidDateValue(element, textToBeTyped)) {
+                newEntry = textToBeTyped
             }
 
-            const { newValue, newSelectionStart } = calculateNewValue(newTypeValue, element as HTMLElement)
+            const { newValue, newSelectionStart } = calculateNewValue(newEntry, element as HTMLElement)
 
             fireInputEventIfNeeded({
                 newValue,
@@ -46,21 +58,36 @@ export const keydownBehavior: behaviorPlugin[] = [
                 currentElement: () => element,
             })
 
-            if (isInputElement && (element as HTMLInputElement).type === 'date') {
-                if (newValue === oldValue) {
-                    state.carryValue = newTypeValue
-                } else if (isValidDateValue(element, newValue)) {
-                    fireEvent.change(element, {
-                        target: { value: newValue },
-                    })
-                }
-                return
+            if (isValidDateValue(element, textToBeTyped)) {
+                fireEvent.change(element, {
+                    target: { value: textToBeTyped },
+                })
             }
 
-            if (isInputElement && (element as HTMLInputElement).type === 'time') {
-                fireChangeForInputTimeIfValid(() => element, oldValue, newTypeValue)
+            state.carryValue = textToBeTyped
+        },
+    },
+    {
+        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'number',
+        handle: (keyDef, element, options, state) => {
+            if (!/[\d.\-e]/.test(keyDef.key as string)) {
+                return
             }
 
+            const oldValue = state.carryValue ?? getValue(element) ?? ''
+
+            const { newValue, newSelectionStart } = calculateNewValue(keyDef.key as string, element as HTMLElement, oldValue)
+
+            fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    data: keyDef.key,
+                    inputType: 'insertText',
+                },
+                currentElement: () => element,
+            })
+
             const appliedValue = getValue(element)
             if (appliedValue === newValue) {
                 state.carryValue = undefined
@@ -68,5 +95,25 @@ export const keydownBehavior: behaviorPlugin[] = [
                 state.carryValue = newValue
             }
         },
-    }
-]
\ No newline at end of file
+    },
+    {
+        matches: (keyDef, element) => keyDef.key?.length === 1 && (
+            isInstanceOfElement(element, 'HTMLInputElement')
+            || isInstanceOfElement(element, 'HTMLTextAreaElement')
+            || isContentEditable(element)
+        ),
+        handle: (keyDef, element) => {
+            const { newValue, newSelectionStart } = calculateNewValue(keyDef.key as string, element as HTMLElement)
+
+            fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    data: keyDef.key,
+                    inputType: 'insertText',
+                },
+                currentElement: () => element,
+            })
+        },
+    },
+]
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 86192b8c..3242b37c 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -18,13 +18,19 @@ export const preKeydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keydownBehavior: behaviorPlugin[] = [
-    ...characterKeys.keydownBehavior,
+]
+
+export const keypressBehavior: behaviorPlugin[] = [
+    ...characterKeys.keypressBehavior,
 ]
 
 export const preKeyupBehavior: behaviorPlugin[] = [
     ...functionalKeys.preKeyupBehavior,
 ]
 
+export const keyupBehavior: behaviorPlugin[] = [
+]
+
 export const postKeyupBehavior: behaviorPlugin[] = [
     ...functionalKeys.postKeyupBehavior,
 ]
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 0bcb8562..983e67b0 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -125,7 +125,11 @@ async function modernTypeImplementation(
   }
 
   if (!releasePrevious) {
-    keydown(keyDef, getCurrentElement, options, state)
+    const unpreventedKeypress = keydown(keyDef, getCurrentElement, options, state)
+
+    if (unpreventedKeypress && keyDef.key?.length === 1 || keyDef.key === 'Enter') {
+      keypress(keyDef, getCurrentElement, options, state)
+    }
 
     if (releaseSelf) {
       keyup(keyDef, getCurrentElement, options, state)
@@ -157,7 +161,7 @@ function keydown(
 
   const replace = applyPlugins(plugins.replaceKeydownBehavior, keyDef, element, options, state)
   if (replace) {
-    return
+    return false
   }
 
   applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
@@ -170,6 +174,23 @@ function keydown(
     // all default behavior like keypress/submit etc is applied to the currentElement
     applyPlugins(plugins.keydownBehavior, keyDef, getCurrentElement(), options, state)
   }
+
+  return unpreventedDefault
+}
+
+function keypress(
+  keyDef: keyboardKey,
+  getCurrentElement: () => Element,
+  options: modernTypeOptions,
+  state: keyboardState
+) {
+  const element = getCurrentElement()
+
+  const unpreventedDefault = fireEvent.keyPress(element, getKeyEventProps(keyDef, state))
+
+  if (unpreventedDefault) {
+    applyPlugins(plugins.keypressBehavior, keyDef, getCurrentElement(), options, state)
+  }
 }
 
 function keyup(
@@ -180,7 +201,13 @@ function keyup(
 ) {
   const element = getCurrentElement()
 
-  fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
+  applyPlugins(plugins.preKeyupBehavior, keyDef, element, options, state)
+
+  const unpreventedDefault = fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
+
+  if (unpreventedDefault) {
+    applyPlugins(plugins.keyupBehavior, keyDef, getCurrentElement(), options, state)
+  }
 
   state.pressed = state.pressed.filter(k => k === keyDef)
 
diff --git a/src/utils/edit/calculateNewValue.ts b/src/utils/edit/calculateNewValue.ts
index 6fbff870..a70e3115 100644
--- a/src/utils/edit/calculateNewValue.ts
+++ b/src/utils/edit/calculateNewValue.ts
@@ -6,12 +6,13 @@ import {isValidInputTimeValue} from './isValidInputTimeValue'
 export function calculateNewValue(
   newEntry: string,
   element: HTMLElement,
+  value = getValue(element),
+  selectionRange = getSelectionRange(element),
 ): {
   newValue: string
   newSelectionStart: number
 } {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-  const value = getValue(element)
+  const {selectionStart, selectionEnd} = selectionRange
 
   // can't use .maxLength property because of a jsdom bug:
   // https://github.com/jsdom/jsdom/issues/2927

From a7cc5486b4c78c5b1f6fdd41cd85005a624f0154 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 19:40:50 +0100
Subject: [PATCH 14/43] test: do not expect bug

---
 src/__tests__/type.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index 9940e78a..e48e931b 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -792,9 +792,7 @@ test('typing an invalid input value', () => {
   const {element} = setup('<input type="number" />')
   userEvent.type(element, '3-3')
 
-  // TODO: fix this bug
-  // THIS IS A BUG! It should be expect(element.value).toBe('')
-  expect(element).toHaveValue(-3)
+  expect(element).toHaveValue(null)
 
   // THIS IS A LIMITATION OF THE BROWSER
   // It is impossible to programmatically set an input

From a28f1c71fed44fc3451a26e4be93e4f2a05f0e9a Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 20:09:12 +0100
Subject: [PATCH 15/43] wip: add backspace

---
 src/type/getKeyEventProps.ts                  |  2 +-
 src/type/getNextKeyDef.ts                     |  2 +-
 src/type/keyMap.ts                            |  1 +
 src/type/plugins/functional.ts                | 27 +++++++++++-
 .../functional/calculateBackspaceValue.ts     | 43 +++++++++++++++++++
 src/type/plugins/index.ts                     |  1 +
 .../specialCharCallbackMap/handleBackspace.ts | 43 +------------------
 src/type/types.ts                             |  2 +
 8 files changed, 76 insertions(+), 45 deletions(-)
 create mode 100644 src/type/plugins/functional/calculateBackspaceValue.ts

diff --git a/src/type/getKeyEventProps.ts b/src/type/getKeyEventProps.ts
index 1a896f2e..321b2bb9 100644
--- a/src/type/getKeyEventProps.ts
+++ b/src/type/getKeyEventProps.ts
@@ -13,6 +13,6 @@ export function getKeyEventProps(
         shiftKey: state.modifiers.shift,
 
         // deprecated
-        keyCode: keyDef.key?.charCodeAt(0),
+        keyCode: keyDef.keyCode ?? keyDef.key?.charCodeAt(0),
     }
 }
diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
index cf808d05..a6046701 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/type/getNextKeyDef.ts
@@ -97,5 +97,5 @@ function hasReleaseSelf(startBracket: string, descriptor: string, endModifier: s
   if (startBracket === '{' && ['alt', 'control', 'meta', 'shift'].includes(descriptor.toLowerCase())) {
     return false
   }
-  return endModifier === '>'
+  return endModifier !== '>'
 }
diff --git a/src/type/keyMap.ts b/src/type/keyMap.ts
index 0b4deb87..764e3f04 100644
--- a/src/type/keyMap.ts
+++ b/src/type/keyMap.ts
@@ -23,6 +23,7 @@ export const defaultKeyMap: keyboardKey[] = [
   {code: 'MetaLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT},
   {code: 'MetaRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT},
   {code: 'CapsLock', key: 'CapsLock'},
+  {code: 'Backspace', key: 'Backspace', keyCode: 8},
 
   // TODO: add mappings
 ]
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index c25383c3..c47c0b67 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -4,8 +4,11 @@
  */
 
 import { fireEvent } from "@testing-library/dom"
-import { getKeyEventProps } from "type/getKeyEventProps"
+import { getValue } from "../../utils"
+import { getKeyEventProps } from "../getKeyEventProps"
+import { fireInputEventIfNeeded } from "../shared"
 import { behaviorPlugin } from "../types"
+import { calculateNewBackspaceValue } from "./functional/calculateBackspaceValue"
 
 const modifierKeys = {
     'Alt': 'alt',
@@ -36,6 +39,28 @@ export const preKeydownBehavior: behaviorPlugin[] = [
     },
 ]
 
+export const keydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef) => keyDef.key === 'Backspace',
+        handle: (keyDef, element, options, state) => {
+            const { newValue, newSelectionStart } = calculateNewBackspaceValue(element, state.carryValue)
+
+            fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    inputType: 'deleteContentBackward',
+                },
+                currentElement: () => element,
+            })
+
+            if (state.carryValue) {
+                state.carryValue = getValue(element) === newValue ? undefined : newValue
+            }
+        }
+    },
+]
+
 export const preKeyupBehavior: behaviorPlugin[] = [
     // modifierKeys switch off the modifier BEFORE the keyup event
     ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
diff --git a/src/type/plugins/functional/calculateBackspaceValue.ts b/src/type/plugins/functional/calculateBackspaceValue.ts
new file mode 100644
index 00000000..b61bb76a
--- /dev/null
+++ b/src/type/plugins/functional/calculateBackspaceValue.ts
@@ -0,0 +1,43 @@
+import { getSelectionRange, getValue } from "utils"
+
+// yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
+// and you may be tempted to create a shared abstraction.
+// If you, brave soul, decide to so endevor, please increment this count
+// when you inevitably fail: 1
+export function calculateNewBackspaceValue(
+    element: Element,
+    value = getValue(element) ?? '',
+) {
+    const { selectionStart, selectionEnd } = getSelectionRange(element)
+
+    let newValue, newSelectionStart
+
+    if (selectionStart === null) {
+        // at the end of an input type that does not support selection ranges
+        // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+        newValue = value.slice(0, value.length - 1)
+
+        newSelectionStart = newValue.length
+    } else if (selectionStart === selectionEnd) {
+        if (selectionStart === 0) {
+            // at the beginning of the input
+            newValue = value
+            newSelectionStart = selectionStart
+        } else if (selectionStart === value.length) {
+            // at the end of the input
+            newValue = value.slice(0, value.length - 1)
+            newSelectionStart = selectionStart - 1
+        } else {
+            // in the middle of the input
+            newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
+            newSelectionStart = selectionStart - 1
+        }
+    } else {
+        // we have something selected
+        const firstPart = value.slice(0, selectionStart)
+        newValue = firstPart + value.slice(selectionEnd as number)
+        newSelectionStart = firstPart.length
+    }
+
+    return { newValue, newSelectionStart }
+}
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 3242b37c..32d4e381 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -18,6 +18,7 @@ export const preKeydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keydownBehavior: behaviorPlugin[] = [
+    ...functionalKeys.keydownBehavior,
 ]
 
 export const keypressBehavior: behaviorPlugin[] = [
diff --git a/src/type/specialCharCallbackMap/handleBackspace.ts b/src/type/specialCharCallbackMap/handleBackspace.ts
index 9ba50251..9df3fe43 100644
--- a/src/type/specialCharCallbackMap/handleBackspace.ts
+++ b/src/type/specialCharCallbackMap/handleBackspace.ts
@@ -1,7 +1,7 @@
 import {fireEvent} from '@testing-library/dom'
 import {callbackPayload} from '../callbacks'
-import {getSelectionRange, getValue} from '../../utils'
 import {fireInputEventIfNeeded} from '../shared'
+import { calculateNewBackspaceValue } from '../plugins/functional/calculateBackspaceValue'
 
 export function handleBackspace({
   currentElement,
@@ -41,44 +41,3 @@ export function handleBackspace({
   return undefined
 }
 
-// yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
-// and you may be tempted to create a shared abstraction.
-// If you, brave soul, decide to so endevor, please increment this count
-// when you inevitably fail: 1
-function calculateNewBackspaceValue(element: Element) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-
-  // istanbul ignore next
-  const value = getValue(element) ?? ''
-
-  let newValue, newSelectionStart
-
-  if (selectionStart === null) {
-    // at the end of an input type that does not support selection ranges
-    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-    newValue = value.slice(0, value.length - 1)
-
-    newSelectionStart = newValue.length
-  } else if (selectionStart === selectionEnd) {
-    if (selectionStart === 0) {
-      // at the beginning of the input
-      newValue = value
-      newSelectionStart = selectionStart
-    } else if (selectionStart === value.length) {
-      // at the end of the input
-      newValue = value.slice(0, value.length - 1)
-      newSelectionStart = selectionStart - 1
-    } else {
-      // in the middle of the input
-      newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
-      newSelectionStart = selectionStart - 1
-    }
-  } else {
-    // we have something selected
-    const firstPart = value.slice(0, selectionStart)
-    newValue = firstPart + value.slice(selectionEnd as number)
-    newSelectionStart = firstPart.length
-  }
-
-  return {newValue, newSelectionStart}
-}
diff --git a/src/type/types.ts b/src/type/types.ts
index 21b44da8..e4898ff0 100644
--- a/src/type/types.ts
+++ b/src/type/types.ts
@@ -60,6 +60,8 @@ export interface keyboardKey {
   key?: string
   /* Location on the keyboard for keys with multiple representation */
   location?: DOM_KEY_LOCATION
+  /* keyCode for legacy support */
+  keyCode?: number
   /* Does the character in `key` require/imply AltRight to be pressed? */
   altGr?: boolean
   /* Does the character in `key` require/imply a shiftKey to be pressed? */

From 61631a1609e818031a6206975e276da70e238a0c Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 20:37:40 +0100
Subject: [PATCH 16/43] wip: add enter

---
 src/type/keyMap.ts             |  1 +
 src/type/plugins/character.ts  | 18 ++++++++++++++++++
 src/type/plugins/functional.ts | 31 ++++++++++++++++++++++++++++++-
 src/type/plugins/index.ts      |  1 +
 src/type/typeImplementation.ts |  2 +-
 5 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/type/keyMap.ts b/src/type/keyMap.ts
index 764e3f04..9ea2f276 100644
--- a/src/type/keyMap.ts
+++ b/src/type/keyMap.ts
@@ -24,6 +24,7 @@ export const defaultKeyMap: keyboardKey[] = [
   {code: 'MetaRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT},
   {code: 'CapsLock', key: 'CapsLock'},
   {code: 'Backspace', key: 'Backspace', keyCode: 8},
+  {code: 'Enter', key: 'Enter', keyCode: 13},
 
   // TODO: add mappings
 ]
diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 3e7e03b4..2c8f4bda 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -116,4 +116,22 @@ export const keypressBehavior: behaviorPlugin[] = [
             })
         },
     },
+    {
+        matches: (keyDef, element) => keyDef.key === 'Enter' && (
+            isInstanceOfElement(element, 'HTMLTextAreaElement')
+            || isContentEditable(element)
+        ),
+        handle: (keyDef, element) => {
+            const { newValue, newSelectionStart } = calculateNewValue('\n', element as HTMLElement)
+
+            fireInputEventIfNeeded({
+                newValue,
+                newSelectionStart,
+                eventOverrides: {
+                    inputType: 'insertLineBreak',
+                },
+                currentElement: () => element,
+            })
+        },
+    },
 ]
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index c47c0b67..1656b4df 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -4,7 +4,7 @@
  */
 
 import { fireEvent } from "@testing-library/dom"
-import { getValue } from "../../utils"
+import { getValue, isClickableInput, isInstanceOfElement } from "../../utils"
 import { getKeyEventProps } from "../getKeyEventProps"
 import { fireInputEventIfNeeded } from "../shared"
 import { behaviorPlugin } from "../types"
@@ -61,6 +61,35 @@ export const keydownBehavior: behaviorPlugin[] = [
     },
 ]
 
+export const keypressBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef, element) => keyDef.key === 'Enter' && (isClickableInput(element) ||
+            // Links with href defined should handle Enter the same as a click
+            isInstanceOfElement(element, 'HTMLAnchorElement') &&
+                Boolean((element as HTMLAnchorElement).href)
+        ),
+        handle: (keyDef, element) => {
+            fireEvent.click(element)
+        },
+    },
+    {
+        matches: (keyDef, element) => {
+            return keyDef.key === 'Enter' && isInstanceOfElement(element, 'HTMLInputElement')
+        },
+        handle: (keyDef, element) => {
+            const form = (element as HTMLInputElement).form
+
+            if (form && (
+                form.querySelectorAll('input').length === 1 ||
+                form.querySelector('input[type="submit"]') ||
+                form.querySelector('button[type="submit"]')
+            )){
+                fireEvent.submit(form)
+            }
+        },
+    },
+]
+
 export const preKeyupBehavior: behaviorPlugin[] = [
     // modifierKeys switch off the modifier BEFORE the keyup event
     ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 32d4e381..9e29a213 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -22,6 +22,7 @@ export const keydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keypressBehavior: behaviorPlugin[] = [
+    ...functionalKeys.keypressBehavior,
     ...characterKeys.keypressBehavior,
 ]
 
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 983e67b0..3df69850 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -127,7 +127,7 @@ async function modernTypeImplementation(
   if (!releasePrevious) {
     const unpreventedKeypress = keydown(keyDef, getCurrentElement, options, state)
 
-    if (unpreventedKeypress && keyDef.key?.length === 1 || keyDef.key === 'Enter') {
+    if (unpreventedKeypress && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
       keypress(keyDef, getCurrentElement, options, state)
     }
 

From defe327e80efedad959856a6af2c78935fdfe6f4 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 21:20:15 +0100
Subject: [PATCH 17/43] wip: add navigation keys

---
 src/type/keyMap.ts                            |  6 +++++
 src/type/plugins/arrow.ts                     | 25 ++++++++++++++++++
 src/type/plugins/control.ts                   | 26 +++++++++++++++++++
 src/type/plugins/functional.ts                |  4 +--
 src/type/plugins/index.ts                     |  6 ++++-
 .../specialCharCallbackMap/navigationKey.ts   |  2 +-
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/type/plugins/arrow.ts
 create mode 100644 src/type/plugins/control.ts

diff --git a/src/type/keyMap.ts b/src/type/keyMap.ts
index 9ea2f276..cc7ba4c2 100644
--- a/src/type/keyMap.ts
+++ b/src/type/keyMap.ts
@@ -25,6 +25,12 @@ export const defaultKeyMap: keyboardKey[] = [
   {code: 'CapsLock', key: 'CapsLock'},
   {code: 'Backspace', key: 'Backspace', keyCode: 8},
   {code: 'Enter', key: 'Enter', keyCode: 13},
+  {code: 'ArrowUp', key: 'ArrowUp', keyCode: 38},
+  {code: 'ArrowDown', key: 'ArrowDown', keyCode: 40},
+  {code: 'ArrowLeft', key: 'ArrowLeft', keyCode: 37},
+  {code: 'ArrowRight', key: 'ArrowRight', keyCode: 39},
+  {code: 'Home', key: 'Home', keyCode: 36},
+  {code: 'End', key: 'End', keyCode: 35},
 
   // TODO: add mappings
 ]
diff --git a/src/type/plugins/arrow.ts b/src/type/plugins/arrow.ts
new file mode 100644
index 00000000..d087f8db
--- /dev/null
+++ b/src/type/plugins/arrow.ts
@@ -0,0 +1,25 @@
+/**
+ * This file should contain behavior for arrow keys as described here:
+ * https://w3c.github.io/uievents-code/#key-arrowpad-section
+ */
+
+import { behaviorPlugin } from "../types";
+import { isInstanceOfElement, setSelectionRangeIfNecessary } from "../../utils";
+
+export const keydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef, element) => (keyDef.key === 'ArrowLeft' || keyDef.key === 'ArrowRight') && isInstanceOfElement(element, 'HTMLInputElement'),
+        handle: (keyDef, element) => {
+            const { selectionStart, selectionEnd } = element as HTMLInputElement
+
+            const direction = keyDef.key === 'ArrowLeft' ? -1 : 1
+
+            const newPos = (selectionStart === selectionEnd
+                ? (selectionStart ?? 0) + direction
+                : direction < 0 ? selectionStart : selectionEnd
+            ) ?? 0
+
+            setSelectionRangeIfNecessary(element, newPos, newPos)
+        }
+    },
+]
diff --git a/src/type/plugins/control.ts b/src/type/plugins/control.ts
new file mode 100644
index 00000000..5dd17e4a
--- /dev/null
+++ b/src/type/plugins/control.ts
@@ -0,0 +1,26 @@
+/**
+ * This file should contain behavior for arrow keys as described here:
+ * https://w3c.github.io/uievents-code/#key-controlpad-section
+ */
+
+import { behaviorPlugin } from "../types";
+import { getValue, isContentEditable, isInstanceOfElement, setSelectionRangeIfNecessary } from "../../utils";
+
+export const keydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef, element) => (keyDef.key === 'Home' || keyDef.key === 'End') && (
+            isInstanceOfElement(element, 'HTMLInputElement')
+            || isInstanceOfElement(element, 'HTMLTextAreaElement')
+            || isContentEditable(element)
+        ),
+        handle: (keyDef, element) => {
+            // This could probably been improved by collapsing a selection range
+            if (keyDef.key === 'Home') {
+                setSelectionRangeIfNecessary(element, 0, 0)
+            } else if (keyDef.key === 'End') {
+                const newPos = getValue(element)?.length ?? 0
+                setSelectionRangeIfNecessary(element, newPos, newPos)
+            }
+        }
+    },
+]
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index 1656b4df..84fb818a 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -73,9 +73,7 @@ export const keypressBehavior: behaviorPlugin[] = [
         },
     },
     {
-        matches: (keyDef, element) => {
-            return keyDef.key === 'Enter' && isInstanceOfElement(element, 'HTMLInputElement')
-        },
+        matches: (keyDef, element) => keyDef.key === 'Enter' && isInstanceOfElement(element, 'HTMLInputElement'),
         handle: (keyDef, element) => {
             const form = (element as HTMLInputElement).form
 
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 9e29a213..576f0c4b 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -1,7 +1,9 @@
 import { handleSelectall } from "type/specialCharCallbackMap/handleSelectall"
 import { behaviorPlugin } from "../types"
-import * as functionalKeys from './functional'
+import * as arrowKeys from './arrow'
+import * as controlKeys from './control'
 import * as characterKeys from './character'
+import * as functionalKeys from './functional'
 
 export const replaceKeydownBehavior: behaviorPlugin[] = [
     {
@@ -18,6 +20,8 @@ export const preKeydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keydownBehavior: behaviorPlugin[] = [
+    ...arrowKeys.keydownBehavior,
+    ...controlKeys.keydownBehavior,
     ...functionalKeys.keydownBehavior,
 ]
 
diff --git a/src/type/specialCharCallbackMap/navigationKey.ts b/src/type/specialCharCallbackMap/navigationKey.ts
index 2ca39362..caed16b1 100644
--- a/src/type/specialCharCallbackMap/navigationKey.ts
+++ b/src/type/specialCharCallbackMap/navigationKey.ts
@@ -47,7 +47,7 @@ export function navigationKey(key: keyof typeof keys): callback {
   }
 }
 
-function getSelectionRange(element: HTMLInputElement, key: string) {
+export function getSelectionRange(element: HTMLInputElement, key: string) {
   const {selectionStart, selectionEnd} = element
 
   // istanbul ignore if

From eb8280b0bb82fde384e455b6b685fe5eef8984d2 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 22:17:26 +0100
Subject: [PATCH 18/43] wip: fix special keys

---
 src/type/getKeyEventProps.ts   |  2 +-
 src/type/getNextKeyDef.ts      | 14 ++++++++++--
 src/type/keyMap.ts             | 39 ++++++++++++++++++++++++++--------
 src/type/plugins/functional.ts |  9 ++++++--
 4 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/type/getKeyEventProps.ts b/src/type/getKeyEventProps.ts
index 321b2bb9..e9150718 100644
--- a/src/type/getKeyEventProps.ts
+++ b/src/type/getKeyEventProps.ts
@@ -13,6 +13,6 @@ export function getKeyEventProps(
         shiftKey: state.modifiers.shift,
 
         // deprecated
-        keyCode: keyDef.keyCode ?? keyDef.key?.charCodeAt(0),
+        keyCode: keyDef.keyCode ?? (keyDef.key?.length === 1 ? keyDef.key.charCodeAt(0) : undefined),
     }
 }
diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
index a6046701..e60053cc 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/type/getNextKeyDef.ts
@@ -74,10 +74,11 @@ export function getNextKeyDef(
       ) ?? { key: descriptor, code: 'Unknown'},
     }
   } else if (startBracket === '{') {
+    const key = mapLegacyKey(descriptor)
     return {
       ...modifiers,
       keyDef: options.keyboardMap.find(
-        k => k.key?.toLowerCase() === descriptor.toLowerCase(),
+        k => k.key?.toLowerCase() === key.toLowerCase(),
       ) ?? {key: descriptor, code: 'Unknown'},
     }
   } else {
@@ -94,8 +95,17 @@ function hasReleaseSelf(startBracket: string, descriptor: string, endModifier: s
   if (endModifier === '/' || !startBracket) {
     return true
   }
-  if (startBracket === '{' && ['alt', 'control', 'meta', 'shift'].includes(descriptor.toLowerCase())) {
+  if (startBracket === '{' && ['alt', 'ctrl', 'meta', 'shift'].includes(descriptor.toLowerCase())) {
     return false
   }
   return endModifier !== '>'
 }
+
+function mapLegacyKey(descriptor: string) {
+  return {
+    'ctrl': 'Control',
+    'del': 'Delete',
+    'esc': 'Escape',
+    'space': ' ',
+  }[descriptor] ?? descriptor
+}
diff --git a/src/type/keyMap.ts b/src/type/keyMap.ts
index cc7ba4c2..2c23ca9d 100644
--- a/src/type/keyMap.ts
+++ b/src/type/keyMap.ts
@@ -4,6 +4,7 @@ import {DOM_KEY_LOCATION, keyboardKey} from './types'
  * Mapping for a default US-104-QWERTY keyboard
  */
 export const defaultKeyMap: keyboardKey[] = [
+  // alphanumeric keys
   ...'0123456789'.split('').map(c => ({code: `Digit${c}`, key: c})),
   ...')!@#$%^&*('
     .split('')
@@ -14,23 +15,43 @@ export const defaultKeyMap: keyboardKey[] = [
   ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
     .split('')
     .map(c => ({code: `Key${c}`, key: c, shiftKey: true})),
-  {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT},
-  {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT},
-  {code: 'ShiftLeft', key: 'Shift', location: DOM_KEY_LOCATION.LEFT},
-  {code: 'ShiftRight', key: 'Shift', location: DOM_KEY_LOCATION.RIGHT},
-  {code: 'ControlLeft', key: 'Control', location: DOM_KEY_LOCATION.LEFT},
-  {code: 'ControlRight', key: 'Control', location: DOM_KEY_LOCATION.RIGHT},
-  {code: 'MetaLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT},
-  {code: 'MetaRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT},
-  {code: 'CapsLock', key: 'CapsLock'},
+    
+  // alphanumeric block - functional
+  {code: 'Space', key: ' '},
+
+  {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT, keyCode: 18},
+  {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT, keyCode: 18},
+  {code: 'ShiftLeft', key: 'Shift', location: DOM_KEY_LOCATION.LEFT, keyCode: 16},
+  {code: 'ShiftRight', key: 'Shift', location: DOM_KEY_LOCATION.RIGHT, keyCode: 16},
+  {code: 'ControlLeft', key: 'Control', location: DOM_KEY_LOCATION.LEFT, keyCode: 17},
+  {code: 'ControlRight', key: 'Control', location: DOM_KEY_LOCATION.RIGHT, keyCode: 17},
+  {code: 'MetaLeft', key: 'Meta', location: DOM_KEY_LOCATION.LEFT, keyCode: 93},
+  {code: 'MetaRight', key: 'Meta', location: DOM_KEY_LOCATION.RIGHT, keyCode: 93},
+
+  {code: 'OSLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT, keyCode: 91},
+  {code: 'OSRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT, keyCode: 91},
+
+  {code: 'Escape', key: 'CapsLock', keyCode: 20},
+  {code: 'CapsLock', key: 'CapsLock', keyCode: 20},
   {code: 'Backspace', key: 'Backspace', keyCode: 8},
   {code: 'Enter', key: 'Enter', keyCode: 13},
+
+
+  // function
+  {code: 'Escape', key: 'Escape', keyCode: 27},
+
+
+  // arrows
   {code: 'ArrowUp', key: 'ArrowUp', keyCode: 38},
   {code: 'ArrowDown', key: 'ArrowDown', keyCode: 40},
   {code: 'ArrowLeft', key: 'ArrowLeft', keyCode: 37},
   {code: 'ArrowRight', key: 'ArrowRight', keyCode: 39},
+
+
+  // control pad
   {code: 'Home', key: 'Home', keyCode: 36},
   {code: 'End', key: 'End', keyCode: 35},
+  {code: 'Delete', key: 'Delete', keyCode: 46},
 
   // TODO: add mappings
 ]
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index 84fb818a..55707018 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -12,10 +12,9 @@ import { calculateNewBackspaceValue } from "./functional/calculateBackspaceValue
 
 const modifierKeys = {
     'Alt': 'alt',
-    'CapsLock': 'caps',
     'Control': 'ctrl',
     'Shift': 'shift',
-    'OS': 'meta',
+    'Meta': 'meta',
 } as const
 
 export const preKeydownBehavior: behaviorPlugin[] = [
@@ -40,6 +39,12 @@ export const preKeydownBehavior: behaviorPlugin[] = [
 ]
 
 export const keydownBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef) => keyDef.key === 'CapsLock',
+        handle: (keyDef, element, options, state) => {
+            state.modifiers.caps = !state.modifiers.caps
+        }
+    },
     {
         matches: (keyDef) => keyDef.key === 'Backspace',
         handle: (keyDef, element, options, state) => {

From eec73dd55efe550770682bc77b9227de925eea7b Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 22:51:13 +0100
Subject: [PATCH 19/43] wip: add space

---
 src/type/plugins/functional.ts |  9 +++++++++
 src/type/plugins/index.ts      |  5 +++--
 src/type/typeImplementation.ts | 22 ++++++++++++----------
 src/type/types.ts              |  2 +-
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index 55707018..c3a48d3c 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -103,6 +103,15 @@ export const preKeyupBehavior: behaviorPlugin[] = [
     })),
 ]
 
+export const keyupBehavior: behaviorPlugin[] = [
+    {
+        matches: (keyDef, element) => keyDef.key === ' ' && isClickableInput(element),
+        handle: (keyDef, element) => {
+            fireEvent.click(element)
+        }
+    },
+]
+
 export const postKeyupBehavior: behaviorPlugin[] = [
     // AltGraph produces an extra keyup for Control
     // The modifier does not change
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 576f0c4b..5182a6ce 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -11,8 +11,8 @@ export const replaceKeydownBehavior: behaviorPlugin[] = [
         handle: (keyDef, element) => {
             handleSelectall({currentElement: () => element})
             return false
-        }
-    }
+        },
+    },
 ]
 
 export const preKeydownBehavior: behaviorPlugin[] = [
@@ -35,6 +35,7 @@ export const preKeyupBehavior: behaviorPlugin[] = [
 ]
 
 export const keyupBehavior: behaviorPlugin[] = [
+    ...functionalKeys.keyupBehavior,
 ]
 
 export const postKeyupBehavior: behaviorPlugin[] = [
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 3df69850..8ca154fd 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -119,20 +119,21 @@ async function modernTypeImplementation(
   const getCurrentElement = () => getActiveElement(document) ?? document.body
   const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(text, options)
 
-  if (releasePrevious || state.pressed.includes(keyDef)) {
-    // this should probably throw an error when trying to release a key that is not pressed
-    keyup(keyDef, getCurrentElement, options, state)
+  const pressed = state.pressed.find(p => p.keyDef === keyDef)
+
+  if (pressed) {
+    keyup(keyDef, getCurrentElement, options, state, pressed.unpreventedDefault)
   }
 
   if (!releasePrevious) {
-    const unpreventedKeypress = keydown(keyDef, getCurrentElement, options, state)
+    const unpreventedDefault = keydown(keyDef, getCurrentElement, options, state)
 
-    if (unpreventedKeypress && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
+    if (unpreventedDefault && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
       keypress(keyDef, getCurrentElement, options, state)
     }
 
     if (releaseSelf) {
-      keyup(keyDef, getCurrentElement, options, state)
+      keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
     }
   }
 
@@ -168,7 +169,7 @@ function keydown(
 
   const unpreventedDefault = fireEvent.keyDown(element, getKeyEventProps(keyDef, state))
 
-  state.pressed.push(keyDef)
+  state.pressed.push({keyDef, unpreventedDefault})
 
   if (unpreventedDefault) {
     // all default behavior like keypress/submit etc is applied to the currentElement
@@ -197,7 +198,8 @@ function keyup(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
   options: modernTypeOptions,
-  state: keyboardState
+  state: keyboardState,
+  unprevented: boolean,
 ) {
   const element = getCurrentElement()
 
@@ -205,11 +207,11 @@ function keyup(
 
   const unpreventedDefault = fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
 
-  if (unpreventedDefault) {
+  if (unprevented && unpreventedDefault) {
     applyPlugins(plugins.keyupBehavior, keyDef, getCurrentElement(), options, state)
   }
 
-  state.pressed = state.pressed.filter(k => k === keyDef)
+  state.pressed = state.pressed.filter(k => k.keyDef !== keyDef)
 
   applyPlugins(plugins.postKeyupBehavior, keyDef, element, options, state)
 }
diff --git a/src/type/types.ts b/src/type/types.ts
index e4898ff0..4c43572c 100644
--- a/src/type/types.ts
+++ b/src/type/types.ts
@@ -2,7 +2,7 @@ export type keyboardState = {
   /*
       All keys that have been pressed and not been lifted up yet.
     */
-  pressed: keyboardKey[]
+  pressed: {keyDef: keyboardKey, unpreventedDefault: boolean}[]
 
   /*
       Active modifiers

From b22dc33e99bdefa7ec87b4339142b9569ecc5a1a Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 22:58:08 +0100
Subject: [PATCH 20/43] wip: fix selectall

---
 src/type/plugins/index.ts      |  2 +-
 src/type/typeImplementation.ts | 32 ++++++++++++++++----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 5182a6ce..945f85b7 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -5,7 +5,7 @@ import * as controlKeys from './control'
 import * as characterKeys from './character'
 import * as functionalKeys from './functional'
 
-export const replaceKeydownBehavior: behaviorPlugin[] = [
+export const replaceBehavior: behaviorPlugin[] = [
     {
         matches: (keyDef) => keyDef.key === 'selectall',
         handle: (keyDef, element) => {
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 8ca154fd..ddea77a9 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -119,22 +119,27 @@ async function modernTypeImplementation(
   const getCurrentElement = () => getActiveElement(document) ?? document.body
   const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(text, options)
 
-  const pressed = state.pressed.find(p => p.keyDef === keyDef)
+  const replace = applyPlugins(plugins.replaceBehavior, keyDef, getCurrentElement(), options, state)
+  if (!replace) {
 
-  if (pressed) {
-    keyup(keyDef, getCurrentElement, options, state, pressed.unpreventedDefault)
-  }
-
-  if (!releasePrevious) {
-    const unpreventedDefault = keydown(keyDef, getCurrentElement, options, state)
+    const pressed = state.pressed.find(p => p.keyDef === keyDef)
 
-    if (unpreventedDefault && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
-      keypress(keyDef, getCurrentElement, options, state)
+    if (pressed) {
+      keyup(keyDef, getCurrentElement, options, state, pressed.unpreventedDefault)
     }
 
-    if (releaseSelf) {
-      keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
+    if (!releasePrevious) {
+      const unpreventedDefault = keydown(keyDef, getCurrentElement, options, state)
+
+      if (unpreventedDefault && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
+        keypress(keyDef, getCurrentElement, options, state)
+      }
+
+      if (releaseSelf) {
+        keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
+      }
     }
+
   }
 
   if (text.length > consumedLength) {
@@ -160,11 +165,6 @@ function keydown(
   }
   state.activeElement = element
 
-  const replace = applyPlugins(plugins.replaceKeydownBehavior, keyDef, element, options, state)
-  if (replace) {
-    return false
-  }
-
   applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
 
   const unpreventedDefault = fireEvent.keyDown(element, getKeyEventProps(keyDef, state))

From 3c94d7be7b2efa81a04ca9329e903281ad89294b Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 22:59:31 +0100
Subject: [PATCH 21/43] test: fix expected events

---
 src/__tests__/type-modifiers.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/type-modifiers.js b/src/__tests__/type-modifiers.js
index 4bfe28b0..c0a447b2 100644
--- a/src/__tests__/type-modifiers.js
+++ b/src/__tests__/type-modifiers.js
@@ -353,10 +353,11 @@ test('{shift}a{/shift}', () => {
   `)
 })
 
-test('{capslock}a{/capslock}', () => {
+test('{capslock}a{capslock}', () => {
   const {element, getEventSnapshot} = setup('<input />')
 
-  userEvent.type(element, '{capslock}a{/capslock}')
+  // The old behavior to treat {/capslock} like {capslock} makes no sense
+  userEvent.type(element, '{capslock}a{capslock}')
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]

From 294409c75c014edbf8366730125dba454e764ebd Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 23:05:33 +0100
Subject: [PATCH 22/43] wip: add del

---
 src/type/plugins/control.ts                   | 17 +++++++++-
 .../control/calculateNewDeleteValue.ts        | 33 +++++++++++++++++++
 src/type/specialCharCallbackMap/handleDel.ts  | 33 +------------------
 3 files changed, 50 insertions(+), 33 deletions(-)
 create mode 100644 src/type/plugins/control/calculateNewDeleteValue.ts

diff --git a/src/type/plugins/control.ts b/src/type/plugins/control.ts
index 5dd17e4a..7e4ff160 100644
--- a/src/type/plugins/control.ts
+++ b/src/type/plugins/control.ts
@@ -5,6 +5,8 @@
 
 import { behaviorPlugin } from "../types";
 import { getValue, isContentEditable, isInstanceOfElement, setSelectionRangeIfNecessary } from "../../utils";
+import { fireInputEventIfNeeded } from "../shared";
+import { calculateNewDeleteValue } from "./control/calculateNewDeleteValue";
 
 export const keydownBehavior: behaviorPlugin[] = [
     {
@@ -21,6 +23,19 @@ export const keydownBehavior: behaviorPlugin[] = [
                 const newPos = getValue(element)?.length ?? 0
                 setSelectionRangeIfNecessary(element, newPos, newPos)
             }
-        }
+        },
+    },
+    {
+        matches: (keyDef) => keyDef.key === 'Delete',
+        handle: (keDef, element) => {
+            fireInputEventIfNeeded({
+                ...calculateNewDeleteValue(element),
+                eventOverrides: {
+                    inputType: 'deleteContentForward',
+                },
+                currentElement: () => element,
+            })
+
+        },
     },
 ]
diff --git a/src/type/plugins/control/calculateNewDeleteValue.ts b/src/type/plugins/control/calculateNewDeleteValue.ts
new file mode 100644
index 00000000..519a9289
--- /dev/null
+++ b/src/type/plugins/control/calculateNewDeleteValue.ts
@@ -0,0 +1,33 @@
+import { getSelectionRange, getValue } from "../../../utils"
+
+export function calculateNewDeleteValue(element: Element) {
+    const { selectionStart, selectionEnd } = getSelectionRange(element)
+
+    // istanbul ignore next
+    const value = getValue(element) ?? ''
+
+    let newValue
+
+    if (selectionStart === null) {
+        // at the end of an input type that does not support selection ranges
+        // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+        newValue = value
+    } else if (selectionStart === selectionEnd) {
+        if (selectionStart === 0) {
+            // at the beginning of the input
+            newValue = value.slice(1)
+        } else if (selectionStart === value.length) {
+            // at the end of the input
+            newValue = value
+        } else {
+            // in the middle of the input
+            newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
+        }
+    } else {
+        // we have something selected
+        const firstPart = value.slice(0, selectionStart)
+        newValue = firstPart + value.slice(selectionEnd as number)
+    }
+
+    return { newValue, newSelectionStart: selectionStart ?? 0 }
+}
diff --git a/src/type/specialCharCallbackMap/handleDel.ts b/src/type/specialCharCallbackMap/handleDel.ts
index bac9e603..381c73e6 100644
--- a/src/type/specialCharCallbackMap/handleDel.ts
+++ b/src/type/specialCharCallbackMap/handleDel.ts
@@ -1,7 +1,7 @@
 import {fireEvent} from '@testing-library/dom'
 import {callbackPayload} from '../callbacks'
-import {getSelectionRange, getValue} from '../../utils'
 import {fireInputEventIfNeeded} from '../shared'
+import { calculateNewDeleteValue } from '../plugins/control/calculateNewDeleteValue'
 
 export function handleDel({currentElement, eventOverrides}: callbackPayload) {
   const key = 'Delete'
@@ -38,34 +38,3 @@ export function handleDel({currentElement, eventOverrides}: callbackPayload) {
   return undefined
 }
 
-function calculateNewDeleteValue(element: Element) {
-  const {selectionStart, selectionEnd} = getSelectionRange(element)
-
-  // istanbul ignore next
-  const value = getValue(element) ?? ''
-
-  let newValue
-
-  if (selectionStart === null) {
-    // at the end of an input type that does not support selection ranges
-    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-    newValue = value
-  } else if (selectionStart === selectionEnd) {
-    if (selectionStart === 0) {
-      // at the beginning of the input
-      newValue = value.slice(1)
-    } else if (selectionStart === value.length) {
-      // at the end of the input
-      newValue = value
-    } else {
-      // in the middle of the input
-      newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
-    }
-  } else {
-    // we have something selected
-    const firstPart = value.slice(0, selectionStart)
-    newValue = firstPart + value.slice(selectionEnd as number)
-  }
-
-  return {newValue, newSelectionStart: selectionStart ?? 0}
-}

From 2308fd78b7dc0ad85bfe7685737fda4454ae795f Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 23:09:44 +0100
Subject: [PATCH 23/43] wip: fix meta keys on mouseevents

---
 src/type/{getKeyEventProps.ts => getEventProps.ts} | 11 +++++++++++
 src/type/plugins/functional.ts                     | 12 ++++++------
 src/type/typeImplementation.ts                     |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)
 rename src/type/{getKeyEventProps.ts => getEventProps.ts} (67%)

diff --git a/src/type/getKeyEventProps.ts b/src/type/getEventProps.ts
similarity index 67%
rename from src/type/getKeyEventProps.ts
rename to src/type/getEventProps.ts
index e9150718..e2bb03a6 100644
--- a/src/type/getKeyEventProps.ts
+++ b/src/type/getEventProps.ts
@@ -16,3 +16,14 @@ export function getKeyEventProps(
         keyCode: keyDef.keyCode ?? (keyDef.key?.length === 1 ? keyDef.key.charCodeAt(0) : undefined),
     }
 }
+
+export function getMouseEventProps(
+    state: keyboardState,
+) {
+    return {
+        altKey: state.modifiers.alt,
+        ctrlKey: state.modifiers.ctrl,
+        metaKey: state.modifiers.meta,
+        shiftKey: state.modifiers.shift,
+    }
+}
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index c3a48d3c..f7ff92ed 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -5,7 +5,7 @@
 
 import { fireEvent } from "@testing-library/dom"
 import { getValue, isClickableInput, isInstanceOfElement } from "../../utils"
-import { getKeyEventProps } from "../getKeyEventProps"
+import { getKeyEventProps, getMouseEventProps } from "../getEventProps"
 import { fireInputEventIfNeeded } from "../shared"
 import { behaviorPlugin } from "../types"
 import { calculateNewBackspaceValue } from "./functional/calculateBackspaceValue"
@@ -73,8 +73,8 @@ export const keypressBehavior: behaviorPlugin[] = [
             isInstanceOfElement(element, 'HTMLAnchorElement') &&
                 Boolean((element as HTMLAnchorElement).href)
         ),
-        handle: (keyDef, element) => {
-            fireEvent.click(element)
+        handle: (keyDef, element, options, state) => {
+            fireEvent.click(element, getMouseEventProps(state))
         },
     },
     {
@@ -106,9 +106,9 @@ export const preKeyupBehavior: behaviorPlugin[] = [
 export const keyupBehavior: behaviorPlugin[] = [
     {
         matches: (keyDef, element) => keyDef.key === ' ' && isClickableInput(element),
-        handle: (keyDef, element) => {
-            fireEvent.click(element)
-        }
+        handle: (keyDef, element, options, state) => {
+            fireEvent.click(element, getMouseEventProps(state))
+        },
     },
 ]
 
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index ddea77a9..e4419217 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -11,7 +11,7 @@ import {click} from '../click'
 import { getNextKeyDef } from './getNextKeyDef'
 import type { modernTypeOptions, keyboardState, behaviorPlugin, keyboardKey } from './types'
 import * as plugins from './plugins'
-import { getKeyEventProps } from './getKeyEventProps'
+import { getKeyEventProps } from './getEventProps'
 import { defaultKeyMap } from './keyMap'
 
 export interface typeOptions {

From 4fbfae66ecf829aa7643c68b45a236ab252112fd Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 23:14:24 +0100
Subject: [PATCH 24/43] wip: add autoclose

---
 src/type/typeImplementation.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index e4419217..d94532c1 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -147,6 +147,10 @@ async function modernTypeImplementation(
       await wait(options.delay)
     }
     await modernTypeImplementation(document, text.slice(consumedLength), options, state)
+  } else if(!options.skipAutoClose) {
+    for (const k of state.pressed) {
+      keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
+    }
   }
 }
 

From a389ccc766af61277586723c286ecb327bc81797 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 11 Mar 2021 23:26:36 +0100
Subject: [PATCH 25/43] wip: remove obsolete code

---
 src/type/callbacks.ts                         |  13 --
 src/type/modifierCallbackMap.ts               | 117 -----------------
 src/type/plugins/index.ts                     |  10 +-
 .../specialCharCallbackMap/handleArrowDown.ts |  26 ----
 .../specialCharCallbackMap/handleArrowUp.ts   |  26 ----
 .../specialCharCallbackMap/handleBackspace.ts |  43 -------
 src/type/specialCharCallbackMap/handleDel.ts  |  40 ------
 .../specialCharCallbackMap/handleEnter.ts     |  88 -------------
 src/type/specialCharCallbackMap/handleEsc.ts  |  25 ----
 .../specialCharCallbackMap/handleSelectall.ts |  11 --
 .../specialCharCallbackMap/handleSpace.ts     |  58 ---------
 src/type/specialCharCallbackMap/index.ts      |  26 ----
 .../specialCharCallbackMap/navigationKey.ts   |  77 -----------
 src/type/typeCharacter.ts                     | 120 ------------------
 14 files changed, 6 insertions(+), 674 deletions(-)
 delete mode 100644 src/type/callbacks.ts
 delete mode 100644 src/type/modifierCallbackMap.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleArrowDown.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleArrowUp.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleBackspace.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleDel.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleEnter.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleEsc.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleSelectall.ts
 delete mode 100644 src/type/specialCharCallbackMap/handleSpace.ts
 delete mode 100644 src/type/specialCharCallbackMap/index.ts
 delete mode 100644 src/type/specialCharCallbackMap/navigationKey.ts
 delete mode 100644 src/type/typeCharacter.ts

diff --git a/src/type/callbacks.ts b/src/type/callbacks.ts
deleted file mode 100644
index b3a45539..00000000
--- a/src/type/callbacks.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface callbackPayload {
-  currentElement: () => Element | null
-  prevWasMinus?: boolean
-  prevWasPeriod?: boolean
-  prevValue?: string
-  typedValue?: string
-  eventOverrides?: {[k: string]: unknown}
-}
-
-export interface callback {
-  (callbackPayload: callbackPayload): Partial<callbackPayload> | undefined
-  closeName?: string
-}
diff --git a/src/type/modifierCallbackMap.ts b/src/type/modifierCallbackMap.ts
deleted file mode 100644
index ba05428e..00000000
--- a/src/type/modifierCallbackMap.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callback, callbackPayload} from './callbacks'
-
-function createModifierCallbackEntries({
-  name,
-  key,
-  keyCode,
-  modifierProperty,
-}: {
-  name: string
-  key: string
-  keyCode: number
-  modifierProperty: string
-}): {[k: string]: callback} {
-  const openName = `{${name}}`
-  const closeName = `{/${name}}`
-
-  function open({currentElement, eventOverrides}: callbackPayload) {
-    const newEventOverrides = {[modifierProperty]: true}
-
-    fireEvent.keyDown(currentElement() as Element, {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  }
-  open.closeName = closeName
-  function close({currentElement, eventOverrides}: callbackPayload) {
-    const newEventOverrides = {[modifierProperty]: false}
-
-    fireEvent.keyUp(currentElement() as Element, {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  }
-  return {
-    [openName]: open,
-    [closeName]: close,
-  }
-}
-
-export const modifierCallbackMap: {[k: string]: callback} = {
-  ...createModifierCallbackEntries({
-    name: 'shift',
-    key: 'Shift',
-    keyCode: 16,
-    modifierProperty: 'shiftKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'ctrl',
-    key: 'Control',
-    keyCode: 17,
-    modifierProperty: 'ctrlKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'alt',
-    key: 'Alt',
-    keyCode: 18,
-    modifierProperty: 'altKey',
-  }),
-  ...createModifierCallbackEntries({
-    name: 'meta',
-    key: 'Meta',
-    keyCode: 93,
-    modifierProperty: 'metaKey',
-  }),
-  // capslock is inline because of the need to fire both keydown and keyup on use, while preserving the modifier state.
-  '{capslock}': function capslockOn({currentElement, eventOverrides}) {
-    const newEventOverrides = {modifierCapsLock: true}
-
-    fireEvent.keyDown(currentElement() as Element, {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-    fireEvent.keyUp(currentElement() as Element, {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  },
-  '{/capslock}': function capslockOff({currentElement, eventOverrides}) {
-    const newEventOverrides = {modifierCapsLock: false}
-
-    fireEvent.keyDown(currentElement() as Element, {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-    fireEvent.keyUp(currentElement() as Element, {
-      key: 'CapsLock',
-      keyCode: 20,
-      which: 20,
-      ...eventOverrides,
-      ...newEventOverrides,
-    })
-
-    return {eventOverrides: newEventOverrides}
-  },
-}
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
index 945f85b7..58edc5ac 100644
--- a/src/type/plugins/index.ts
+++ b/src/type/plugins/index.ts
@@ -1,5 +1,5 @@
-import { handleSelectall } from "type/specialCharCallbackMap/handleSelectall"
 import { behaviorPlugin } from "../types"
+import { isInstanceOfElement } from "../../utils"
 import * as arrowKeys from './arrow'
 import * as controlKeys from './control'
 import * as characterKeys from './character'
@@ -7,10 +7,12 @@ import * as functionalKeys from './functional'
 
 export const replaceBehavior: behaviorPlugin[] = [
     {
-        matches: (keyDef) => keyDef.key === 'selectall',
+        matches: (keyDef, element) => keyDef.key === 'selectall' && (
+            isInstanceOfElement(element, 'HTMLInputElement')
+            || isInstanceOfElement(element, 'HTMLTextAreaElement')
+        ),
         handle: (keyDef, element) => {
-            handleSelectall({currentElement: () => element})
-            return false
+            (element as HTMLInputElement).select()
         },
     },
 ]
diff --git a/src/type/specialCharCallbackMap/handleArrowDown.ts b/src/type/specialCharCallbackMap/handleArrowDown.ts
deleted file mode 100644
index 205fa072..00000000
--- a/src/type/specialCharCallbackMap/handleArrowDown.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-
-export function handleArrowDown({
-  currentElement,
-  eventOverrides,
-}: callbackPayload) {
-  const key = 'ArrowDown'
-  const keyCode = 40
-
-  fireEvent.keyDown(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/handleArrowUp.ts b/src/type/specialCharCallbackMap/handleArrowUp.ts
deleted file mode 100644
index a8f5866a..00000000
--- a/src/type/specialCharCallbackMap/handleArrowUp.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-
-export function handleArrowUp({
-  currentElement,
-  eventOverrides,
-}: callbackPayload) {
-  const key = 'ArrowUp'
-  const keyCode = 38
-
-  fireEvent.keyDown(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/handleBackspace.ts b/src/type/specialCharCallbackMap/handleBackspace.ts
deleted file mode 100644
index 9df3fe43..00000000
--- a/src/type/specialCharCallbackMap/handleBackspace.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-import {fireInputEventIfNeeded} from '../shared'
-import { calculateNewBackspaceValue } from '../plugins/functional/calculateBackspaceValue'
-
-export function handleBackspace({
-  currentElement,
-  eventOverrides,
-}: callbackPayload) {
-  const key = 'Backspace'
-  const keyCode = 8
-
-  const keyPressDefaultNotPrevented = fireEvent.keyDown(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyPressDefaultNotPrevented) {
-    fireInputEventIfNeeded({
-      ...calculateNewBackspaceValue(currentElement() as Element),
-      eventOverrides: {
-        inputType: 'deleteContentBackward',
-        ...eventOverrides,
-      },
-      currentElement,
-    })
-  }
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
-
diff --git a/src/type/specialCharCallbackMap/handleDel.ts b/src/type/specialCharCallbackMap/handleDel.ts
deleted file mode 100644
index 381c73e6..00000000
--- a/src/type/specialCharCallbackMap/handleDel.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-import {fireInputEventIfNeeded} from '../shared'
-import { calculateNewDeleteValue } from '../plugins/control/calculateNewDeleteValue'
-
-export function handleDel({currentElement, eventOverrides}: callbackPayload) {
-  const key = 'Delete'
-  const keyCode = 46
-
-  const keyPressDefaultNotPrevented = fireEvent.keyDown(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyPressDefaultNotPrevented) {
-    fireInputEventIfNeeded({
-      ...calculateNewDeleteValue(currentElement() as Element),
-      eventOverrides: {
-        inputType: 'deleteContentForward',
-        ...eventOverrides,
-      },
-      currentElement,
-    })
-  }
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
-
diff --git a/src/type/specialCharCallbackMap/handleEnter.ts b/src/type/specialCharCallbackMap/handleEnter.ts
deleted file mode 100644
index 5eae5479..00000000
--- a/src/type/specialCharCallbackMap/handleEnter.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {
-  calculateNewValue,
-  isClickableInput,
-  isInstanceOfElement,
-} from '../../utils/'
-import {setSelectionRange} from '../shared'
-import {callbackPayload} from '../callbacks'
-
-export function handleEnter({currentElement, eventOverrides}: callbackPayload) {
-  const key = 'Enter'
-  const keyCode = 13
-
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyDownDefaultNotPrevented) {
-    const keyPressDefaultNotPrevented = fireEvent.keyPress(
-      currentElement() as Element,
-      {
-        key,
-        keyCode,
-        charCode: keyCode,
-        ...eventOverrides,
-      },
-    )
-
-    if (keyPressDefaultNotPrevented) {
-      if (
-        isClickableInput(currentElement() as Element) ||
-        // Links with href defined should handle Enter the same as a click
-        (isInstanceOfElement(
-          currentElement() as Element,
-          'HTMLAnchorElement',
-        ) &&
-          (currentElement() as HTMLAnchorElement).href)
-      ) {
-        fireEvent.click(currentElement() as Element, {
-          ...eventOverrides,
-        })
-      }
-
-      if ((currentElement() as Element).tagName === 'TEXTAREA') {
-        const {newValue, newSelectionStart} = calculateNewValue(
-          '\n',
-          currentElement() as HTMLElement,
-        )
-        fireEvent.input(currentElement() as Element, {
-          target: {value: newValue},
-          inputType: 'insertLineBreak',
-          ...eventOverrides,
-        })
-        setSelectionRange({
-          currentElement,
-          newValue,
-          newSelectionStart,
-        })
-      }
-
-      const el = currentElement()
-      const form = el?.tagName === 'INPUT' && (el as HTMLInputElement).form
-      if (
-        form &&
-        (form.querySelectorAll('input').length === 1 ||
-          form.querySelector('input[type="submit"]') ||
-          form.querySelector('button[type="submit"]'))
-      ) {
-        fireEvent.submit(form)
-      }
-    }
-  }
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/handleEsc.ts b/src/type/specialCharCallbackMap/handleEsc.ts
deleted file mode 100644
index aa7fcceb..00000000
--- a/src/type/specialCharCallbackMap/handleEsc.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-
-export function handleEsc({currentElement, eventOverrides}: callbackPayload) {
-  const key = 'Escape'
-  const keyCode = 27
-
-  fireEvent.keyDown(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  // NOTE: Browsers do not fire a keypress on meta key presses
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/handleSelectall.ts b/src/type/specialCharCallbackMap/handleSelectall.ts
deleted file mode 100644
index 41270797..00000000
--- a/src/type/specialCharCallbackMap/handleSelectall.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {callbackPayload} from '../callbacks'
-import {getValue} from '../../utils/edit'
-
-export function handleSelectall({currentElement}: callbackPayload) {
-  ;(currentElement() as HTMLInputElement).setSelectionRange(
-    0,
-    (getValue(currentElement() as HTMLInputElement) as string).length,
-  )
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/handleSpace.ts b/src/type/specialCharCallbackMap/handleSpace.ts
deleted file mode 100644
index e7856149..00000000
--- a/src/type/specialCharCallbackMap/handleSpace.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callbackPayload} from '../callbacks'
-import {isClickableInput} from '../../utils/click'
-import {typeCharacter} from '../typeCharacter'
-
-export function handleSpace(context: callbackPayload) {
-  const el = context.currentElement()
-  if (el && isClickableInput(el)) {
-    return handleSpaceOnClickable(context)
-  }
-
-  return typeCharacter(' ', context)
-}
-
-function handleSpaceOnClickable({
-  currentElement,
-  eventOverrides,
-}: callbackPayload) {
-  const key = ' '
-  const keyCode = 32
-
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyDownDefaultNotPrevented) {
-    fireEvent.keyPress(currentElement() as Element, {
-      key,
-      keyCode,
-      charCode: keyCode,
-      ...eventOverrides,
-    })
-  }
-
-  const keyUpDefaultNotPrevented = fireEvent.keyUp(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyDownDefaultNotPrevented && keyUpDefaultNotPrevented) {
-    fireEvent.click(currentElement() as Element, {
-      ...eventOverrides,
-    })
-  }
-
-  return undefined
-}
diff --git a/src/type/specialCharCallbackMap/index.ts b/src/type/specialCharCallbackMap/index.ts
deleted file mode 100644
index 41b456fc..00000000
--- a/src/type/specialCharCallbackMap/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {specialCharMap} from '../specialCharMap'
-import {handleArrowDown} from './handleArrowDown'
-import {handleArrowUp} from './handleArrowUp'
-import {handleBackspace} from './handleBackspace'
-import {handleDel} from './handleDel'
-import {handleEnter} from './handleEnter'
-import {handleEsc} from './handleEsc'
-import {handleSelectall} from './handleSelectall'
-import {handleSpace} from './handleSpace'
-import {navigationKey} from './navigationKey'
-
-export const specialCharCallbackMap = {
-  [specialCharMap.arrowLeft]: navigationKey('ArrowLeft'),
-  [specialCharMap.arrowRight]: navigationKey('ArrowRight'),
-  [specialCharMap.arrowDown]: handleArrowDown,
-  [specialCharMap.arrowUp]: handleArrowUp,
-  [specialCharMap.home]: navigationKey('Home'),
-  [specialCharMap.end]: navigationKey('End'),
-  [specialCharMap.enter]: handleEnter,
-  [specialCharMap.escape]: handleEsc,
-  [specialCharMap.delete]: handleDel,
-  [specialCharMap.backspace]: handleBackspace,
-  [specialCharMap.selectAll]: handleSelectall,
-  [specialCharMap.space]: handleSpace,
-  [specialCharMap.whitespace]: handleSpace,
-}
diff --git a/src/type/specialCharCallbackMap/navigationKey.ts b/src/type/specialCharCallbackMap/navigationKey.ts
deleted file mode 100644
index caed16b1..00000000
--- a/src/type/specialCharCallbackMap/navigationKey.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import {fireEvent} from '@testing-library/dom'
-import {callback} from '../callbacks'
-
-import {setSelectionRangeIfNecessary} from '../../utils/edit'
-
-const keys = {
-  Home: {
-    keyCode: 36,
-  },
-  End: {
-    keyCode: 35,
-  },
-  ArrowLeft: {
-    keyCode: 37,
-  },
-  ArrowRight: {
-    keyCode: 39,
-  },
-}
-
-export function navigationKey(key: keyof typeof keys): callback {
-  const event = {
-    key,
-    keyCode: keys[key].keyCode,
-    which: keys[key].keyCode,
-  }
-
-  return ({currentElement, eventOverrides}) => {
-    fireEvent.keyDown(currentElement() as Element, {
-      ...event,
-      ...eventOverrides,
-    })
-
-    const range = getSelectionRange(currentElement() as HTMLInputElement, key)
-    setSelectionRangeIfNecessary(
-      currentElement() as Element,
-      range.selectionStart,
-      range.selectionEnd,
-    )
-
-    fireEvent.keyUp(currentElement() as Element, {
-      ...event,
-      ...eventOverrides,
-    })
-
-    return undefined
-  }
-}
-
-export function getSelectionRange(element: HTMLInputElement, key: string) {
-  const {selectionStart, selectionEnd} = element
-
-  // istanbul ignore if
-  if (typeof selectionStart !== 'number' || typeof selectionEnd !== 'number') {
-    return {selectionStart: 0, selectionEnd: 0}
-  }
-
-  if (key === 'Home') {
-    return {
-      selectionStart: 0,
-      selectionEnd: 0,
-    }
-  }
-
-  if (key === 'End') {
-    return {
-      selectionStart: selectionEnd + 1,
-      selectionEnd: selectionEnd + 1,
-    }
-  }
-
-  const cursorChange = Number(key in keys) * (key === 'ArrowLeft' ? -1 : 1)
-  return {
-    selectionStart: selectionStart + cursorChange,
-    selectionEnd: selectionEnd + cursorChange,
-  }
-}
diff --git a/src/type/typeCharacter.ts b/src/type/typeCharacter.ts
deleted file mode 100644
index 9ef3bb12..00000000
--- a/src/type/typeCharacter.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-// TODO: wrap in asyncWrapper
-import {fireEvent} from '@testing-library/dom'
-
-import {
-  calculateNewValue,
-  isValidDateValue,
-  getValue,
-  isValidInputTimeValue,
-  buildTimeValue,
-} from '../utils/edit'
-import {callbackPayload} from './callbacks'
-import {fireChangeForInputTimeIfValid, fireInputEventIfNeeded} from './shared'
-
-export function typeCharacter(
-  char: string,
-  {
-    currentElement,
-    prevWasMinus = false,
-    prevWasPeriod = false,
-    prevValue = '',
-    typedValue = '',
-    eventOverrides,
-  }: callbackPayload,
-) {
-  const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
-  const keyCode = char.charCodeAt(0)
-  let nextPrevWasMinus, nextPrevWasPeriod
-  const textToBeTyped = typedValue + char
-  const keyDownDefaultNotPrevented = fireEvent.keyDown(
-    currentElement() as Element,
-    {
-      key,
-      keyCode,
-      which: keyCode,
-      ...eventOverrides,
-    },
-  )
-
-  if (keyDownDefaultNotPrevented) {
-    const keyPressDefaultNotPrevented = fireEvent.keyPress(
-      currentElement() as Element,
-      {
-        key,
-        keyCode,
-        charCode: keyCode,
-        ...eventOverrides,
-      },
-    )
-    if (getValue(currentElement()) != null && keyPressDefaultNotPrevented) {
-      let newEntry = char
-      if (prevWasMinus) {
-        newEntry = `-${char}`
-      } else if (prevWasPeriod) {
-        newEntry = `${prevValue}.${char}`
-      }
-
-      if (isValidDateValue(currentElement() as Element, textToBeTyped)) {
-        newEntry = textToBeTyped
-      }
-
-      const timeNewEntry = buildTimeValue(textToBeTyped)
-      if (isValidInputTimeValue(currentElement() as Element, timeNewEntry)) {
-        newEntry = timeNewEntry
-      }
-
-      const inputEvent = fireInputEventIfNeeded({
-        ...calculateNewValue(newEntry, currentElement() as HTMLElement),
-        eventOverrides: {
-          data: key,
-          inputType: 'insertText',
-          ...eventOverrides,
-        },
-        currentElement,
-      })
-      prevValue = inputEvent.prevValue as string
-
-      if (isValidDateValue(currentElement() as Element, textToBeTyped)) {
-        fireEvent.change(currentElement() as Element, {
-          target: {value: textToBeTyped},
-        })
-      }
-
-      fireChangeForInputTimeIfValid(currentElement, prevValue, timeNewEntry)
-
-      // typing "-" into a number input will not actually update the value
-      // so for the next character we type, the value should be set to
-      // `-${newEntry}`
-      // we also preserve the prevWasMinus when the value is unchanged due
-      // to typing an invalid character (typing "-a3" results in "-3")
-      // same applies for the decimal character.
-      if ((currentElement() as HTMLInputElement).type === 'number') {
-        const newValue = getValue(currentElement())
-        if (newValue === prevValue && newEntry !== '-') {
-          nextPrevWasMinus = prevWasMinus
-        } else {
-          nextPrevWasMinus = newEntry === '-'
-        }
-        if (newValue === prevValue && newEntry !== '.') {
-          nextPrevWasPeriod = prevWasPeriod
-        } else {
-          nextPrevWasPeriod = newEntry === '.'
-        }
-      }
-    }
-  }
-
-  fireEvent.keyUp(currentElement() as Element, {
-    key,
-    keyCode,
-    which: keyCode,
-    ...eventOverrides,
-  })
-
-  return {
-    prevWasMinus: nextPrevWasMinus,
-    prevWasPeriod: nextPrevWasPeriod,
-    prevValue,
-    typedValue: textToBeTyped,
-  }
-}

From e77dfb3c7d1d37ab185796d85a97370b42bd5d7a Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Fri, 12 Mar 2021 01:06:34 +0100
Subject: [PATCH 26/43] wip: fix escaped bracket

---
 src/__tests__/type/getNextKeyDef.ts | 94 +++++++++++++++++++++++++++++
 src/type/getNextKeyDef.ts           |  6 +-
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/type/getNextKeyDef.ts

diff --git a/src/__tests__/type/getNextKeyDef.ts b/src/__tests__/type/getNextKeyDef.ts
new file mode 100644
index 00000000..001b77a4
--- /dev/null
+++ b/src/__tests__/type/getNextKeyDef.ts
@@ -0,0 +1,94 @@
+import { getNextKeyDef } from "type/getNextKeyDef"
+import { defaultKeyMap } from "type/keyMap"
+import { modernTypeOptions } from "type/types"
+
+const options: modernTypeOptions = {
+    keyboardMap: defaultKeyMap,
+    autoModify: false,
+    delay: 123,
+    skipAutoClose: false,
+}
+
+test('reference key per code', () => {
+    expect(getNextKeyDef('[ControlLeft]foo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: 'Control',
+            code: 'ControlLeft',
+        }),
+    }))
+})
+
+test('reference key per key', () => {
+    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: 'Control',
+            code: 'ControlLeft',
+        }),
+    }))
+})
+
+test('reference per legacy modifier', () => {
+    expect(getNextKeyDef('{ctrl}foo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: 'Control',
+            code: 'ControlLeft',
+        }),
+    }))
+})
+
+test('reference per printable character', () => {
+    expect(getNextKeyDef('afoo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: 'a',
+            code: 'KeyA',
+        }),
+    }))
+})
+
+test('reference bracket as printable character', () => {
+    expect(getNextKeyDef('{{foo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: '{',
+            code: 'Unknown',
+        }),
+    }))
+    expect(getNextKeyDef('[[foo', options)).toEqual(expect.objectContaining({
+        keyDef: expect.objectContaining({
+            key: '[',
+            code: 'Unknown',
+        }),
+    }))
+})
+
+test('release previously pressed key', () => {
+    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
+        releasePrevious: false,
+    }))
+    expect(getNextKeyDef('{/Control}foo', options)).toEqual(expect.objectContaining({
+        releasePrevious: true,
+    }))
+    expect(getNextKeyDef('[/ControlLeft]foo', options)).toEqual(expect.objectContaining({
+        releasePrevious: true,
+    }))
+})
+
+test('keep key pressed', () => {
+    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
+        releaseSelf: true,
+    }))
+    expect(getNextKeyDef('{Control>}foo', options)).toEqual(expect.objectContaining({
+        releaseSelf: false,
+    }))
+    expect(getNextKeyDef('[ControlLeft>]foo', options)).toEqual(expect.objectContaining({
+        releaseSelf: false,
+    }))    
+})
+
+test('autopress legacy modifiers', () => {
+    expect(getNextKeyDef('{ctrl}foo', options)).toEqual(expect.objectContaining({
+        releaseSelf: false,
+    }))
+    expect(getNextKeyDef('{ctrl/}foo', options)).toEqual(expect.objectContaining({
+        releaseSelf: true,
+    }))
+})
diff --git a/src/type/getNextKeyDef.ts b/src/type/getNextKeyDef.ts
index e60053cc..2d1d451e 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/type/getNextKeyDef.ts
@@ -66,7 +66,7 @@ export function getNextKeyDef(
     releaseSelf: hasReleaseSelf(startBracket, descriptor, endModifier),
   }
 
-  if (!startBracket || (startBracket === '{' && descriptor.length === 1)) {
+  if (isPrintableCharacter(startBracket, descriptor)) {
     return {
       ...modifiers,
       keyDef: options.keyboardMap.find(
@@ -109,3 +109,7 @@ function mapLegacyKey(descriptor: string) {
     'space': ' ',
   }[descriptor] ?? descriptor
 }
+
+function isPrintableCharacter(startBracket: string, descriptor: string) {
+  return !startBracket || startBracket === descriptor || startBracket === '{' && descriptor.length === 1
+}

From 514e0d2c47387df2764a12123122e196b99df813 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Fri, 12 Mar 2021 02:31:00 +0100
Subject: [PATCH 27/43] wip: bump test coverage

---
 src/__tests__/type/getNextKeyDef.ts           | 178 +++++++----
 src/__tests__/type/plugin/arrow.ts            |  45 +++
 src/__tests__/type/plugin/character.ts        |  19 ++
 src/__tests__/type/plugin/control.ts          |  48 +++
 src/__tests__/type/plugin/functional.ts       |  76 +++++
 src/type/getEventProps.ts                     |  46 ++-
 src/type/plugins/arrow.ts                     |  31 +-
 src/type/plugins/character.ts                 | 290 ++++++++++--------
 src/type/plugins/control.ts                   |  64 ++--
 src/type/plugins/functional.ts                | 194 ++++++------
 .../functional/calculateBackspaceValue.ts     |  58 ++--
 .../shared/fireChangeForInputTimeIfValid.ts   |   9 +-
 src/type/typeImplementation.ts                | 120 ++++++--
 src/utils/edit/calculateNewValue.ts           |  14 +-
 src/utils/edit/isValidDateValue.ts            |  14 +-
 src/utils/edit/isValidInputTimeValue.ts       |  11 +-
 src/utils/focus/getActiveElement.ts           |   7 +-
 17 files changed, 789 insertions(+), 435 deletions(-)
 create mode 100644 src/__tests__/type/plugin/arrow.ts
 create mode 100644 src/__tests__/type/plugin/character.ts
 create mode 100644 src/__tests__/type/plugin/control.ts
 create mode 100644 src/__tests__/type/plugin/functional.ts

diff --git a/src/__tests__/type/getNextKeyDef.ts b/src/__tests__/type/getNextKeyDef.ts
index 001b77a4..c2a0a20b 100644
--- a/src/__tests__/type/getNextKeyDef.ts
+++ b/src/__tests__/type/getNextKeyDef.ts
@@ -1,94 +1,138 @@
-import { getNextKeyDef } from "type/getNextKeyDef"
-import { defaultKeyMap } from "type/keyMap"
-import { modernTypeOptions } from "type/types"
+import {getNextKeyDef} from 'type/getNextKeyDef'
+import {defaultKeyMap} from 'type/keyMap'
+import {keyboardKey, modernTypeOptions} from 'type/types'
 
 const options: modernTypeOptions = {
-    keyboardMap: defaultKeyMap,
-    autoModify: false,
-    delay: 123,
-    skipAutoClose: false,
+  keyboardMap: defaultKeyMap,
+  autoModify: false,
+  delay: 123,
+  skipAutoClose: false,
 }
 
 test('reference key per code', () => {
-    expect(getNextKeyDef('[ControlLeft]foo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: 'Control',
-            code: 'ControlLeft',
-        }),
-    }))
+  expect(getNextKeyDef('[ControlLeft]foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'Control',
+        code: 'ControlLeft',
+      }) as keyboardKey,
+    }),
+  )
+  expect(getNextKeyDef('[Foo]foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'Unknown',
+        code: 'Foo',
+      }) as keyboardKey,
+    }),
+  )
 })
 
 test('reference key per key', () => {
-    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: 'Control',
-            code: 'ControlLeft',
-        }),
-    }))
+  expect(getNextKeyDef('{Control}foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'Control',
+        code: 'ControlLeft',
+      }) as keyboardKey,
+    }),
+  )
+  expect(getNextKeyDef('{Foo}foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'Foo',
+        code: 'Unknown',
+      }) as keyboardKey,
+    }),
+  )
 })
 
 test('reference per legacy modifier', () => {
-    expect(getNextKeyDef('{ctrl}foo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: 'Control',
-            code: 'ControlLeft',
-        }),
-    }))
+  expect(getNextKeyDef('{ctrl}foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'Control',
+        code: 'ControlLeft',
+      }) as keyboardKey,
+    }),
+  )
 })
 
 test('reference per printable character', () => {
-    expect(getNextKeyDef('afoo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: 'a',
-            code: 'KeyA',
-        }),
-    }))
+  expect(getNextKeyDef('afoo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: 'a',
+        code: 'KeyA',
+      }) as keyboardKey,
+    }),
+  )
 })
 
 test('reference bracket as printable character', () => {
-    expect(getNextKeyDef('{{foo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: '{',
-            code: 'Unknown',
-        }),
-    }))
-    expect(getNextKeyDef('[[foo', options)).toEqual(expect.objectContaining({
-        keyDef: expect.objectContaining({
-            key: '[',
-            code: 'Unknown',
-        }),
-    }))
+  expect(getNextKeyDef('{{foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: '{',
+        code: 'Unknown',
+      }) as keyboardKey,
+    }),
+  )
+  expect(getNextKeyDef('[[foo', options)).toEqual(
+    expect.objectContaining({
+      keyDef: expect.objectContaining({
+        key: '[',
+        code: 'Unknown',
+      }) as keyboardKey,
+    }),
+  )
 })
 
 test('release previously pressed key', () => {
-    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
-        releasePrevious: false,
-    }))
-    expect(getNextKeyDef('{/Control}foo', options)).toEqual(expect.objectContaining({
-        releasePrevious: true,
-    }))
-    expect(getNextKeyDef('[/ControlLeft]foo', options)).toEqual(expect.objectContaining({
-        releasePrevious: true,
-    }))
+  expect(getNextKeyDef('{Control}foo', options)).toEqual(
+    expect.objectContaining({
+      releasePrevious: false,
+    }),
+  )
+  expect(getNextKeyDef('{/Control}foo', options)).toEqual(
+    expect.objectContaining({
+      releasePrevious: true,
+    }),
+  )
+  expect(getNextKeyDef('[/ControlLeft]foo', options)).toEqual(
+    expect.objectContaining({
+      releasePrevious: true,
+    }),
+  )
 })
 
 test('keep key pressed', () => {
-    expect(getNextKeyDef('{Control}foo', options)).toEqual(expect.objectContaining({
-        releaseSelf: true,
-    }))
-    expect(getNextKeyDef('{Control>}foo', options)).toEqual(expect.objectContaining({
-        releaseSelf: false,
-    }))
-    expect(getNextKeyDef('[ControlLeft>]foo', options)).toEqual(expect.objectContaining({
-        releaseSelf: false,
-    }))    
+  expect(getNextKeyDef('{Control}foo', options)).toEqual(
+    expect.objectContaining({
+      releaseSelf: true,
+    }),
+  )
+  expect(getNextKeyDef('{Control>}foo', options)).toEqual(
+    expect.objectContaining({
+      releaseSelf: false,
+    }),
+  )
+  expect(getNextKeyDef('[ControlLeft>]foo', options)).toEqual(
+    expect.objectContaining({
+      releaseSelf: false,
+    }),
+  )
 })
 
 test('autopress legacy modifiers', () => {
-    expect(getNextKeyDef('{ctrl}foo', options)).toEqual(expect.objectContaining({
-        releaseSelf: false,
-    }))
-    expect(getNextKeyDef('{ctrl/}foo', options)).toEqual(expect.objectContaining({
-        releaseSelf: true,
-    }))
+  expect(getNextKeyDef('{ctrl}foo', options)).toEqual(
+    expect.objectContaining({
+      releaseSelf: false,
+    }),
+  )
+  expect(getNextKeyDef('{ctrl/}foo', options)).toEqual(
+    expect.objectContaining({
+      releaseSelf: true,
+    }),
+  )
 })
diff --git a/src/__tests__/type/plugin/arrow.ts b/src/__tests__/type/plugin/arrow.ts
new file mode 100644
index 00000000..3dea28c1
--- /dev/null
+++ b/src/__tests__/type/plugin/arrow.ts
@@ -0,0 +1,45 @@
+import userEvent from 'index'
+import {setup} from '__tests__/helpers/utils'
+
+const setupInput = () =>
+  setup(`<input value="foobar"/>`).element as HTMLInputElement
+
+test('collapse selection to the left', () => {
+  const el = setupInput()
+  el.setSelectionRange(2, 4)
+
+  userEvent.type(el, '[ArrowLeft]')
+
+  expect(el.selectionStart).toBe(2)
+  expect(el.selectionEnd).toBe(2)
+})
+
+test('collapse selection to the right', () => {
+  const el = setupInput()
+  el.setSelectionRange(2, 4)
+
+  userEvent.type(el, '[ArrowRight]')
+
+  expect(el.selectionStart).toBe(4)
+  expect(el.selectionEnd).toBe(4)
+})
+
+test('move cursor left', () => {
+  const el = setupInput()
+  el.setSelectionRange(2, 2)
+
+  userEvent.type(el, '[ArrowLeft]')
+
+  expect(el.selectionStart).toBe(1)
+  expect(el.selectionEnd).toBe(1)
+})
+
+test('move cursor right', () => {
+  const el = setupInput()
+  el.setSelectionRange(2, 2)
+
+  userEvent.type(el, '[ArrowRight]')
+
+  expect(el.selectionStart).toBe(3)
+  expect(el.selectionEnd).toBe(3)
+})
diff --git a/src/__tests__/type/plugin/character.ts b/src/__tests__/type/plugin/character.ts
new file mode 100644
index 00000000..095acea1
--- /dev/null
+++ b/src/__tests__/type/plugin/character.ts
@@ -0,0 +1,19 @@
+import userEvent from 'index'
+import {setup} from '__tests__/helpers/utils'
+
+test('type [Enter] in textarea', () => {
+  const {element} = setup(`<textarea>f</textarea>`)
+
+  userEvent.type(element as HTMLTextAreaElement, 'oo[Enter]bar')
+
+  expect(element).toHaveValue('foo\nbar')
+})
+
+test('type [Enter] in contenteditable', () => {
+  const {element} = setup(`<div contenteditable="true">f</div>`)
+
+  userEvent.type(element as HTMLTextAreaElement, 'oo[Enter]bar')
+
+  expect(element).toHaveTextContent('foo bar')
+  expect(element?.firstChild).toHaveProperty('nodeValue', 'foo\nbar')
+})
diff --git a/src/__tests__/type/plugin/control.ts b/src/__tests__/type/plugin/control.ts
new file mode 100644
index 00000000..9f0e476a
--- /dev/null
+++ b/src/__tests__/type/plugin/control.ts
@@ -0,0 +1,48 @@
+import userEvent from 'index'
+import {setup} from '__tests__/helpers/utils'
+
+test('press [Home] in textarea', () => {
+  const {element} = setup(`<textarea>foo\nbar\baz</textarea>`)
+  ;(element as HTMLTextAreaElement).setSelectionRange(2, 4)
+
+  userEvent.type(element as HTMLTextAreaElement, '[Home]')
+
+  expect(element).toHaveProperty('selectionStart', 0)
+  expect(element).toHaveProperty('selectionEnd', 0)
+})
+
+test('press [Home] in contenteditable', () => {
+  const {element} = setup(`<div contenteditable="true">foo\nbar\baz</div>`)
+  document
+    .getSelection()
+    ?.setPosition((element as HTMLDivElement).firstChild, 2)
+
+  userEvent.type(element as HTMLTextAreaElement, '[Home]')
+
+  const selection = document.getSelection()
+  expect(selection).toHaveProperty('focusNode', element?.firstChild)
+  expect(selection).toHaveProperty('focusOffset', 0)
+})
+
+test('press [End] in textarea', () => {
+  const {element} = setup(`<textarea>foo\nbar\baz</textarea>`)
+  ;(element as HTMLTextAreaElement).setSelectionRange(2, 4)
+
+  userEvent.type(element as HTMLTextAreaElement, '[End]')
+
+  expect(element).toHaveProperty('selectionStart', 10)
+  expect(element).toHaveProperty('selectionEnd', 10)
+})
+
+test('press [End] in contenteditable', () => {
+  const {element} = setup(`<div contenteditable="true">foo\nbar\baz</div>`)
+  document
+    .getSelection()
+    ?.setPosition((element as HTMLDivElement).firstChild, 2)
+
+  userEvent.type(element as HTMLTextAreaElement, '[End]')
+
+  const selection = document.getSelection()
+  expect(selection).toHaveProperty('focusNode', element?.firstChild)
+  expect(selection).toHaveProperty('focusOffset', 10)
+})
diff --git a/src/__tests__/type/plugin/functional.ts b/src/__tests__/type/plugin/functional.ts
new file mode 100644
index 00000000..dbc34938
--- /dev/null
+++ b/src/__tests__/type/plugin/functional.ts
@@ -0,0 +1,76 @@
+import userEvent from 'index'
+import {setup} from '__tests__/helpers/utils'
+
+test('produce extra events for the Control key when AltGraph is pressed', () => {
+  const {element, getEventSnapshot} = setup(`<input/>`)
+
+  userEvent.type(element as Element, '{AltGraph}')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value=""]
+
+    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: Control (17)
+    input[value=""] - keydown: AltGraph (0)
+    input[value=""] - keyup: AltGraph (0)
+    input[value=""] - keyup: Control (17)
+  `)
+})
+
+test('backspace to valid value', () => {
+  const {element, getEventSnapshot} = setup(`<input type="number"/>`)
+
+  userEvent.type(element as Element, '5e-[Backspace][Backspace]')
+
+  expect(element).toHaveValue(5)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="5"]
+
+    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: 5 (53)
+    input[value=""] - keypress: 5 (53)
+    input[value="5"] - input
+      "{CURSOR}" -> "{CURSOR}5"
+    input[value="5"] - keyup: 5 (53)
+    input[value="5"] - keydown: e (101)
+    input[value="5"] - keypress: e (101)
+    input[value=""] - input
+      "{CURSOR}5" -> "{CURSOR}"
+    input[value=""] - keyup: e (101)
+    input[value=""] - keydown: - (45)
+    input[value=""] - keypress: - (45)
+    input[value=""] - input
+    input[value=""] - keyup: - (45)
+    input[value=""] - keydown: Backspace (8)
+    input[value=""] - input
+    input[value=""] - keyup: Backspace (8)
+    input[value=""] - keydown: Backspace (8)
+    input[value="5"] - input
+      "{CURSOR}" -> "{CURSOR}5"
+    input[value="5"] - keyup: Backspace (8)
+  `)
+})
diff --git a/src/type/getEventProps.ts b/src/type/getEventProps.ts
index e2bb03a6..3a001caa 100644
--- a/src/type/getEventProps.ts
+++ b/src/type/getEventProps.ts
@@ -1,29 +1,27 @@
-import { keyboardKey, keyboardState } from "./types";
+import {keyboardKey, keyboardState} from './types'
 
-export function getKeyEventProps(
-    keyDef: keyboardKey,
-    state: keyboardState,
-) {
-    return {
-        key: keyDef.key,
-        code: keyDef.code,
-        altKey: state.modifiers.alt,
-        ctrlKey: state.modifiers.ctrl,
-        metaKey: state.modifiers.meta,
-        shiftKey: state.modifiers.shift,
+export function getKeyEventProps(keyDef: keyboardKey, state: keyboardState) {
+  return {
+    key: keyDef.key,
+    code: keyDef.code,
+    altKey: state.modifiers.alt,
+    ctrlKey: state.modifiers.ctrl,
+    metaKey: state.modifiers.meta,
+    shiftKey: state.modifiers.shift,
 
-        // deprecated
-        keyCode: keyDef.keyCode ?? (keyDef.key?.length === 1 ? keyDef.key.charCodeAt(0) : undefined),
-    }
+    // deprecated
+    keyCode:
+      keyDef.keyCode ??
+      // istanbul ignore next
+      (keyDef.key?.length === 1 ? keyDef.key.charCodeAt(0) : undefined),
+  }
 }
 
-export function getMouseEventProps(
-    state: keyboardState,
-) {
-    return {
-        altKey: state.modifiers.alt,
-        ctrlKey: state.modifiers.ctrl,
-        metaKey: state.modifiers.meta,
-        shiftKey: state.modifiers.shift,
-    }
+export function getMouseEventProps(state: keyboardState) {
+  return {
+    altKey: state.modifiers.alt,
+    ctrlKey: state.modifiers.ctrl,
+    metaKey: state.modifiers.meta,
+    shiftKey: state.modifiers.shift,
+  }
 }
diff --git a/src/type/plugins/arrow.ts b/src/type/plugins/arrow.ts
index d087f8db..4455d7f1 100644
--- a/src/type/plugins/arrow.ts
+++ b/src/type/plugins/arrow.ts
@@ -3,23 +3,28 @@
  * https://w3c.github.io/uievents-code/#key-arrowpad-section
  */
 
-import { behaviorPlugin } from "../types";
-import { isInstanceOfElement, setSelectionRangeIfNecessary } from "../../utils";
+import {behaviorPlugin} from '../types'
+import {isInstanceOfElement, setSelectionRangeIfNecessary} from '../../utils'
 
 export const keydownBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => (keyDef.key === 'ArrowLeft' || keyDef.key === 'ArrowRight') && isInstanceOfElement(element, 'HTMLInputElement'),
-        handle: (keyDef, element) => {
-            const { selectionStart, selectionEnd } = element as HTMLInputElement
+  {
+    // TODO: implement for textarea and contentEditable
+    matches: (keyDef, element) =>
+      (keyDef.key === 'ArrowLeft' || keyDef.key === 'ArrowRight') &&
+      isInstanceOfElement(element, 'HTMLInputElement'),
+    handle: (keyDef, element) => {
+      const {selectionStart, selectionEnd} = element as HTMLInputElement
 
-            const direction = keyDef.key === 'ArrowLeft' ? -1 : 1
+      const direction = keyDef.key === 'ArrowLeft' ? -1 : 1
 
-            const newPos = (selectionStart === selectionEnd
-                ? (selectionStart ?? 0) + direction
-                : direction < 0 ? selectionStart : selectionEnd
-            ) ?? 0
+      const newPos =
+        (selectionStart === selectionEnd
+          ? (selectionStart ?? /* istanbul ignore next */ 0) + direction
+          : direction < 0
+          ? selectionStart
+          : selectionEnd) ?? /* istanbul ignore next */ 0
 
-            setSelectionRangeIfNecessary(element, newPos, newPos)
-        }
+      setSelectionRangeIfNecessary(element, newPos, newPos)
     },
+  },
 ]
diff --git a/src/type/plugins/character.ts b/src/type/plugins/character.ts
index 2c8f4bda..0f722cb6 100644
--- a/src/type/plugins/character.ts
+++ b/src/type/plugins/character.ts
@@ -2,136 +2,186 @@
  * This file should cover the behavior for keys that produce character input
  */
 
-import { fireEvent } from "@testing-library/dom";
-import { fireChangeForInputTimeIfValid, fireInputEventIfNeeded } from "type/shared";
-import { behaviorPlugin } from "type/types";
-import { buildTimeValue, calculateNewValue, getValue, isContentEditable, isInstanceOfElement, isValidDateValue, isValidInputTimeValue } from "utils";
+import {fireEvent} from '@testing-library/dom'
+import {
+  fireChangeForInputTimeIfValid,
+  fireInputEventIfNeeded,
+} from 'type/shared'
+import {behaviorPlugin} from 'type/types'
+import {
+  buildTimeValue,
+  calculateNewValue,
+  getValue,
+  isContentEditable,
+  isInstanceOfElement,
+  isValidDateValue,
+  isValidInputTimeValue,
+} from 'utils'
 
 export const keypressBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'time',
-        handle: (keyDef, element, options, state) => {
-            let newEntry = (keyDef.key as string)
-
-            const textToBeTyped = (state.carryValue ?? '') + newEntry
-            const timeNewEntry = buildTimeValue(textToBeTyped)
-            if (isValidInputTimeValue(element, timeNewEntry)) {
-                newEntry = timeNewEntry
-            }
-
-            const { newValue, newSelectionStart } = calculateNewValue(newEntry, element as HTMLElement)
-
-            const { prevValue } = fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    data: keyDef.key,
-                    inputType: 'insertText',
-                },
-                currentElement: () => element,
-            })
-
-            fireChangeForInputTimeIfValid(() => element, prevValue, timeNewEntry)
-
-            state.carryValue = textToBeTyped
+  {
+    matches: (keyDef, element) =>
+      keyDef.key?.length === 1 &&
+      isInstanceOfElement(element, 'HTMLInputElement') &&
+      (element as HTMLInputElement).type === 'time',
+    handle: (keyDef, element, options, state) => {
+      let newEntry = keyDef.key as string
+
+      const textToBeTyped = (state.carryValue ?? '') + newEntry
+      const timeNewEntry = buildTimeValue(textToBeTyped)
+      if (
+        isValidInputTimeValue(
+          element as HTMLInputElement & {type: 'time'},
+          timeNewEntry,
+        )
+      ) {
+        newEntry = timeNewEntry
+      }
+
+      const {newValue, newSelectionStart} = calculateNewValue(
+        newEntry,
+        element as HTMLElement,
+      )
+
+      const {prevValue} = fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          data: keyDef.key,
+          inputType: 'insertText',
         },
+        currentElement: () => element,
+      })
+
+      fireChangeForInputTimeIfValid(
+        element as HTMLInputElement & {type: 'time'},
+        prevValue,
+        timeNewEntry,
+      )
+
+      state.carryValue = textToBeTyped
     },
-    {
-        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'date',
-        handle: (keyDef, element, options, state) => {
-            let newEntry = (keyDef.key as string)
-
-            const textToBeTyped = (state.carryValue ?? '') + newEntry
-            if (isValidDateValue(element, textToBeTyped)) {
-                newEntry = textToBeTyped
-            }
-
-            const { newValue, newSelectionStart } = calculateNewValue(newEntry, element as HTMLElement)
-
-            fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    data: keyDef.key,
-                    inputType: 'insertText',
-                },
-                currentElement: () => element,
-            })
-
-            if (isValidDateValue(element, textToBeTyped)) {
-                fireEvent.change(element, {
-                    target: { value: textToBeTyped },
-                })
-            }
-
-            state.carryValue = textToBeTyped
+  },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key?.length === 1 &&
+      isInstanceOfElement(element, 'HTMLInputElement') &&
+      (element as HTMLInputElement).type === 'date',
+    handle: (keyDef, element, options, state) => {
+      let newEntry = keyDef.key as string
+
+      const textToBeTyped = (state.carryValue ?? '') + newEntry
+      const isValidToBeTyped = isValidDateValue(
+        element as HTMLInputElement & {type: 'date'},
+        textToBeTyped,
+      )
+      if (isValidToBeTyped) {
+        newEntry = textToBeTyped
+      }
+
+      const {newValue, newSelectionStart} = calculateNewValue(
+        newEntry,
+        element as HTMLElement,
+      )
+
+      fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          data: keyDef.key,
+          inputType: 'insertText',
         },
+        currentElement: () => element,
+      })
+
+      if (isValidToBeTyped) {
+        fireEvent.change(element, {
+          target: {value: textToBeTyped},
+        })
+      }
+
+      state.carryValue = textToBeTyped
     },
-    {
-        matches: (keyDef, element) => keyDef.key?.length === 1 && isInstanceOfElement(element, 'HTMLInputElement') && (element as HTMLInputElement).type === 'number',
-        handle: (keyDef, element, options, state) => {
-            if (!/[\d.\-e]/.test(keyDef.key as string)) {
-                return
-            }
-
-            const oldValue = state.carryValue ?? getValue(element) ?? ''
-
-            const { newValue, newSelectionStart } = calculateNewValue(keyDef.key as string, element as HTMLElement, oldValue)
-
-            fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    data: keyDef.key,
-                    inputType: 'insertText',
-                },
-                currentElement: () => element,
-            })
-
-            const appliedValue = getValue(element)
-            if (appliedValue === newValue) {
-                state.carryValue = undefined
-            } else {
-                state.carryValue = newValue
-            }
+  },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key?.length === 1 &&
+      isInstanceOfElement(element, 'HTMLInputElement') &&
+      (element as HTMLInputElement).type === 'number',
+    handle: (keyDef, element, options, state) => {
+      if (!/[\d.\-e]/.test(keyDef.key as string)) {
+        return
+      }
+
+      const oldValue =
+        state.carryValue ?? getValue(element) ?? /* istanbul ignore next */ ''
+
+      const {newValue, newSelectionStart} = calculateNewValue(
+        keyDef.key as string,
+        element as HTMLElement,
+        oldValue,
+      )
+
+      fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          data: keyDef.key,
+          inputType: 'insertText',
         },
+        currentElement: () => element,
+      })
+
+      const appliedValue = getValue(element)
+      if (appliedValue === newValue) {
+        state.carryValue = undefined
+      } else {
+        state.carryValue = newValue
+      }
     },
-    {
-        matches: (keyDef, element) => keyDef.key?.length === 1 && (
-            isInstanceOfElement(element, 'HTMLInputElement')
-            || isInstanceOfElement(element, 'HTMLTextAreaElement')
-            || isContentEditable(element)
-        ),
-        handle: (keyDef, element) => {
-            const { newValue, newSelectionStart } = calculateNewValue(keyDef.key as string, element as HTMLElement)
-
-            fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    data: keyDef.key,
-                    inputType: 'insertText',
-                },
-                currentElement: () => element,
-            })
+  },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key?.length === 1 &&
+      (isInstanceOfElement(element, 'HTMLInputElement') ||
+        isInstanceOfElement(element, 'HTMLTextAreaElement') ||
+        isContentEditable(element)),
+    handle: (keyDef, element) => {
+      const {newValue, newSelectionStart} = calculateNewValue(
+        keyDef.key as string,
+        element as HTMLElement,
+      )
+
+      fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          data: keyDef.key,
+          inputType: 'insertText',
         },
+        currentElement: () => element,
+      })
     },
-    {
-        matches: (keyDef, element) => keyDef.key === 'Enter' && (
-            isInstanceOfElement(element, 'HTMLTextAreaElement')
-            || isContentEditable(element)
-        ),
-        handle: (keyDef, element) => {
-            const { newValue, newSelectionStart } = calculateNewValue('\n', element as HTMLElement)
-
-            fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    inputType: 'insertLineBreak',
-                },
-                currentElement: () => element,
-            })
+  },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'Enter' &&
+      (isInstanceOfElement(element, 'HTMLTextAreaElement') ||
+        isContentEditable(element)),
+    handle: (keyDef, element) => {
+      const {newValue, newSelectionStart} = calculateNewValue(
+        '\n',
+        element as HTMLElement,
+      )
+
+      fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          inputType: 'insertLineBreak',
         },
+        currentElement: () => element,
+      })
     },
+  },
 ]
diff --git a/src/type/plugins/control.ts b/src/type/plugins/control.ts
index 7e4ff160..304129b7 100644
--- a/src/type/plugins/control.ts
+++ b/src/type/plugins/control.ts
@@ -3,39 +3,43 @@
  * https://w3c.github.io/uievents-code/#key-controlpad-section
  */
 
-import { behaviorPlugin } from "../types";
-import { getValue, isContentEditable, isInstanceOfElement, setSelectionRangeIfNecessary } from "../../utils";
-import { fireInputEventIfNeeded } from "../shared";
-import { calculateNewDeleteValue } from "./control/calculateNewDeleteValue";
+import {behaviorPlugin} from '../types'
+import {
+  getValue,
+  isContentEditable,
+  isInstanceOfElement,
+  setSelectionRangeIfNecessary,
+} from '../../utils'
+import {fireInputEventIfNeeded} from '../shared'
+import {calculateNewDeleteValue} from './control/calculateNewDeleteValue'
 
 export const keydownBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => (keyDef.key === 'Home' || keyDef.key === 'End') && (
-            isInstanceOfElement(element, 'HTMLInputElement')
-            || isInstanceOfElement(element, 'HTMLTextAreaElement')
-            || isContentEditable(element)
-        ),
-        handle: (keyDef, element) => {
-            // This could probably been improved by collapsing a selection range
-            if (keyDef.key === 'Home') {
-                setSelectionRangeIfNecessary(element, 0, 0)
-            } else if (keyDef.key === 'End') {
-                const newPos = getValue(element)?.length ?? 0
-                setSelectionRangeIfNecessary(element, newPos, newPos)
-            }
-        },
+  {
+    matches: (keyDef, element) =>
+      (keyDef.key === 'Home' || keyDef.key === 'End') &&
+      (isInstanceOfElement(element, 'HTMLInputElement') ||
+        isInstanceOfElement(element, 'HTMLTextAreaElement') ||
+        isContentEditable(element)),
+    handle: (keyDef, element) => {
+      // This could probably been improved by collapsing a selection range
+      if (keyDef.key === 'Home') {
+        setSelectionRangeIfNecessary(element, 0, 0)
+      } else {
+        const newPos = getValue(element)?.length ?? /* istanbul ignore next */ 0
+        setSelectionRangeIfNecessary(element, newPos, newPos)
+      }
     },
-    {
-        matches: (keyDef) => keyDef.key === 'Delete',
-        handle: (keDef, element) => {
-            fireInputEventIfNeeded({
-                ...calculateNewDeleteValue(element),
-                eventOverrides: {
-                    inputType: 'deleteContentForward',
-                },
-                currentElement: () => element,
-            })
-
+  },
+  {
+    matches: keyDef => keyDef.key === 'Delete',
+    handle: (keDef, element) => {
+      fireInputEventIfNeeded({
+        ...calculateNewDeleteValue(element),
+        eventOverrides: {
+          inputType: 'deleteContentForward',
         },
+        currentElement: () => element,
+      })
     },
+  },
 ]
diff --git a/src/type/plugins/functional.ts b/src/type/plugins/functional.ts
index f7ff92ed..66c4c7ac 100644
--- a/src/type/plugins/functional.ts
+++ b/src/type/plugins/functional.ts
@@ -3,124 +3,138 @@
  * https://w3c.github.io/uievents-code/#key-alphanumeric-functional
  */
 
-import { fireEvent } from "@testing-library/dom"
-import { getValue, isClickableInput, isInstanceOfElement } from "../../utils"
-import { getKeyEventProps, getMouseEventProps } from "../getEventProps"
-import { fireInputEventIfNeeded } from "../shared"
-import { behaviorPlugin } from "../types"
-import { calculateNewBackspaceValue } from "./functional/calculateBackspaceValue"
+import {fireEvent} from '@testing-library/dom'
+import {getValue, isClickableInput, isInstanceOfElement} from '../../utils'
+import {getKeyEventProps, getMouseEventProps} from '../getEventProps'
+import {fireInputEventIfNeeded} from '../shared'
+import {behaviorPlugin} from '../types'
+import {calculateNewBackspaceValue} from './functional/calculateBackspaceValue'
 
 const modifierKeys = {
-    'Alt': 'alt',
-    'Control': 'ctrl',
-    'Shift': 'shift',
-    'Meta': 'meta',
+  Alt: 'alt',
+  Control: 'ctrl',
+  Shift: 'shift',
+  Meta: 'meta',
 } as const
 
 export const preKeydownBehavior: behaviorPlugin[] = [
-    // modifierKeys switch on the modifier BEFORE the keydown event
-    ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
-        matches: (keyDef) => keyDef.key === key,
-        handle: (keyDef, element, options, state) => {
-            state.modifiers[modKey] = true
-        },
-    })),
+  // modifierKeys switch on the modifier BEFORE the keydown event
+  ...Object.entries(modifierKeys).map(
+    ([key, modKey]): behaviorPlugin => ({
+      matches: keyDef => keyDef.key === key,
+      handle: (keyDef, element, options, state) => {
+        state.modifiers[modKey] = true
+      },
+    }),
+  ),
 
-    // AltGraph produces an extra keydown for Control
-    // The modifier does not change
-    {
-        matches: (keyDef) => keyDef.key === 'AltGraph',
-        handle: (keyDef, element, options, state) => {
-            const ctrlKeyDef = options.keyboardMap.find(k => k.key === 'Control')
-                ?? {key: 'Control', code: 'Control'}
-            fireEvent.keyDown(element, getKeyEventProps(ctrlKeyDef, state))
-        },
+  // AltGraph produces an extra keydown for Control
+  // The modifier does not change
+  {
+    matches: keyDef => keyDef.key === 'AltGraph',
+    handle: (keyDef, element, options, state) => {
+      const ctrlKeyDef = options.keyboardMap.find(
+        k => k.key === 'Control',
+      ) ?? /* istanbul ignore next */ {key: 'Control', code: 'Control'}
+      fireEvent.keyDown(element, getKeyEventProps(ctrlKeyDef, state))
     },
+  },
 ]
 
 export const keydownBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef) => keyDef.key === 'CapsLock',
-        handle: (keyDef, element, options, state) => {
-            state.modifiers.caps = !state.modifiers.caps
-        }
+  {
+    matches: keyDef => keyDef.key === 'CapsLock',
+    handle: (keyDef, element, options, state) => {
+      state.modifiers.caps = !state.modifiers.caps
     },
-    {
-        matches: (keyDef) => keyDef.key === 'Backspace',
-        handle: (keyDef, element, options, state) => {
-            const { newValue, newSelectionStart } = calculateNewBackspaceValue(element, state.carryValue)
+  },
+  {
+    matches: keyDef => keyDef.key === 'Backspace',
+    handle: (keyDef, element, options, state) => {
+      const {newValue, newSelectionStart} = calculateNewBackspaceValue(
+        element,
+        state.carryValue,
+      )
 
-            fireInputEventIfNeeded({
-                newValue,
-                newSelectionStart,
-                eventOverrides: {
-                    inputType: 'deleteContentBackward',
-                },
-                currentElement: () => element,
-            })
+      fireInputEventIfNeeded({
+        newValue,
+        newSelectionStart,
+        eventOverrides: {
+          inputType: 'deleteContentBackward',
+        },
+        currentElement: () => element,
+      })
 
-            if (state.carryValue) {
-                state.carryValue = getValue(element) === newValue ? undefined : newValue
-            }
-        }
+      if (state.carryValue) {
+        state.carryValue = getValue(element) === newValue ? undefined : newValue
+      }
     },
+  },
 ]
 
 export const keypressBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => keyDef.key === 'Enter' && (isClickableInput(element) ||
-            // Links with href defined should handle Enter the same as a click
-            isInstanceOfElement(element, 'HTMLAnchorElement') &&
-                Boolean((element as HTMLAnchorElement).href)
-        ),
-        handle: (keyDef, element, options, state) => {
-            fireEvent.click(element, getMouseEventProps(state))
-        },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'Enter' &&
+      (isClickableInput(element) ||
+        // Links with href defined should handle Enter the same as a click
+        (isInstanceOfElement(element, 'HTMLAnchorElement') &&
+          Boolean((element as HTMLAnchorElement).href))),
+    handle: (keyDef, element, options, state) => {
+      fireEvent.click(element, getMouseEventProps(state))
     },
-    {
-        matches: (keyDef, element) => keyDef.key === 'Enter' && isInstanceOfElement(element, 'HTMLInputElement'),
-        handle: (keyDef, element) => {
-            const form = (element as HTMLInputElement).form
+  },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'Enter' &&
+      isInstanceOfElement(element, 'HTMLInputElement'),
+    handle: (keyDef, element) => {
+      const form = (element as HTMLInputElement).form
 
-            if (form && (
-                form.querySelectorAll('input').length === 1 ||
-                form.querySelector('input[type="submit"]') ||
-                form.querySelector('button[type="submit"]')
-            )){
-                fireEvent.submit(form)
-            }
-        },
+      if (
+        form &&
+        (form.querySelectorAll('input').length === 1 ||
+          form.querySelector('input[type="submit"]') ||
+          form.querySelector('button[type="submit"]'))
+      ) {
+        fireEvent.submit(form)
+      }
     },
+  },
 ]
 
 export const preKeyupBehavior: behaviorPlugin[] = [
-    // modifierKeys switch off the modifier BEFORE the keyup event
-    ...Object.entries(modifierKeys).map(([key, modKey]): behaviorPlugin => ({
-        matches: (keyDef) => keyDef.key === key,
-        handle: (keyDef, element, options, state) => {
-            state.modifiers[modKey] = false
-        },
-    })),
+  // modifierKeys switch off the modifier BEFORE the keyup event
+  ...Object.entries(modifierKeys).map(
+    ([key, modKey]): behaviorPlugin => ({
+      matches: keyDef => keyDef.key === key,
+      handle: (keyDef, element, options, state) => {
+        state.modifiers[modKey] = false
+      },
+    }),
+  ),
 ]
 
 export const keyupBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => keyDef.key === ' ' && isClickableInput(element),
-        handle: (keyDef, element, options, state) => {
-            fireEvent.click(element, getMouseEventProps(state))
-        },
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === ' ' && isClickableInput(element),
+    handle: (keyDef, element, options, state) => {
+      fireEvent.click(element, getMouseEventProps(state))
     },
+  },
 ]
 
 export const postKeyupBehavior: behaviorPlugin[] = [
-    // AltGraph produces an extra keyup for Control
-    // The modifier does not change
-    {
-        matches: (keyDef) => keyDef.key === 'AltGraph',
-        handle: (keyDef, element, options, state) => {
-            const ctrlKeyDef = options.keyboardMap.find(k => k.key === 'Control')
-                ?? { key: 'Control', code: 'Control' }
-            fireEvent.keyUp(element, getKeyEventProps(ctrlKeyDef, state))
-        },
+  // AltGraph produces an extra keyup for Control
+  // The modifier does not change
+  {
+    matches: keyDef => keyDef.key === 'AltGraph',
+    handle: (keyDef, element, options, state) => {
+      const ctrlKeyDef = options.keyboardMap.find(
+        k => k.key === 'Control',
+      ) ?? /* istanbul ignore next */ {key: 'Control', code: 'Control'}
+      fireEvent.keyUp(element, getKeyEventProps(ctrlKeyDef, state))
     },
-]
\ No newline at end of file
+  },
+]
diff --git a/src/type/plugins/functional/calculateBackspaceValue.ts b/src/type/plugins/functional/calculateBackspaceValue.ts
index b61bb76a..27a10fb6 100644
--- a/src/type/plugins/functional/calculateBackspaceValue.ts
+++ b/src/type/plugins/functional/calculateBackspaceValue.ts
@@ -1,43 +1,43 @@
-import { getSelectionRange, getValue } from "utils"
+import {getSelectionRange, getValue} from 'utils'
 
 // yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
 // and you may be tempted to create a shared abstraction.
 // If you, brave soul, decide to so endevor, please increment this count
 // when you inevitably fail: 1
 export function calculateNewBackspaceValue(
-    element: Element,
-    value = getValue(element) ?? '',
+  element: Element,
+  value = getValue(element) ?? /* istanbul ignore next */ '',
 ) {
-    const { selectionStart, selectionEnd } = getSelectionRange(element)
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
 
-    let newValue, newSelectionStart
+  let newValue, newSelectionStart
 
-    if (selectionStart === null) {
-        // at the end of an input type that does not support selection ranges
-        // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-        newValue = value.slice(0, value.length - 1)
+  if (selectionStart === null) {
+    // at the end of an input type that does not support selection ranges
+    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+    newValue = value.slice(0, value.length - 1)
 
-        newSelectionStart = newValue.length
-    } else if (selectionStart === selectionEnd) {
-        if (selectionStart === 0) {
-            // at the beginning of the input
-            newValue = value
-            newSelectionStart = selectionStart
-        } else if (selectionStart === value.length) {
-            // at the end of the input
-            newValue = value.slice(0, value.length - 1)
-            newSelectionStart = selectionStart - 1
-        } else {
-            // in the middle of the input
-            newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
-            newSelectionStart = selectionStart - 1
-        }
+    newSelectionStart = newValue.length
+  } else if (selectionStart === selectionEnd) {
+    if (selectionStart === 0) {
+      // at the beginning of the input
+      newValue = value
+      newSelectionStart = selectionStart
+    } else if (selectionStart === value.length) {
+      // at the end of the input
+      newValue = value.slice(0, value.length - 1)
+      newSelectionStart = selectionStart - 1
     } else {
-        // we have something selected
-        const firstPart = value.slice(0, selectionStart)
-        newValue = firstPart + value.slice(selectionEnd as number)
-        newSelectionStart = firstPart.length
+      // in the middle of the input
+      newValue = value.slice(0, selectionStart - 1) + value.slice(selectionEnd)
+      newSelectionStart = selectionStart - 1
     }
+  } else {
+    // we have something selected
+    const firstPart = value.slice(0, selectionStart)
+    newValue = firstPart + value.slice(selectionEnd as number)
+    newSelectionStart = firstPart.length
+  }
 
-    return { newValue, newSelectionStart }
+  return {newValue, newSelectionStart}
 }
diff --git a/src/type/shared/fireChangeForInputTimeIfValid.ts b/src/type/shared/fireChangeForInputTimeIfValid.ts
index 0e8937d4..0a31a7c9 100644
--- a/src/type/shared/fireChangeForInputTimeIfValid.ts
+++ b/src/type/shared/fireChangeForInputTimeIfValid.ts
@@ -2,16 +2,11 @@ import {fireEvent} from '@testing-library/dom'
 import {isValidInputTimeValue} from '../../utils/edit'
 
 export function fireChangeForInputTimeIfValid(
-  currentElement: () => Element | null,
+  el: HTMLInputElement & {type: 'time'},
   prevValue: unknown,
   timeNewEntry: string,
 ) {
-  const el = currentElement()
-  if (
-    el &&
-    isValidInputTimeValue(el, timeNewEntry) &&
-    prevValue !== timeNewEntry
-  ) {
+  if (isValidInputTimeValue(el, timeNewEntry) && prevValue !== timeNewEntry) {
     fireEvent.change(el, {target: {value: timeNewEntry}})
   }
 }
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index d94532c1..42fc9933 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/dom'
+import {fireEvent} from '@testing-library/dom'
 // TODO: wrap in asyncWrapper
 import {
   setSelectionRangeIfNecessary,
@@ -8,11 +8,16 @@ import {
   getActiveElement,
 } from '../utils'
 import {click} from '../click'
-import { getNextKeyDef } from './getNextKeyDef'
-import type { modernTypeOptions, keyboardState, behaviorPlugin, keyboardKey } from './types'
+import {getNextKeyDef} from './getNextKeyDef'
+import type {
+  modernTypeOptions,
+  keyboardState,
+  behaviorPlugin,
+  keyboardKey,
+} from './types'
 import * as plugins from './plugins'
-import { getKeyEventProps } from './getEventProps'
-import { defaultKeyMap } from './keyMap'
+import {getKeyEventProps} from './getEventProps'
+import {defaultKeyMap} from './keyMap'
 
 export interface typeOptions {
   delay?: number
@@ -85,10 +90,13 @@ export async function typeImplementation(
       delay,
       autoModify: false,
       keyboardMap: defaultKeyMap,
-      skipAutoClose
+      skipAutoClose,
     },
     createKeyboardState(),
-  ).catch(e => console.error(e))
+  ).catch(
+    // istanbul ignore next
+    e => console.error(e),
+  )
 }
 
 function wait(time?: number) {
@@ -116,22 +124,45 @@ async function modernTypeImplementation(
   options: modernTypeOptions,
   state: keyboardState,
 ): Promise<void> {
-  const getCurrentElement = () => getActiveElement(document) ?? document.body
-  const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(text, options)
-
-  const replace = applyPlugins(plugins.replaceBehavior, keyDef, getCurrentElement(), options, state)
+  const getCurrentElement = () =>
+    getActiveElement(document) ?? /* istanbul ignore next */ document.body
+  const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(
+    text,
+    options,
+  )
+
+  const replace = applyPlugins(
+    plugins.replaceBehavior,
+    keyDef,
+    getCurrentElement(),
+    options,
+    state,
+  )
   if (!replace) {
-
     const pressed = state.pressed.find(p => p.keyDef === keyDef)
 
     if (pressed) {
-      keyup(keyDef, getCurrentElement, options, state, pressed.unpreventedDefault)
+      keyup(
+        keyDef,
+        getCurrentElement,
+        options,
+        state,
+        pressed.unpreventedDefault,
+      )
     }
 
     if (!releasePrevious) {
-      const unpreventedDefault = keydown(keyDef, getCurrentElement, options, state)
-
-      if (unpreventedDefault && (keyDef.key?.length === 1 || keyDef.key === 'Enter')) {
+      const unpreventedDefault = keydown(
+        keyDef,
+        getCurrentElement,
+        options,
+        state,
+      )
+
+      if (
+        unpreventedDefault &&
+        (keyDef.key?.length === 1 || keyDef.key === 'Enter')
+      ) {
         keypress(keyDef, getCurrentElement, options, state)
       }
 
@@ -139,15 +170,19 @@ async function modernTypeImplementation(
         keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
       }
     }
-
   }
 
   if (text.length > consumedLength) {
     if (options.delay > 0) {
       await wait(options.delay)
     }
-    await modernTypeImplementation(document, text.slice(consumedLength), options, state)
-  } else if(!options.skipAutoClose) {
+    await modernTypeImplementation(
+      document,
+      text.slice(consumedLength),
+      options,
+      state,
+    )
+  } else if (!options.skipAutoClose) {
     for (const k of state.pressed) {
       keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
     }
@@ -158,7 +193,7 @@ function keydown(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
   options: modernTypeOptions,
-  state: keyboardState
+  state: keyboardState,
 ) {
   const element = getCurrentElement()
 
@@ -171,13 +206,22 @@ function keydown(
 
   applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
 
-  const unpreventedDefault = fireEvent.keyDown(element, getKeyEventProps(keyDef, state))
+  const unpreventedDefault = fireEvent.keyDown(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
 
   state.pressed.push({keyDef, unpreventedDefault})
 
   if (unpreventedDefault) {
     // all default behavior like keypress/submit etc is applied to the currentElement
-    applyPlugins(plugins.keydownBehavior, keyDef, getCurrentElement(), options, state)
+    applyPlugins(
+      plugins.keydownBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
   }
 
   return unpreventedDefault
@@ -187,14 +231,23 @@ function keypress(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
   options: modernTypeOptions,
-  state: keyboardState
+  state: keyboardState,
 ) {
   const element = getCurrentElement()
 
-  const unpreventedDefault = fireEvent.keyPress(element, getKeyEventProps(keyDef, state))
+  const unpreventedDefault = fireEvent.keyPress(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
 
   if (unpreventedDefault) {
-    applyPlugins(plugins.keypressBehavior, keyDef, getCurrentElement(), options, state)
+    applyPlugins(
+      plugins.keypressBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
   }
 }
 
@@ -209,10 +262,19 @@ function keyup(
 
   applyPlugins(plugins.preKeyupBehavior, keyDef, element, options, state)
 
-  const unpreventedDefault = fireEvent.keyUp(element, getKeyEventProps(keyDef, state))
+  const unpreventedDefault = fireEvent.keyUp(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
 
   if (unprevented && unpreventedDefault) {
-    applyPlugins(plugins.keyupBehavior, keyDef, getCurrentElement(), options, state)
+    applyPlugins(
+      plugins.keyupBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
   }
 
   state.pressed = state.pressed.filter(k => k.keyDef !== keyDef)
@@ -227,7 +289,9 @@ function applyPlugins(
   options: modernTypeOptions,
   state: keyboardState,
 ): boolean {
-  const plugin = pluginCollection.find(p => p.matches(keyDef, element, options, state))
+  const plugin = pluginCollection.find(p =>
+    p.matches(keyDef, element, options, state),
+  )
 
   if (plugin) {
     plugin.handle(keyDef, element, options, state)
diff --git a/src/utils/edit/calculateNewValue.ts b/src/utils/edit/calculateNewValue.ts
index a70e3115..03e929be 100644
--- a/src/utils/edit/calculateNewValue.ts
+++ b/src/utils/edit/calculateNewValue.ts
@@ -48,16 +48,24 @@ export function calculateNewValue(
 
   if (
     (element as HTMLInputElement).type === 'date' &&
-    !isValidDateValue(element, newValue)
+    !isValidDateValue(element as HTMLInputElement & {type: 'date'}, newValue)
   ) {
     newValue = value as string
   }
 
   if (
     (element as HTMLInputElement).type === 'time' &&
-    !isValidInputTimeValue(element, newValue)
+    !isValidInputTimeValue(
+      element as HTMLInputElement & {type: 'time'},
+      newValue,
+    )
   ) {
-    if (isValidInputTimeValue(element, newEntry)) {
+    if (
+      isValidInputTimeValue(
+        element as HTMLInputElement & {type: 'time'},
+        newEntry,
+      )
+    ) {
       newValue = newEntry
     } else {
       newValue = value as string
diff --git a/src/utils/edit/isValidDateValue.ts b/src/utils/edit/isValidDateValue.ts
index b21e4db8..22135b65 100644
--- a/src/utils/edit/isValidDateValue.ts
+++ b/src/utils/edit/isValidDateValue.ts
@@ -1,13 +1,7 @@
-import {isInstanceOfElement} from '../misc'
-
-export function isValidDateValue(element: Element, value: string): boolean {
-  if (
-    !isInstanceOfElement(element, 'HTMLInputElement') ||
-    (element as HTMLInputElement).type !== 'date'
-  ) {
-    return false
-  }
-
+export function isValidDateValue(
+  element: HTMLInputElement & {type: 'date'},
+  value: string,
+): boolean {
   const clone = element.cloneNode() as HTMLInputElement
   clone.value = value
   return clone.value === value
diff --git a/src/utils/edit/isValidInputTimeValue.ts b/src/utils/edit/isValidInputTimeValue.ts
index fccf95f1..1e96146f 100644
--- a/src/utils/edit/isValidInputTimeValue.ts
+++ b/src/utils/edit/isValidInputTimeValue.ts
@@ -1,16 +1,7 @@
-import {isInstanceOfElement} from '../misc'
-
 export function isValidInputTimeValue(
-  element: Element,
+  element: HTMLInputElement & {type: 'time'},
   timeValue: string,
 ): boolean {
-  if (
-    !isInstanceOfElement(element, 'HTMLInputElement') ||
-    (element as HTMLInputElement).type !== 'time'
-  ) {
-    return false
-  }
-
   const clone = element.cloneNode() as HTMLInputElement
   clone.value = timeValue
   return clone.value === timeValue
diff --git a/src/utils/focus/getActiveElement.ts b/src/utils/focus/getActiveElement.ts
index b6dce830..1ca0de16 100644
--- a/src/utils/focus/getActiveElement.ts
+++ b/src/utils/focus/getActiveElement.ts
@@ -1,4 +1,4 @@
-import { isDisabled } from "../misc"
+import {isDisabled} from '../misc'
 
 export function getActiveElement(
   document: Document | ShadowRoot,
@@ -8,12 +8,11 @@ export function getActiveElement(
   if (activeElement?.shadowRoot) {
     return getActiveElement(activeElement.shadowRoot)
   } else {
-
     // Browser does not yield disabled elements as document.activeElement - jsdom does
     if (isDisabled(activeElement)) {
       return document.ownerDocument
-        // TODO: verify behavior in ShadowRoot
-        ? document.ownerDocument.body
+        ? // TODO: verify behavior in ShadowRoot
+          /* istanbul ignore next */ document.ownerDocument.body
         : document.body
     }
 

From 362c105965fc56292e8beb28e8b735214d16437c Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Fri, 12 Mar 2021 11:38:27 +0100
Subject: [PATCH 28/43] wip: reorganize files

---
 src/__tests__/type/getNextKeyDef.ts           |   6 +-
 src/{type => keyboard}/getEventProps.ts       |   0
 src/{type => keyboard}/getNextKeyDef.ts       |  48 +++--
 src/keyboard/index.ts                         |   1 +
 src/{type => keyboard}/keyMap.ts              |  40 +++-
 src/keyboard/keyboardImplementation.ts        | 193 +++++++++++++++++
 src/{type => keyboard}/plugins/arrow.ts       |   0
 src/{type => keyboard}/plugins/character.ts   |   9 +-
 src/{type => keyboard}/plugins/control.ts     |   0
 .../control/calculateNewDeleteValue.ts        |  33 +++
 src/{type => keyboard}/plugins/functional.ts  |   0
 .../functional/calculateBackspaceValue.ts     |   0
 src/keyboard/plugins/index.ts                 |  43 ++++
 .../shared/fireChangeForInputTimeIfValid.ts   |   2 +-
 .../shared/fireInputEventIfNeeded.ts          |   9 +-
 src/{type => keyboard}/shared/index.ts        |   0
 .../shared/setSelectionRange.ts               |   2 +-
 src/{type => keyboard}/specialCharMap.ts      |   0
 src/{type => keyboard}/types.ts               |  16 +-
 src/type/index.ts                             |   2 -
 .../control/calculateNewDeleteValue.ts        |  33 ---
 src/type/plugins/index.ts                     |  45 ----
 src/type/typeImplementation.ts                | 203 +-----------------
 src/utils/click/index.ts                      |   2 -
 src/utils/click/isClickableInput.ts           |   2 +-
 src/utils/edit/index.ts                       |   8 -
 src/utils/focus/getActiveElement.ts           |   2 +-
 src/utils/focus/index.ts                      |   3 -
 src/utils/focus/isFocusable.ts                |   2 +-
 src/utils/index.ts                            |  26 ++-
 src/utils/misc/index.ts                       |   5 -
 src/utils/misc/wait.ts                        |   3 +
 32 files changed, 395 insertions(+), 343 deletions(-)
 rename src/{type => keyboard}/getEventProps.ts (100%)
 rename src/{type => keyboard}/getNextKeyDef.ts (76%)
 create mode 100644 src/keyboard/index.ts
 rename src/{type => keyboard}/keyMap.ts (76%)
 create mode 100644 src/keyboard/keyboardImplementation.ts
 rename src/{type => keyboard}/plugins/arrow.ts (100%)
 rename src/{type => keyboard}/plugins/character.ts (96%)
 rename src/{type => keyboard}/plugins/control.ts (100%)
 create mode 100644 src/keyboard/plugins/control/calculateNewDeleteValue.ts
 rename src/{type => keyboard}/plugins/functional.ts (100%)
 rename src/{type => keyboard}/plugins/functional/calculateBackspaceValue.ts (100%)
 create mode 100644 src/keyboard/plugins/index.ts
 rename src/{type => keyboard}/shared/fireChangeForInputTimeIfValid.ts (85%)
 rename src/{type => keyboard}/shared/fireInputEventIfNeeded.ts (88%)
 rename src/{type => keyboard}/shared/index.ts (100%)
 rename src/{type => keyboard}/shared/setSelectionRange.ts (99%)
 rename src/{type => keyboard}/specialCharMap.ts (100%)
 rename src/{type => keyboard}/types.ts (83%)
 delete mode 100644 src/type/plugins/control/calculateNewDeleteValue.ts
 delete mode 100644 src/type/plugins/index.ts
 delete mode 100644 src/utils/click/index.ts
 delete mode 100644 src/utils/edit/index.ts
 delete mode 100644 src/utils/focus/index.ts
 delete mode 100644 src/utils/misc/index.ts
 create mode 100644 src/utils/misc/wait.ts

diff --git a/src/__tests__/type/getNextKeyDef.ts b/src/__tests__/type/getNextKeyDef.ts
index c2a0a20b..a3b66bb9 100644
--- a/src/__tests__/type/getNextKeyDef.ts
+++ b/src/__tests__/type/getNextKeyDef.ts
@@ -1,6 +1,6 @@
-import {getNextKeyDef} from 'type/getNextKeyDef'
-import {defaultKeyMap} from 'type/keyMap'
-import {keyboardKey, modernTypeOptions} from 'type/types'
+import {getNextKeyDef} from 'keyboard/getNextKeyDef'
+import {defaultKeyMap} from 'keyboard/keyMap'
+import {keyboardKey, modernTypeOptions} from 'keyboard/types'
 
 const options: modernTypeOptions = {
   keyboardMap: defaultKeyMap,
diff --git a/src/type/getEventProps.ts b/src/keyboard/getEventProps.ts
similarity index 100%
rename from src/type/getEventProps.ts
rename to src/keyboard/getEventProps.ts
diff --git a/src/type/getNextKeyDef.ts b/src/keyboard/getNextKeyDef.ts
similarity index 76%
rename from src/type/getNextKeyDef.ts
rename to src/keyboard/getNextKeyDef.ts
index 2d1d451e..e2ff6356 100644
--- a/src/type/getNextKeyDef.ts
+++ b/src/keyboard/getNextKeyDef.ts
@@ -42,12 +42,18 @@ export function getNextKeyDef(
       : ''
 
   const endBracket =
-    (!startBracket || descriptor === startBracket) ? '' : startBracket === '{' ? '}' : ']'
+    !startBracket || descriptor === startBracket
+      ? ''
+      : startBracket === '{'
+      ? '}'
+      : ']'
 
   // istanbul ignore if
   if (endBracket && text[descriptorEnd + endModifier.length] !== endBracket) {
     throw new Error(
-      `Expected closing bracket but found "${text[descriptorEnd + endModifier.length]}" in "${text}`,
+      `Expected closing bracket but found "${
+        text[descriptorEnd + endModifier.length]
+      }" in "${text}`,
     )
   }
 
@@ -69,9 +75,10 @@ export function getNextKeyDef(
   if (isPrintableCharacter(startBracket, descriptor)) {
     return {
       ...modifiers,
-      keyDef: options.keyboardMap.find(
-        k => k.key === descriptor,
-      ) ?? { key: descriptor, code: 'Unknown'},
+      keyDef: options.keyboardMap.find(k => k.key === descriptor) ?? {
+        key: descriptor,
+        code: 'Unknown',
+      },
     }
   } else if (startBracket === '{') {
     const key = mapLegacyKey(descriptor)
@@ -91,25 +98,38 @@ export function getNextKeyDef(
   }
 }
 
-function hasReleaseSelf(startBracket: string, descriptor: string, endModifier: string) {
+function hasReleaseSelf(
+  startBracket: string,
+  descriptor: string,
+  endModifier: string,
+) {
   if (endModifier === '/' || !startBracket) {
     return true
   }
-  if (startBracket === '{' && ['alt', 'ctrl', 'meta', 'shift'].includes(descriptor.toLowerCase())) {
+  if (
+    startBracket === '{' &&
+    ['alt', 'ctrl', 'meta', 'shift'].includes(descriptor.toLowerCase())
+  ) {
     return false
   }
   return endModifier !== '>'
 }
 
 function mapLegacyKey(descriptor: string) {
-  return {
-    'ctrl': 'Control',
-    'del': 'Delete',
-    'esc': 'Escape',
-    'space': ' ',
-  }[descriptor] ?? descriptor
+  return (
+    {
+      ctrl: 'Control',
+      del: 'Delete',
+      esc: 'Escape',
+      space: ' ',
+    }[descriptor] ?? descriptor
+  )
 }
 
 function isPrintableCharacter(startBracket: string, descriptor: string) {
-  return !startBracket || startBracket === descriptor || startBracket === '{' && descriptor.length === 1
+  return (
+    !startBracket ||
+    startBracket === descriptor ||
+    (startBracket === '{' && descriptor.length === 1)
+  )
 }
diff --git a/src/keyboard/index.ts b/src/keyboard/index.ts
new file mode 100644
index 00000000..2cd068fa
--- /dev/null
+++ b/src/keyboard/index.ts
@@ -0,0 +1 @@
+export {specialCharMap} from './specialCharMap'
diff --git a/src/type/keyMap.ts b/src/keyboard/keyMap.ts
similarity index 76%
rename from src/type/keyMap.ts
rename to src/keyboard/keyMap.ts
index 2c23ca9d..0e0a5520 100644
--- a/src/type/keyMap.ts
+++ b/src/keyboard/keyMap.ts
@@ -15,18 +15,43 @@ export const defaultKeyMap: keyboardKey[] = [
   ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
     .split('')
     .map(c => ({code: `Key${c}`, key: c, shiftKey: true})),
-    
+
   // alphanumeric block - functional
   {code: 'Space', key: ' '},
 
   {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT, keyCode: 18},
   {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT, keyCode: 18},
-  {code: 'ShiftLeft', key: 'Shift', location: DOM_KEY_LOCATION.LEFT, keyCode: 16},
-  {code: 'ShiftRight', key: 'Shift', location: DOM_KEY_LOCATION.RIGHT, keyCode: 16},
-  {code: 'ControlLeft', key: 'Control', location: DOM_KEY_LOCATION.LEFT, keyCode: 17},
-  {code: 'ControlRight', key: 'Control', location: DOM_KEY_LOCATION.RIGHT, keyCode: 17},
+  {
+    code: 'ShiftLeft',
+    key: 'Shift',
+    location: DOM_KEY_LOCATION.LEFT,
+    keyCode: 16,
+  },
+  {
+    code: 'ShiftRight',
+    key: 'Shift',
+    location: DOM_KEY_LOCATION.RIGHT,
+    keyCode: 16,
+  },
+  {
+    code: 'ControlLeft',
+    key: 'Control',
+    location: DOM_KEY_LOCATION.LEFT,
+    keyCode: 17,
+  },
+  {
+    code: 'ControlRight',
+    key: 'Control',
+    location: DOM_KEY_LOCATION.RIGHT,
+    keyCode: 17,
+  },
   {code: 'MetaLeft', key: 'Meta', location: DOM_KEY_LOCATION.LEFT, keyCode: 93},
-  {code: 'MetaRight', key: 'Meta', location: DOM_KEY_LOCATION.RIGHT, keyCode: 93},
+  {
+    code: 'MetaRight',
+    key: 'Meta',
+    location: DOM_KEY_LOCATION.RIGHT,
+    keyCode: 93,
+  },
 
   {code: 'OSLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT, keyCode: 91},
   {code: 'OSRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT, keyCode: 91},
@@ -36,18 +61,15 @@ export const defaultKeyMap: keyboardKey[] = [
   {code: 'Backspace', key: 'Backspace', keyCode: 8},
   {code: 'Enter', key: 'Enter', keyCode: 13},
 
-
   // function
   {code: 'Escape', key: 'Escape', keyCode: 27},
 
-
   // arrows
   {code: 'ArrowUp', key: 'ArrowUp', keyCode: 38},
   {code: 'ArrowDown', key: 'ArrowDown', keyCode: 40},
   {code: 'ArrowLeft', key: 'ArrowLeft', keyCode: 37},
   {code: 'ArrowRight', key: 'ArrowRight', keyCode: 39},
 
-
   // control pad
   {code: 'Home', key: 'Home', keyCode: 36},
   {code: 'End', key: 'End', keyCode: 35},
diff --git a/src/keyboard/keyboardImplementation.ts b/src/keyboard/keyboardImplementation.ts
new file mode 100644
index 00000000..9d75462e
--- /dev/null
+++ b/src/keyboard/keyboardImplementation.ts
@@ -0,0 +1,193 @@
+import {getActiveElement, wait} from '../utils'
+import {getNextKeyDef} from './getNextKeyDef'
+import {
+  behaviorPlugin,
+  keyboardKey,
+  keyboardState,
+  modernTypeOptions,
+} from './types'
+import * as plugins from './plugins'
+import {fireEvent} from '@testing-library/dom'
+import {getKeyEventProps} from './getEventProps'
+
+export async function keyboardImplementation(
+  document: Document,
+  text: string,
+  options: modernTypeOptions,
+  state: keyboardState,
+): Promise<void> {
+  const getCurrentElement = () =>
+    getActiveElement(document) ?? /* istanbul ignore next */ document.body
+  const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(
+    text,
+    options,
+  )
+
+  const replace = applyPlugins(
+    plugins.replaceBehavior,
+    keyDef,
+    getCurrentElement(),
+    options,
+    state,
+  )
+  if (!replace) {
+    const pressed = state.pressed.find(p => p.keyDef === keyDef)
+
+    if (pressed) {
+      keyup(
+        keyDef,
+        getCurrentElement,
+        options,
+        state,
+        pressed.unpreventedDefault,
+      )
+    }
+
+    if (!releasePrevious) {
+      const unpreventedDefault = keydown(
+        keyDef,
+        getCurrentElement,
+        options,
+        state,
+      )
+
+      if (
+        unpreventedDefault &&
+        (keyDef.key?.length === 1 || keyDef.key === 'Enter')
+      ) {
+        keypress(keyDef, getCurrentElement, options, state)
+      }
+
+      if (releaseSelf) {
+        keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
+      }
+    }
+  }
+
+  if (text.length > consumedLength) {
+    if (options.delay > 0) {
+      await wait(options.delay)
+    }
+    await keyboardImplementation(
+      document,
+      text.slice(consumedLength),
+      options,
+      state,
+    )
+  } else if (!options.skipAutoClose) {
+    for (const k of state.pressed) {
+      keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
+    }
+  }
+}
+
+function keydown(
+  keyDef: keyboardKey,
+  getCurrentElement: () => Element,
+  options: modernTypeOptions,
+  state: keyboardState,
+) {
+  const element = getCurrentElement()
+
+  // clear carried characters when focus is moved
+  if (element !== state.activeElement) {
+    state.carryValue = undefined
+    state.carryChar = ''
+  }
+  state.activeElement = element
+
+  applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
+
+  const unpreventedDefault = fireEvent.keyDown(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
+
+  state.pressed.push({keyDef, unpreventedDefault})
+
+  if (unpreventedDefault) {
+    // all default behavior like keypress/submit etc is applied to the currentElement
+    applyPlugins(
+      plugins.keydownBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
+  }
+
+  return unpreventedDefault
+}
+
+function keypress(
+  keyDef: keyboardKey,
+  getCurrentElement: () => Element,
+  options: modernTypeOptions,
+  state: keyboardState,
+) {
+  const element = getCurrentElement()
+
+  const unpreventedDefault = fireEvent.keyPress(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
+
+  if (unpreventedDefault) {
+    applyPlugins(
+      plugins.keypressBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
+  }
+}
+
+function keyup(
+  keyDef: keyboardKey,
+  getCurrentElement: () => Element,
+  options: modernTypeOptions,
+  state: keyboardState,
+  unprevented: boolean,
+) {
+  const element = getCurrentElement()
+
+  applyPlugins(plugins.preKeyupBehavior, keyDef, element, options, state)
+
+  const unpreventedDefault = fireEvent.keyUp(
+    element,
+    getKeyEventProps(keyDef, state),
+  )
+
+  if (unprevented && unpreventedDefault) {
+    applyPlugins(
+      plugins.keyupBehavior,
+      keyDef,
+      getCurrentElement(),
+      options,
+      state,
+    )
+  }
+
+  state.pressed = state.pressed.filter(k => k.keyDef !== keyDef)
+
+  applyPlugins(plugins.postKeyupBehavior, keyDef, element, options, state)
+}
+
+function applyPlugins(
+  pluginCollection: behaviorPlugin[],
+  keyDef: keyboardKey,
+  element: Element,
+  options: modernTypeOptions,
+  state: keyboardState,
+): boolean {
+  const plugin = pluginCollection.find(p =>
+    p.matches(keyDef, element, options, state),
+  )
+
+  if (plugin) {
+    plugin.handle(keyDef, element, options, state)
+  }
+
+  return !!plugin
+}
diff --git a/src/type/plugins/arrow.ts b/src/keyboard/plugins/arrow.ts
similarity index 100%
rename from src/type/plugins/arrow.ts
rename to src/keyboard/plugins/arrow.ts
diff --git a/src/type/plugins/character.ts b/src/keyboard/plugins/character.ts
similarity index 96%
rename from src/type/plugins/character.ts
rename to src/keyboard/plugins/character.ts
index 0f722cb6..31d523d6 100644
--- a/src/type/plugins/character.ts
+++ b/src/keyboard/plugins/character.ts
@@ -3,11 +3,8 @@
  */
 
 import {fireEvent} from '@testing-library/dom'
-import {
-  fireChangeForInputTimeIfValid,
-  fireInputEventIfNeeded,
-} from 'type/shared'
-import {behaviorPlugin} from 'type/types'
+import {fireChangeForInputTimeIfValid, fireInputEventIfNeeded} from '../shared'
+import {behaviorPlugin} from '../types'
 import {
   buildTimeValue,
   calculateNewValue,
@@ -16,7 +13,7 @@ import {
   isInstanceOfElement,
   isValidDateValue,
   isValidInputTimeValue,
-} from 'utils'
+} from '../../utils'
 
 export const keypressBehavior: behaviorPlugin[] = [
   {
diff --git a/src/type/plugins/control.ts b/src/keyboard/plugins/control.ts
similarity index 100%
rename from src/type/plugins/control.ts
rename to src/keyboard/plugins/control.ts
diff --git a/src/keyboard/plugins/control/calculateNewDeleteValue.ts b/src/keyboard/plugins/control/calculateNewDeleteValue.ts
new file mode 100644
index 00000000..febdde86
--- /dev/null
+++ b/src/keyboard/plugins/control/calculateNewDeleteValue.ts
@@ -0,0 +1,33 @@
+import {getSelectionRange, getValue} from '../../../utils'
+
+export function calculateNewDeleteValue(element: Element) {
+  const {selectionStart, selectionEnd} = getSelectionRange(element)
+
+  // istanbul ignore next
+  const value = getValue(element) ?? ''
+
+  let newValue
+
+  if (selectionStart === null) {
+    // at the end of an input type that does not support selection ranges
+    // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+    newValue = value
+  } else if (selectionStart === selectionEnd) {
+    if (selectionStart === 0) {
+      // at the beginning of the input
+      newValue = value.slice(1)
+    } else if (selectionStart === value.length) {
+      // at the end of the input
+      newValue = value
+    } else {
+      // in the middle of the input
+      newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
+    }
+  } else {
+    // we have something selected
+    const firstPart = value.slice(0, selectionStart)
+    newValue = firstPart + value.slice(selectionEnd as number)
+  }
+
+  return {newValue, newSelectionStart: selectionStart ?? 0}
+}
diff --git a/src/type/plugins/functional.ts b/src/keyboard/plugins/functional.ts
similarity index 100%
rename from src/type/plugins/functional.ts
rename to src/keyboard/plugins/functional.ts
diff --git a/src/type/plugins/functional/calculateBackspaceValue.ts b/src/keyboard/plugins/functional/calculateBackspaceValue.ts
similarity index 100%
rename from src/type/plugins/functional/calculateBackspaceValue.ts
rename to src/keyboard/plugins/functional/calculateBackspaceValue.ts
diff --git a/src/keyboard/plugins/index.ts b/src/keyboard/plugins/index.ts
new file mode 100644
index 00000000..1cfd9380
--- /dev/null
+++ b/src/keyboard/plugins/index.ts
@@ -0,0 +1,43 @@
+import {behaviorPlugin} from '../types'
+import {isInstanceOfElement} from '../../utils'
+import * as arrowKeys from './arrow'
+import * as controlKeys from './control'
+import * as characterKeys from './character'
+import * as functionalKeys from './functional'
+
+export const replaceBehavior: behaviorPlugin[] = [
+  {
+    matches: (keyDef, element) =>
+      keyDef.key === 'selectall' &&
+      (isInstanceOfElement(element, 'HTMLInputElement') ||
+        isInstanceOfElement(element, 'HTMLTextAreaElement')),
+    handle: (keyDef, element) => {
+      ;(element as HTMLInputElement).select()
+    },
+  },
+]
+
+export const preKeydownBehavior: behaviorPlugin[] = [
+  ...functionalKeys.preKeydownBehavior,
+]
+
+export const keydownBehavior: behaviorPlugin[] = [
+  ...arrowKeys.keydownBehavior,
+  ...controlKeys.keydownBehavior,
+  ...functionalKeys.keydownBehavior,
+]
+
+export const keypressBehavior: behaviorPlugin[] = [
+  ...functionalKeys.keypressBehavior,
+  ...characterKeys.keypressBehavior,
+]
+
+export const preKeyupBehavior: behaviorPlugin[] = [
+  ...functionalKeys.preKeyupBehavior,
+]
+
+export const keyupBehavior: behaviorPlugin[] = [...functionalKeys.keyupBehavior]
+
+export const postKeyupBehavior: behaviorPlugin[] = [
+  ...functionalKeys.postKeyupBehavior,
+]
diff --git a/src/type/shared/fireChangeForInputTimeIfValid.ts b/src/keyboard/shared/fireChangeForInputTimeIfValid.ts
similarity index 85%
rename from src/type/shared/fireChangeForInputTimeIfValid.ts
rename to src/keyboard/shared/fireChangeForInputTimeIfValid.ts
index 0a31a7c9..3a567698 100644
--- a/src/type/shared/fireChangeForInputTimeIfValid.ts
+++ b/src/keyboard/shared/fireChangeForInputTimeIfValid.ts
@@ -1,5 +1,5 @@
 import {fireEvent} from '@testing-library/dom'
-import {isValidInputTimeValue} from '../../utils/edit'
+import {isValidInputTimeValue} from '../../utils'
 
 export function fireChangeForInputTimeIfValid(
   el: HTMLInputElement & {type: 'time'},
diff --git a/src/type/shared/fireInputEventIfNeeded.ts b/src/keyboard/shared/fireInputEventIfNeeded.ts
similarity index 88%
rename from src/type/shared/fireInputEventIfNeeded.ts
rename to src/keyboard/shared/fireInputEventIfNeeded.ts
index 4cc005d7..2c468dc4 100644
--- a/src/type/shared/fireInputEventIfNeeded.ts
+++ b/src/keyboard/shared/fireInputEventIfNeeded.ts
@@ -1,7 +1,10 @@
 import {fireEvent} from '@testing-library/dom'
-import {isInstanceOfElement} from 'utils/misc'
-import {isClickableInput} from '../../utils/click'
-import {getValue, isContentEditable} from '../../utils/edit'
+import {
+  isInstanceOfElement,
+  isClickableInput,
+  getValue,
+  isContentEditable,
+} from '../../utils'
 import {setSelectionRange} from './setSelectionRange'
 
 export function fireInputEventIfNeeded({
diff --git a/src/type/shared/index.ts b/src/keyboard/shared/index.ts
similarity index 100%
rename from src/type/shared/index.ts
rename to src/keyboard/shared/index.ts
diff --git a/src/type/shared/setSelectionRange.ts b/src/keyboard/shared/setSelectionRange.ts
similarity index 99%
rename from src/type/shared/setSelectionRange.ts
rename to src/keyboard/shared/setSelectionRange.ts
index f8deca4d..a25ceb2d 100644
--- a/src/type/shared/setSelectionRange.ts
+++ b/src/keyboard/shared/setSelectionRange.ts
@@ -1,4 +1,4 @@
-import {getValue, setSelectionRangeIfNecessary} from '../../utils/edit'
+import {getValue, setSelectionRangeIfNecessary} from '../../utils'
 
 export function setSelectionRange({
   currentElement,
diff --git a/src/type/specialCharMap.ts b/src/keyboard/specialCharMap.ts
similarity index 100%
rename from src/type/specialCharMap.ts
rename to src/keyboard/specialCharMap.ts
diff --git a/src/type/types.ts b/src/keyboard/types.ts
similarity index 83%
rename from src/type/types.ts
rename to src/keyboard/types.ts
index 4c43572c..79de722b 100644
--- a/src/type/types.ts
+++ b/src/keyboard/types.ts
@@ -2,7 +2,7 @@ export type keyboardState = {
   /*
       All keys that have been pressed and not been lifted up yet.
     */
-  pressed: {keyDef: keyboardKey, unpreventedDefault: boolean}[]
+  pressed: {keyDef: keyboardKey; unpreventedDefault: boolean}[]
 
   /*
       Active modifiers
@@ -69,6 +69,16 @@ export interface keyboardKey {
 }
 
 export interface behaviorPlugin {
-  matches: (keyDef: keyboardKey, element: Element, options: modernTypeOptions, state: keyboardState) => boolean,
-  handle: (keyDef: keyboardKey, element: Element, options: modernTypeOptions, state: keyboardState) => void,
+  matches: (
+    keyDef: keyboardKey,
+    element: Element,
+    options: modernTypeOptions,
+    state: keyboardState,
+  ) => boolean
+  handle: (
+    keyDef: keyboardKey,
+    element: Element,
+    options: modernTypeOptions,
+    state: keyboardState,
+  ) => void
 }
diff --git a/src/type/index.ts b/src/type/index.ts
index ced56967..9894d5e3 100644
--- a/src/type/index.ts
+++ b/src/type/index.ts
@@ -19,5 +19,3 @@ export function type(
     return typeImplementation(element, text, {delay, ...options})
   }
 }
-
-export {specialCharMap} from './specialCharMap'
diff --git a/src/type/plugins/control/calculateNewDeleteValue.ts b/src/type/plugins/control/calculateNewDeleteValue.ts
deleted file mode 100644
index 519a9289..00000000
--- a/src/type/plugins/control/calculateNewDeleteValue.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getSelectionRange, getValue } from "../../../utils"
-
-export function calculateNewDeleteValue(element: Element) {
-    const { selectionStart, selectionEnd } = getSelectionRange(element)
-
-    // istanbul ignore next
-    const value = getValue(element) ?? ''
-
-    let newValue
-
-    if (selectionStart === null) {
-        // at the end of an input type that does not support selection ranges
-        // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
-        newValue = value
-    } else if (selectionStart === selectionEnd) {
-        if (selectionStart === 0) {
-            // at the beginning of the input
-            newValue = value.slice(1)
-        } else if (selectionStart === value.length) {
-            // at the end of the input
-            newValue = value
-        } else {
-            // in the middle of the input
-            newValue = value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
-        }
-    } else {
-        // we have something selected
-        const firstPart = value.slice(0, selectionStart)
-        newValue = firstPart + value.slice(selectionEnd as number)
-    }
-
-    return { newValue, newSelectionStart: selectionStart ?? 0 }
-}
diff --git a/src/type/plugins/index.ts b/src/type/plugins/index.ts
deleted file mode 100644
index 58edc5ac..00000000
--- a/src/type/plugins/index.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { behaviorPlugin } from "../types"
-import { isInstanceOfElement } from "../../utils"
-import * as arrowKeys from './arrow'
-import * as controlKeys from './control'
-import * as characterKeys from './character'
-import * as functionalKeys from './functional'
-
-export const replaceBehavior: behaviorPlugin[] = [
-    {
-        matches: (keyDef, element) => keyDef.key === 'selectall' && (
-            isInstanceOfElement(element, 'HTMLInputElement')
-            || isInstanceOfElement(element, 'HTMLTextAreaElement')
-        ),
-        handle: (keyDef, element) => {
-            (element as HTMLInputElement).select()
-        },
-    },
-]
-
-export const preKeydownBehavior: behaviorPlugin[] = [
-    ...functionalKeys.preKeydownBehavior,
-]
-
-export const keydownBehavior: behaviorPlugin[] = [
-    ...arrowKeys.keydownBehavior,
-    ...controlKeys.keydownBehavior,
-    ...functionalKeys.keydownBehavior,
-]
-
-export const keypressBehavior: behaviorPlugin[] = [
-    ...functionalKeys.keypressBehavior,
-    ...characterKeys.keypressBehavior,
-]
-
-export const preKeyupBehavior: behaviorPlugin[] = [
-    ...functionalKeys.preKeyupBehavior,
-]
-
-export const keyupBehavior: behaviorPlugin[] = [
-    ...functionalKeys.keyupBehavior,
-]
-
-export const postKeyupBehavior: behaviorPlugin[] = [
-    ...functionalKeys.postKeyupBehavior,
-]
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 42fc9933..7ba1cc12 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -1,4 +1,3 @@
-import {fireEvent} from '@testing-library/dom'
 // TODO: wrap in asyncWrapper
 import {
   setSelectionRangeIfNecessary,
@@ -6,18 +5,12 @@ import {
   getValue,
   isContentEditable,
   getActiveElement,
+  wait,
 } from '../utils'
 import {click} from '../click'
-import {getNextKeyDef} from './getNextKeyDef'
-import type {
-  modernTypeOptions,
-  keyboardState,
-  behaviorPlugin,
-  keyboardKey,
-} from './types'
-import * as plugins from './plugins'
-import {getKeyEventProps} from './getEventProps'
-import {defaultKeyMap} from './keyMap'
+import type {keyboardState} from '../keyboard/types'
+import {defaultKeyMap} from '../keyboard/keyMap'
+import {keyboardImplementation} from '../keyboard/keyboardImplementation'
 
 export interface typeOptions {
   delay?: number
@@ -83,7 +76,7 @@ export async function typeImplementation(
     await wait(delay)
   }
 
-  await modernTypeImplementation(
+  await keyboardImplementation(
     element.ownerDocument,
     text,
     {
@@ -99,10 +92,6 @@ export async function typeImplementation(
   )
 }
 
-function wait(time?: number) {
-  return new Promise<void>(resolve => setTimeout(() => resolve(), time))
-}
-
 function createKeyboardState(): keyboardState {
   return {
     activeElement: null,
@@ -117,185 +106,3 @@ function createKeyboardState(): keyboardState {
     },
   }
 }
-
-async function modernTypeImplementation(
-  document: Document,
-  text: string,
-  options: modernTypeOptions,
-  state: keyboardState,
-): Promise<void> {
-  const getCurrentElement = () =>
-    getActiveElement(document) ?? /* istanbul ignore next */ document.body
-  const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(
-    text,
-    options,
-  )
-
-  const replace = applyPlugins(
-    plugins.replaceBehavior,
-    keyDef,
-    getCurrentElement(),
-    options,
-    state,
-  )
-  if (!replace) {
-    const pressed = state.pressed.find(p => p.keyDef === keyDef)
-
-    if (pressed) {
-      keyup(
-        keyDef,
-        getCurrentElement,
-        options,
-        state,
-        pressed.unpreventedDefault,
-      )
-    }
-
-    if (!releasePrevious) {
-      const unpreventedDefault = keydown(
-        keyDef,
-        getCurrentElement,
-        options,
-        state,
-      )
-
-      if (
-        unpreventedDefault &&
-        (keyDef.key?.length === 1 || keyDef.key === 'Enter')
-      ) {
-        keypress(keyDef, getCurrentElement, options, state)
-      }
-
-      if (releaseSelf) {
-        keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
-      }
-    }
-  }
-
-  if (text.length > consumedLength) {
-    if (options.delay > 0) {
-      await wait(options.delay)
-    }
-    await modernTypeImplementation(
-      document,
-      text.slice(consumedLength),
-      options,
-      state,
-    )
-  } else if (!options.skipAutoClose) {
-    for (const k of state.pressed) {
-      keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
-    }
-  }
-}
-
-function keydown(
-  keyDef: keyboardKey,
-  getCurrentElement: () => Element,
-  options: modernTypeOptions,
-  state: keyboardState,
-) {
-  const element = getCurrentElement()
-
-  // clear carried characters when focus is moved
-  if (element !== state.activeElement) {
-    state.carryValue = undefined
-    state.carryChar = ''
-  }
-  state.activeElement = element
-
-  applyPlugins(plugins.preKeydownBehavior, keyDef, element, options, state)
-
-  const unpreventedDefault = fireEvent.keyDown(
-    element,
-    getKeyEventProps(keyDef, state),
-  )
-
-  state.pressed.push({keyDef, unpreventedDefault})
-
-  if (unpreventedDefault) {
-    // all default behavior like keypress/submit etc is applied to the currentElement
-    applyPlugins(
-      plugins.keydownBehavior,
-      keyDef,
-      getCurrentElement(),
-      options,
-      state,
-    )
-  }
-
-  return unpreventedDefault
-}
-
-function keypress(
-  keyDef: keyboardKey,
-  getCurrentElement: () => Element,
-  options: modernTypeOptions,
-  state: keyboardState,
-) {
-  const element = getCurrentElement()
-
-  const unpreventedDefault = fireEvent.keyPress(
-    element,
-    getKeyEventProps(keyDef, state),
-  )
-
-  if (unpreventedDefault) {
-    applyPlugins(
-      plugins.keypressBehavior,
-      keyDef,
-      getCurrentElement(),
-      options,
-      state,
-    )
-  }
-}
-
-function keyup(
-  keyDef: keyboardKey,
-  getCurrentElement: () => Element,
-  options: modernTypeOptions,
-  state: keyboardState,
-  unprevented: boolean,
-) {
-  const element = getCurrentElement()
-
-  applyPlugins(plugins.preKeyupBehavior, keyDef, element, options, state)
-
-  const unpreventedDefault = fireEvent.keyUp(
-    element,
-    getKeyEventProps(keyDef, state),
-  )
-
-  if (unprevented && unpreventedDefault) {
-    applyPlugins(
-      plugins.keyupBehavior,
-      keyDef,
-      getCurrentElement(),
-      options,
-      state,
-    )
-  }
-
-  state.pressed = state.pressed.filter(k => k.keyDef !== keyDef)
-
-  applyPlugins(plugins.postKeyupBehavior, keyDef, element, options, state)
-}
-
-function applyPlugins(
-  pluginCollection: behaviorPlugin[],
-  keyDef: keyboardKey,
-  element: Element,
-  options: modernTypeOptions,
-  state: keyboardState,
-): boolean {
-  const plugin = pluginCollection.find(p =>
-    p.matches(keyDef, element, options, state),
-  )
-
-  if (plugin) {
-    plugin.handle(keyDef, element, options, state)
-  }
-
-  return !!plugin
-}
diff --git a/src/utils/click/index.ts b/src/utils/click/index.ts
deleted file mode 100644
index d8f3f907..00000000
--- a/src/utils/click/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './getMouseEventOptions'
-export * from './isClickableInput'
diff --git a/src/utils/click/isClickableInput.ts b/src/utils/click/isClickableInput.ts
index 21fef8f9..88f47687 100644
--- a/src/utils/click/isClickableInput.ts
+++ b/src/utils/click/isClickableInput.ts
@@ -1,4 +1,4 @@
-import {isInstanceOfElement} from '../misc'
+import {isInstanceOfElement} from '../misc/isInstanceOfElement'
 
 const CLICKABLE_INPUT_TYPES = [
   'button',
diff --git a/src/utils/edit/index.ts b/src/utils/edit/index.ts
deleted file mode 100644
index 658bf669..00000000
--- a/src/utils/edit/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './buildTimeValue'
-export * from './calculateNewValue'
-export * from './getSelectionRange'
-export * from './getValue'
-export * from './isContentEditable'
-export * from './isValidDateValue'
-export * from './isValidInputTimeValue'
-export * from './setSelectionRangeIfNecessary'
diff --git a/src/utils/focus/getActiveElement.ts b/src/utils/focus/getActiveElement.ts
index 1ca0de16..b2bd25c5 100644
--- a/src/utils/focus/getActiveElement.ts
+++ b/src/utils/focus/getActiveElement.ts
@@ -1,4 +1,4 @@
-import {isDisabled} from '../misc'
+import {isDisabled} from '../misc/isDisabled'
 
 export function getActiveElement(
   document: Document | ShadowRoot,
diff --git a/src/utils/focus/index.ts b/src/utils/focus/index.ts
deleted file mode 100644
index 79d60fd5..00000000
--- a/src/utils/focus/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './getActiveElement'
-export * from './isFocusable'
-export * from './selector'
diff --git a/src/utils/focus/isFocusable.ts b/src/utils/focus/isFocusable.ts
index 7a0f2606..b07e1f52 100644
--- a/src/utils/focus/isFocusable.ts
+++ b/src/utils/focus/isFocusable.ts
@@ -1,4 +1,4 @@
-import {isLabelWithInternallyDisabledControl} from '../misc'
+import {isLabelWithInternallyDisabledControl} from '../misc/isLabelWithInternallyDisabledControl'
 import {FOCUSABLE_SELECTOR} from './selector'
 
 export function isFocusable(element: Element): element is HTMLElement {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e9a99d78..6d5a2294 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,22 @@
-export * from './click'
-export * from './edit'
-export * from './focus'
-export * from './misc'
+export * from './click/getMouseEventOptions'
+export * from './click/isClickableInput'
+
+export * from './edit/buildTimeValue'
+export * from './edit/calculateNewValue'
+export * from './edit/getSelectionRange'
+export * from './edit/getValue'
+export * from './edit/isContentEditable'
+export * from './edit/isValidDateValue'
+export * from './edit/isValidInputTimeValue'
+export * from './edit/setSelectionRangeIfNecessary'
+
+export * from './focus/getActiveElement'
+export * from './focus/isFocusable'
+export * from './focus/selector'
+
+export * from './misc/eventWrapper'
+export * from './misc/isInstanceOfElement'
+export * from './misc/isLabelWithInternallyDisabledControl'
+export * from './misc/isVisible'
+export * from './misc/isDisabled'
+export * from './misc/wait'
diff --git a/src/utils/misc/index.ts b/src/utils/misc/index.ts
deleted file mode 100644
index 090552d6..00000000
--- a/src/utils/misc/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './eventWrapper'
-export * from './isInstanceOfElement'
-export * from './isLabelWithInternallyDisabledControl'
-export * from './isVisible'
-export * from './isDisabled'
diff --git a/src/utils/misc/wait.ts b/src/utils/misc/wait.ts
new file mode 100644
index 00000000..69ad59b5
--- /dev/null
+++ b/src/utils/misc/wait.ts
@@ -0,0 +1,3 @@
+export function wait(time?: number) {
+  return new Promise<void>(resolve => setTimeout(() => resolve(), time))
+}

From 7f7bd628bfce9c8116921a7c3e772a8047a38e20 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 19:24:47 +0100
Subject: [PATCH 29/43] feat: introduce keyboard API

---
 .../{type => keyboard}/getNextKeyDef.ts       |   6 +-
 src/__tests__/keyboard/index.ts               | 103 ++++++++++++++++++
 src/__tests__/type.js                         |  14 ++-
 src/click.d.ts                                |  10 ++
 src/index.js                                  |   2 +
 src/keyboard/getNextKeyDef.ts                 |   8 +-
 src/keyboard/index.ts                         |  74 +++++++++++++
 src/keyboard/keyboardImplementation.ts        |  43 ++++----
 src/keyboard/specialCharMap.ts                |   2 +-
 src/keyboard/types.ts                         |  41 +++----
 src/type/index.ts                             |  23 +++-
 src/type/typeImplementation.ts                |  43 ++------
 tsconfig.json                                 |  16 ++-
 {src/utils/misc => typings}/dom-helpers.d.ts  |   0
 typings/index.d.ts                            |  54 +++------
 typings/test.ts                               |   1 -
 16 files changed, 302 insertions(+), 138 deletions(-)
 rename src/__tests__/{type => keyboard}/getNextKeyDef.ts (96%)
 create mode 100644 src/__tests__/keyboard/index.ts
 create mode 100644 src/click.d.ts
 rename {src/utils/misc => typings}/dom-helpers.d.ts (100%)

diff --git a/src/__tests__/type/getNextKeyDef.ts b/src/__tests__/keyboard/getNextKeyDef.ts
similarity index 96%
rename from src/__tests__/type/getNextKeyDef.ts
rename to src/__tests__/keyboard/getNextKeyDef.ts
index a3b66bb9..892767d6 100644
--- a/src/__tests__/type/getNextKeyDef.ts
+++ b/src/__tests__/keyboard/getNextKeyDef.ts
@@ -1,12 +1,12 @@
 import {getNextKeyDef} from 'keyboard/getNextKeyDef'
 import {defaultKeyMap} from 'keyboard/keyMap'
-import {keyboardKey, modernTypeOptions} from 'keyboard/types'
+import {keyboardKey, keyboardOptions} from 'keyboard/types'
 
-const options: modernTypeOptions = {
+const options: keyboardOptions = {
+  document,
   keyboardMap: defaultKeyMap,
   autoModify: false,
   delay: 123,
-  skipAutoClose: false,
 }
 
 test('reference key per code', () => {
diff --git a/src/__tests__/keyboard/index.ts b/src/__tests__/keyboard/index.ts
new file mode 100644
index 00000000..a7f2c551
--- /dev/null
+++ b/src/__tests__/keyboard/index.ts
@@ -0,0 +1,103 @@
+import userEvent from '../../index'
+import {addListeners, setup} from '../helpers/utils'
+
+it('type without focus', () => {
+  const {element} = setup('<input/>')
+  const {getEventSnapshot} = addListeners(document.body)
+
+  userEvent.keyboard('foo')
+
+  expect(element).toHaveValue('')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: body
+
+    body - keydown: f (102)
+    body - keypress: f (102)
+    body - keyup: f (102)
+    body - keydown: o (111)
+    body - keypress: o (111)
+    body - keyup: o (111)
+    body - keydown: o (111)
+    body - keypress: o (111)
+    body - keyup: o (111)
+  `)
+})
+
+it('type with focus', () => {
+  const {element} = setup('<input/>')
+  const {getEventSnapshot} = addListeners(document.body)
+  ;(element as HTMLInputElement).focus()
+
+  userEvent.keyboard('foo')
+
+  expect(element).toHaveValue('foo')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: body
+
+    input[value=""] - focusin
+    input[value=""] - keydown: f (102)
+    input[value=""] - keypress: f (102)
+    input[value="f"] - input
+    input[value="f"] - keyup: f (102)
+    input[value="f"] - keydown: o (111)
+    input[value="f"] - keypress: o (111)
+    input[value="fo"] - input
+    input[value="fo"] - keyup: o (111)
+    input[value="fo"] - keydown: o (111)
+    input[value="fo"] - keypress: o (111)
+    input[value="foo"] - input
+    input[value="foo"] - keyup: o (111)
+  `)
+})
+
+it('type asynchronous', async () => {
+  const {element} = setup('<input/>')
+  const {getEventSnapshot} = addListeners(document.body)
+  ;(element as HTMLInputElement).focus()
+
+  // eslint-disable-next-line testing-library/no-await-sync-events
+  await userEvent.keyboard('foo', {delay: 1})
+
+  expect(element).toHaveValue('foo')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: body
+
+    input[value=""] - focusin
+    input[value=""] - keydown: f (102)
+    input[value=""] - keypress: f (102)
+    input[value="f"] - input
+    input[value="f"] - keyup: f (102)
+    input[value="f"] - keydown: o (111)
+    input[value="f"] - keypress: o (111)
+    input[value="fo"] - input
+    input[value="fo"] - keyup: o (111)
+    input[value="fo"] - keydown: o (111)
+    input[value="fo"] - keypress: o (111)
+    input[value="foo"] - input
+    input[value="foo"] - keyup: o (111)
+  `)
+})
+
+it('error in sync', async () => {
+  const err = jest.spyOn(console, 'error')
+  err.mockImplementation(() => {})
+
+  userEvent.keyboard('{!')
+
+  // the catch will be asynchronous
+  await Promise.resolve()
+
+  expect(err).toHaveBeenCalledWith(expect.any(Error))
+  expect(err.mock.calls[0][0]).toHaveProperty(
+    'message',
+    'Expected key descriptor but found "!" in "{!"',
+  )
+})
+
+it('error in async', async () => {
+  const promise = userEvent.keyboard('{!', {delay: 1})
+
+  return expect(promise).rejects.toThrowError(
+    'Expected key descriptor but found "!" in "{!"',
+  )
+})
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index e48e931b..ce1549a2 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -803,10 +803,10 @@ test('typing an invalid input value', () => {
 
 test('should not throw error if we are trying to call type on an element without a value', () => {
   const {element} = setup('<div />')
-  expect.assertions(0)
-  return userEvent
-    .type(element, "I'm only a div :(")
-    .catch(e => expect(e).toBeUndefined())
+
+  return expect(userEvent.type(element, ':(', {delay: 1})).resolves.toBe(
+    undefined,
+  )
 })
 
 test('typing on button should not alter its value', () => {
@@ -847,8 +847,10 @@ test('typing on input type submit should not alter its value', () => {
 
 test('typing on input type file should not result in an error', () => {
   const {element} = setup('<input type="file" />')
-  expect.assertions(0)
-  return userEvent.type(element, 'bar').catch(e => expect(e).toBeUndefined())
+
+  return expect(userEvent.type(element, 'bar', {delay: 1})).resolves.toBe(
+    undefined,
+  )
 })
 
 test('should submit a form containing multiple text inputs and an input of type submit', () => {
diff --git a/src/click.d.ts b/src/click.d.ts
new file mode 100644
index 00000000..57ac45fc
--- /dev/null
+++ b/src/click.d.ts
@@ -0,0 +1,10 @@
+export declare interface clickOptions {
+  skipHover?: boolean
+  clickCount?: number
+}
+
+export declare function click(
+  element: TargetElement,
+  init?: MouseEventInit,
+  options?: clickOptions,
+): void
diff --git a/src/index.js b/src/index.js
index 2b610d97..28e4750a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import {hover, unhover} from './hover'
 import {upload} from './upload'
 import {selectOptions, deselectOptions} from './select-options'
 import {paste} from './paste'
+import {keyboard} from './keyboard'
 
 const userEvent = {
   click,
@@ -19,6 +20,7 @@ const userEvent = {
   selectOptions,
   deselectOptions,
   paste,
+  keyboard,
 }
 
 export default userEvent
diff --git a/src/keyboard/getNextKeyDef.ts b/src/keyboard/getNextKeyDef.ts
index e2ff6356..bea29afb 100644
--- a/src/keyboard/getNextKeyDef.ts
+++ b/src/keyboard/getNextKeyDef.ts
@@ -1,4 +1,4 @@
-import {keyboardKey, modernTypeOptions} from './types'
+import {keyboardKey, keyboardOptions} from './types'
 
 /**
  * Get the next key from keyMap
@@ -11,7 +11,7 @@ import {keyboardKey, modernTypeOptions} from './types'
  */
 export function getNextKeyDef(
   text: string,
-  options: modernTypeOptions,
+  options: keyboardOptions,
 ): {
   keyDef: keyboardKey
   consumedLength: number
@@ -31,7 +31,7 @@ export function getNextKeyDef(
   // istanbul ignore if
   if (!descriptor) {
     throw new Error(
-      `Expected key descriptor but found "${text[descriptorStart]}" in "${text}`,
+      `Expected key descriptor but found "${text[descriptorStart]}" in "${text}"`,
     )
   }
 
@@ -53,7 +53,7 @@ export function getNextKeyDef(
     throw new Error(
       `Expected closing bracket but found "${
         text[descriptorEnd + endModifier.length]
-      }" in "${text}`,
+      }" in "${text}"`,
     )
   }
 
diff --git a/src/keyboard/index.ts b/src/keyboard/index.ts
index 2cd068fa..36827e3d 100644
--- a/src/keyboard/index.ts
+++ b/src/keyboard/index.ts
@@ -1 +1,75 @@
+import {getConfig as getDOMTestingLibraryConfig} from '@testing-library/dom'
+import {keyboardImplementation, releaseAllKeys} from './keyboardImplementation'
+import {defaultKeyMap} from './keyMap'
+import {keyboardState, keyboardOptions, keyboardKey} from './types'
+
 export {specialCharMap} from './specialCharMap'
+export type {keyboardOptions, keyboardKey}
+
+export function keyboard(
+  text: string,
+  options?: Partial<keyboardOptions & {keyboardState: keyboardState; delay: 0}>,
+): keyboardState
+export function keyboard(
+  text: string,
+  options: Partial<
+    keyboardOptions & {keyboardState: keyboardState; delay: number}
+  >,
+): Promise<keyboardState>
+export function keyboard(
+  text: string,
+  options?: Partial<keyboardOptions & {keyboardState: keyboardState}>,
+): keyboardState | Promise<keyboardState> {
+  const {promise, state} = keyboardImplementationWrapper(text, options)
+
+  if ((options?.delay ?? 0) > 0) {
+    return getDOMTestingLibraryConfig().asyncWrapper(() =>
+      promise.then(() => state),
+    )
+  } else {
+    // prevent users from dealing with UnhandledPromiseRejectionWarning in sync call
+    promise.catch(console.error)
+
+    return state
+  }
+}
+
+export function keyboardImplementationWrapper(
+  text: string,
+  config: Partial<keyboardOptions & {keyboardState: keyboardState}> = {},
+) {
+  const {
+    keyboardState: state = createKeyboardState(),
+    delay = 0,
+    document: doc = document,
+    autoModify = false,
+    keyboardMap = defaultKeyMap,
+  } = config
+  const options = {
+    delay,
+    document: doc,
+    autoModify,
+    keyboardMap,
+  }
+
+  return {
+    promise: keyboardImplementation(text, options, state),
+    state,
+    releaseAllKeys: () => releaseAllKeys(options, state),
+  }
+}
+
+function createKeyboardState(): keyboardState {
+  return {
+    activeElement: null,
+    pressed: [],
+    carryChar: '',
+    modifiers: {
+      alt: false,
+      caps: false,
+      ctrl: false,
+      meta: false,
+      shift: false,
+    },
+  }
+}
diff --git a/src/keyboard/keyboardImplementation.ts b/src/keyboard/keyboardImplementation.ts
index 9d75462e..c6626cc6 100644
--- a/src/keyboard/keyboardImplementation.ts
+++ b/src/keyboard/keyboardImplementation.ts
@@ -1,23 +1,23 @@
+import {fireEvent} from '@testing-library/dom'
 import {getActiveElement, wait} from '../utils'
 import {getNextKeyDef} from './getNextKeyDef'
 import {
   behaviorPlugin,
   keyboardKey,
   keyboardState,
-  modernTypeOptions,
+  keyboardOptions,
 } from './types'
 import * as plugins from './plugins'
-import {fireEvent} from '@testing-library/dom'
 import {getKeyEventProps} from './getEventProps'
 
 export async function keyboardImplementation(
-  document: Document,
   text: string,
-  options: modernTypeOptions,
+  options: keyboardOptions,
   state: keyboardState,
 ): Promise<void> {
-  const getCurrentElement = () =>
-    getActiveElement(document) ?? /* istanbul ignore next */ document.body
+  const {document} = options
+  const getCurrentElement = () => getActive(document)
+
   const {keyDef, consumedLength, releasePrevious, releaseSelf} = getNextKeyDef(
     text,
     options,
@@ -68,23 +68,26 @@ export async function keyboardImplementation(
     if (options.delay > 0) {
       await wait(options.delay)
     }
-    await keyboardImplementation(
-      document,
-      text.slice(consumedLength),
-      options,
-      state,
-    )
-  } else if (!options.skipAutoClose) {
-    for (const k of state.pressed) {
-      keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
-    }
+    return keyboardImplementation(text.slice(consumedLength), options, state)
+  }
+  return void undefined
+}
+
+function getActive(document: Document): Element {
+  return getActiveElement(document) ?? /* istanbul ignore next */ document.body
+}
+
+export function releaseAllKeys(options: keyboardOptions, state: keyboardState) {
+  const getCurrentElement = () => getActive(options.document)
+  for (const k of state.pressed) {
+    keyup(k.keyDef, getCurrentElement, options, state, k.unpreventedDefault)
   }
 }
 
 function keydown(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
-  options: modernTypeOptions,
+  options: keyboardOptions,
   state: keyboardState,
 ) {
   const element = getCurrentElement()
@@ -122,7 +125,7 @@ function keydown(
 function keypress(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
-  options: modernTypeOptions,
+  options: keyboardOptions,
   state: keyboardState,
 ) {
   const element = getCurrentElement()
@@ -146,7 +149,7 @@ function keypress(
 function keyup(
   keyDef: keyboardKey,
   getCurrentElement: () => Element,
-  options: modernTypeOptions,
+  options: keyboardOptions,
   state: keyboardState,
   unprevented: boolean,
 ) {
@@ -178,7 +181,7 @@ function applyPlugins(
   pluginCollection: behaviorPlugin[],
   keyDef: keyboardKey,
   element: Element,
-  options: modernTypeOptions,
+  options: keyboardOptions,
   state: keyboardState,
 ): boolean {
   const plugin = pluginCollection.find(p =>
diff --git a/src/keyboard/specialCharMap.ts b/src/keyboard/specialCharMap.ts
index 30e27775..b69ffdc6 100644
--- a/src/keyboard/specialCharMap.ts
+++ b/src/keyboard/specialCharMap.ts
@@ -12,4 +12,4 @@ export const specialCharMap = {
   selectAll: '{selectall}',
   space: '{space}',
   whitespace: ' ',
-}
+} as const
diff --git a/src/keyboard/types.ts b/src/keyboard/types.ts
index 79de722b..1fc949d5 100644
--- a/src/keyboard/types.ts
+++ b/src/keyboard/types.ts
@@ -1,10 +1,13 @@
+/**
+ * @internal Do not create/alter this by yourself as this type might be subject to changes.
+ */
 export type keyboardState = {
-  /*
+  /**
       All keys that have been pressed and not been lifted up yet.
     */
   pressed: {keyDef: keyboardKey; unpreventedDefault: boolean}[]
 
-  /*
+  /**
       Active modifiers
     */
   modifiers: {
@@ -15,34 +18,34 @@ export type keyboardState = {
     shift: boolean
   }
 
-  /*
+  /**
       The element the keyboard input is performed on.
       Some behavior might differ if the activeElement changes between corresponding keyboard events.
     */
   activeElement: Element | null
 
-  /*
+  /**
       For HTMLInputElements type='number':
       If the last input char is '.', '-' or 'e',
       the IDL value attribute does not reflect the input value.
     */
   carryValue?: string
 
-  /*
+  /**
       Carry over characters to following key handlers.
       E.g. ^1
     */
   carryChar: string
 }
 
-export type modernTypeOptions = {
-  /* Delay between keystrokes */
+export type keyboardOptions = {
+  /** Document in which to perform the events */
+  document: Document
+  /** Delay between keystrokes */
   delay: number
-  /* Do not automatically add keyup events for opened modifiers */
-  skipAutoClose: boolean
-  /* Add modifiers for given keys */
+  /** Add modifiers for given keys - not implemented yet */
   autoModify: boolean
-  /* Keyboard layout to use */
+  /** Keyboard layout to use */
   keyboardMap: keyboardKey[]
 }
 
@@ -54,17 +57,17 @@ export enum DOM_KEY_LOCATION {
 }
 
 export interface keyboardKey {
-  /* Physical location on a keyboard */
+  /** Physical location on a keyboard */
   code?: string
-  /* Character or functional key descriptor */
+  /** Character or functional key descriptor */
   key?: string
-  /* Location on the keyboard for keys with multiple representation */
+  /** Location on the keyboard for keys with multiple representation */
   location?: DOM_KEY_LOCATION
-  /* keyCode for legacy support */
+  /** keyCode for legacy support */
   keyCode?: number
-  /* Does the character in `key` require/imply AltRight to be pressed? */
+  /** Does the character in `key` require/imply AltRight to be pressed? */
   altGr?: boolean
-  /* Does the character in `key` require/imply a shiftKey to be pressed? */
+  /** Does the character in `key` require/imply a shiftKey to be pressed? */
   shift?: boolean
 }
 
@@ -72,13 +75,13 @@ export interface behaviorPlugin {
   matches: (
     keyDef: keyboardKey,
     element: Element,
-    options: modernTypeOptions,
+    options: keyboardOptions,
     state: keyboardState,
   ) => boolean
   handle: (
     keyDef: keyboardKey,
     element: Element,
-    options: modernTypeOptions,
+    options: keyboardOptions,
     state: keyboardState,
   ) => void
 }
diff --git a/src/type/index.ts b/src/type/index.ts
index 9894d5e3..74c99edd 100644
--- a/src/type/index.ts
+++ b/src/type/index.ts
@@ -1,21 +1,34 @@
 import {getConfig as getDOMTestingLibraryConfig} from '@testing-library/dom'
 import {typeImplementation, typeOptions} from './typeImplementation'
 
+export function type(
+  element: Element,
+  text: string,
+  options?: typeOptions & {delay?: 0},
+): void
+export function type(
+  element: Element,
+  text: string,
+  options: typeOptions & {delay: number},
+): Promise<void>
 // this needs to be wrapped in the event/asyncWrapper for React's act and angular's change detection
 // depending on whether it will be async.
 export function type(
   element: Element,
   text: string,
   {delay = 0, ...options}: typeOptions = {},
-): Promise<void> {
+): Promise<void> | void {
   // we do not want to wrap in the asyncWrapper if we're not
   // going to actually be doing anything async, so we only wrap
   // if the delay is greater than 0
+
   if (delay > 0) {
-    return getDOMTestingLibraryConfig().asyncWrapper(async () => {
-      await typeImplementation(element, text, {delay, ...options})
-    })
+    return getDOMTestingLibraryConfig().asyncWrapper(() =>
+      typeImplementation(element, text, {delay, ...options}),
+    )
   } else {
-    return typeImplementation(element, text, {delay, ...options})
+    return void typeImplementation(element, text, {delay, ...options})
+      // prevents users from dealing with UnhandledPromiseRejectionWarning
+      .catch(console.error)
   }
 }
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 7ba1cc12..5811b752 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -8,9 +8,7 @@ import {
   wait,
 } from '../utils'
 import {click} from '../click'
-import type {keyboardState} from '../keyboard/types'
-import {defaultKeyMap} from '../keyboard/keyMap'
-import {keyboardImplementation} from '../keyboard/keyboardImplementation'
+import {keyboardImplementationWrapper} from '../keyboard'
 
 export interface typeOptions {
   delay?: number
@@ -30,7 +28,7 @@ export async function typeImplementation(
     initialSelectionStart = undefined,
     initialSelectionEnd = undefined,
   }: typeOptions & {delay: number},
-) {
+): Promise<void> {
   // TODO: properly type guard
   // we use this workaround for now to prevent changing behavior
   if ((element as {disabled?: boolean}).disabled) return
@@ -76,33 +74,16 @@ export async function typeImplementation(
     await wait(delay)
   }
 
-  await keyboardImplementation(
-    element.ownerDocument,
-    text,
-    {
-      delay,
-      autoModify: false,
-      keyboardMap: defaultKeyMap,
-      skipAutoClose,
-    },
-    createKeyboardState(),
-  ).catch(
-    // istanbul ignore next
-    e => console.error(e),
-  )
-}
+  const {promise, releaseAllKeys} = keyboardImplementationWrapper(text, {
+    delay,
+    document: element.ownerDocument,
+  })
+
+  if (delay > 0) {
+    await promise
+  }
 
-function createKeyboardState(): keyboardState {
-  return {
-    activeElement: null,
-    pressed: [],
-    carryChar: '',
-    modifiers: {
-      alt: false,
-      caps: false,
-      ctrl: false,
-      meta: false,
-      shift: false,
-    },
+  if (!skipAutoClose) {
+    releaseAllKeys()
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index d7d83b6d..93f39daa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,8 @@
 {
-    "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
-    "compilerOptions": {
-        "allowJs": true
-    },
-    "include": [
-        "./src",
-        "./typings"
-    ]
-}
\ No newline at end of file
+  "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src", "./typings"]
+}
diff --git a/src/utils/misc/dom-helpers.d.ts b/typings/dom-helpers.d.ts
similarity index 100%
rename from src/utils/misc/dom-helpers.d.ts
rename to typings/dom-helpers.d.ts
diff --git a/typings/index.d.ts b/typings/index.d.ts
index eae80cde..346dae40 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,12 +1,13 @@
-// Definitions by: Wu Haotian <https://github.com/whtsky>
-export interface ITypeOpts {
-  skipClick?: boolean
-  skipAutoClose?: boolean
-  delay?: number
-  initialSelectionStart?: number
-  initialSelectionEnd?: number
-}
+import type {click, clickOptions} from '../src/click'
+import type {
+  keyboard,
+  keyboardOptions,
+  specialCharMap,
+  keyboardKey,
+} from '../src/keyboard'
+import type {type, typeOptions} from '../src/type'
 
+// Definitions by: Wu Haotian <https://github.com/whtsky>
 export interface ITabUserOptions {
   shift?: boolean
   focusTrap?: Document | Element
@@ -21,22 +22,13 @@ export type UploadInitArgument = {
   changeInit?: Event
 }
 
-export interface IClickOptions {
-  skipHover?: boolean
-  clickCount?: number
-}
-
 export interface IUploadOptions {
   applyAccept?: boolean
 }
 
 declare const userEvent: {
   clear: (element: TargetElement) => void
-  click: (
-    element: TargetElement,
-    init?: MouseEventInit,
-    options?: IClickOptions,
-  ) => void
+  click: click
   dblClick: (
     element: TargetElement,
     init?: MouseEventInit,
@@ -58,12 +50,8 @@ declare const userEvent: {
     init?: UploadInitArgument,
     options?: IUploadOptions,
   ) => void
-  type: <T extends ITypeOpts>(
-    element: TargetElement,
-    text: string,
-    userOpts?: T,
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-  ) => T extends {delay: number} ? Promise<void> : void
+  type: type
+  keyboard: keyboard
   tab: (userOpts?: ITabUserOptions) => void
   paste: (
     element: TargetElement,
@@ -80,18 +68,6 @@ declare const userEvent: {
 
 export default userEvent
 
-export enum specialChars {
-  arrowLeft = '{arrowleft}',
-  arrowRight = '{arrowright}',
-  arrowDown = '{arrowdown}',
-  arrowUp = '{arrowup}',
-  enter = '{enter}',
-  escape = '{esc}',
-  delete = '{del}',
-  backspace = '{backspace}',
-  home = '{home}',
-  end = '{end}',
-  selectAll = '{selectall}',
-  space = '{space}',
-  whitespace = ' ',
-}
+export {keyboardOptions, keyboardKey, specialCharMap as specialChars}
+export {typeOptions, typeOptions as ITypeOpts}
+export {clickOptions, clickOptions as IClickOptions}
diff --git a/typings/test.ts b/typings/test.ts
index 4db2aa03..cd995de6 100644
--- a/typings/test.ts
+++ b/typings/test.ts
@@ -8,5 +8,4 @@ userEvent.type(element, 'foo', {delay: 1}).then(
   function handleSucces(_nothing: void) {},
   function handleError(_error: Error) {},
 )
-// @ts-expect-error No delay returns void
 userEvent.type(element, 'foo') as NotVoid

From 7cc846064a203071fb3b93e99c6d35fd0867cd3f Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 19:28:43 +0100
Subject: [PATCH 30/43] test: continue keyboard with state

---
 src/__tests__/keyboard/index.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/__tests__/keyboard/index.ts b/src/__tests__/keyboard/index.ts
index a7f2c551..23b3fe3c 100644
--- a/src/__tests__/keyboard/index.ts
+++ b/src/__tests__/keyboard/index.ts
@@ -101,3 +101,31 @@ it('error in async', async () => {
     'Expected key descriptor but found "!" in "{!"',
   )
 })
+
+it('continue typing with state', () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup('<input/>')
+  ;(element as HTMLInputElement).focus()
+  clearEventCalls()
+
+  const state = userEvent.keyboard('[ShiftRight>]')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value=""]
+
+    input[value=""] - keydown: Shift (16) {shift}
+  `)
+  clearEventCalls()
+
+  userEvent.keyboard('F[/ShiftRight]', {keyboardState: state})
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="F"]
+
+    input[value=""] - keydown: F (70) {shift}
+    input[value=""] - keypress: F (70) {shift}
+    input[value="F"] - input
+      "{CURSOR}" -> "F{CURSOR}"
+    input[value="F"] - keyup: F (70) {shift}
+    input[value="F"] - keyup: Shift (16)
+  `)
+})

From a1c78bcd636170cda84ec2f2a48ae5a4c8b8fc7c Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 19:46:08 +0100
Subject: [PATCH 31/43] fix: typings

---
 typings/index.d.ts | 8 ++++----
 typings/test.ts    | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/typings/index.d.ts b/typings/index.d.ts
index 346dae40..4c032c7c 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -13,7 +13,7 @@ export interface ITabUserOptions {
   focusTrap?: Document | Element
 }
 
-export type TargetElement = Element | Window
+export type TargetElement = Element
 
 export type FilesArgument = File | File[]
 
@@ -28,7 +28,7 @@ export interface IUploadOptions {
 
 declare const userEvent: {
   clear: (element: TargetElement) => void
-  click: click
+  click: typeof click
   dblClick: (
     element: TargetElement,
     init?: MouseEventInit,
@@ -50,8 +50,8 @@ declare const userEvent: {
     init?: UploadInitArgument,
     options?: IUploadOptions,
   ) => void
-  type: type
-  keyboard: keyboard
+  type: typeof type
+  keyboard: typeof keyboard
   tab: (userOpts?: ITabUserOptions) => void
   paste: (
     element: TargetElement,
diff --git a/typings/test.ts b/typings/test.ts
index cd995de6..a0449e4d 100644
--- a/typings/test.ts
+++ b/typings/test.ts
@@ -1,11 +1,10 @@
 import userEvent, {TargetElement} from '.'
 
 declare const element: TargetElement
-type NotVoid = string | number | boolean | object | null
 
 userEvent.type(element, 'foo', {delay: 1}).then(
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
   function handleSucces(_nothing: void) {},
   function handleError(_error: Error) {},
 )
-userEvent.type(element, 'foo') as NotVoid
+userEvent.type(element, 'foo') as undefined

From 810c9a2d6f50fc1bca7b0b96e2a0b94bdc91c43e Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 19:57:29 +0100
Subject: [PATCH 32/43] test: clear expected mock calls

---
 src/__tests__/keyboard/index.ts | 50 ++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/keyboard/index.ts b/src/__tests__/keyboard/index.ts
index 23b3fe3c..a8e4770b 100644
--- a/src/__tests__/keyboard/index.ts
+++ b/src/__tests__/keyboard/index.ts
@@ -78,28 +78,34 @@ it('type asynchronous', async () => {
   `)
 })
 
-it('error in sync', async () => {
-  const err = jest.spyOn(console, 'error')
-  err.mockImplementation(() => {})
-
-  userEvent.keyboard('{!')
-
-  // the catch will be asynchronous
-  await Promise.resolve()
-
-  expect(err).toHaveBeenCalledWith(expect.any(Error))
-  expect(err.mock.calls[0][0]).toHaveProperty(
-    'message',
-    'Expected key descriptor but found "!" in "{!"',
-  )
-})
-
-it('error in async', async () => {
-  const promise = userEvent.keyboard('{!', {delay: 1})
-
-  return expect(promise).rejects.toThrowError(
-    'Expected key descriptor but found "!" in "{!"',
-  )
+describe('error', () => {
+  afterEach(() => {
+    ;(console.error as jest.MockedFunction<typeof console.error>).mockClear()
+  })
+
+  it('error in sync', async () => {
+    const err = jest.spyOn(console, 'error')
+    err.mockImplementation(() => {})
+
+    userEvent.keyboard('{!')
+
+    // the catch will be asynchronous
+    await Promise.resolve()
+
+    expect(err).toHaveBeenCalledWith(expect.any(Error))
+    expect(err.mock.calls[0][0]).toHaveProperty(
+      'message',
+      'Expected key descriptor but found "!" in "{!"',
+    )
+  })
+
+  it('error in async', async () => {
+    const promise = userEvent.keyboard('{!', {delay: 1})
+
+    return expect(promise).rejects.toThrowError(
+      'Expected key descriptor but found "!" in "{!"',
+    )
+  })
 })
 
 it('continue typing with state', () => {

From b8a78c8f9dc9d19b0ef57ffdeef8e4af8d62f3a8 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 20:32:19 +0100
Subject: [PATCH 33/43] chore: clean up config

---
 tsconfig.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 93f39daa..e02acdcd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "./node_modules/kcd-scripts/shared-tsconfig.json",
   "compilerOptions": {
-    "allowJs": true,
-    "esModuleInterop": true
+    "allowJs": true
   },
   "include": ["./src", "./typings"]
 }

From ab8461d04c442cbdcaf4ac7d76851877c7347f51 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 21:57:32 +0100
Subject: [PATCH 34/43] docs: add userEvent.keyboard

---
 README.md | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 72 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 3abeee53..7e2b11f8 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,8 @@ change the state of the checkbox.
   - [`click(element, eventInit, options)`](#clickelement-eventinit-options)
   - [`dblClick(element, eventInit, options)`](#dblclickelement-eventinit-options)
   - [`type(element, text, [options])`](#typeelement-text-options)
-  - [`upload(element, file, [{ clickInit, changeInit }])`](#uploadelement-file--clickinit-changeinit-)
+  - [`keyboard(text, options)`](#keyboardtext-options)
+  - [`upload(element, file, [{ clickInit, changeInit }], [options])`](#uploadelement-file--clickinit-changeinit--options)
   - [`clear(element)`](#clearelement)
   - [`selectOptions(element, values)`](#selectoptionselement-values)
   - [`deselectOptions(element, values)`](#deselectoptionselement-values)
@@ -178,10 +179,6 @@ are typed. By default it's 0. You can use this option if your component has a
 different behavior for fast or slow users. If you do this, you need to make sure
 to `await`!
 
-> To be clear, `userEvent.type` _always_ returns a promise, but you _only_ need
-> to `await` the promise it returns if you're using the `delay` option.
-> Otherwise everything runs synchronously and you can ignore the promise.
-
 `type` will click the element before typing. To disable this, set the
 `skipClick` option to `true`.
 
@@ -271,6 +268,76 @@ test('types into the input', () => {
 })
 ```
 
+### `keyboard(text, options)`
+
+Simulates the keyboard events described by `text`. This is similar to
+`userEvent.type()` but without any clicking or changing the selection range.
+
+> You should use `userEvent.keyboard` if you want to just simulate pressing
+> buttons on the keyboard. You should use `userEvent.type` if you just want to
+> conveniently insert some text into an input field or textarea.
+
+Keystrokes can be described:
+
+- Per printable character
+  ```js
+  userEvent.keyboard('foo') // translates to: f, o, o
+  ```
+  The brackets `{` and `[` are used as special character and can be referenced
+  by doubling them.
+  ```js
+  userEvent.keyboard('{{a[[') // translates to: {, a, [
+  ```
+- Per
+  [KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
+  (only supports alphanumeric values of `key`)
+  ```js
+  userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+  ```
+  This does not keep any key pressed. So `Shift` will be lifted before pressing
+  `f`.
+- Per
+  [KeyboardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
+  ```js
+  userEvent.keyboard('[ShiftLeft]{f}{o}{o}') // translates to: Shift, f, o, o
+  ```
+- Per legacy `userEvent.type` modifier/specialChar The modifiers like `{shift}`
+  (note the lowercase) will automatically be kept pressed, just like before. You
+  can cancel this behavior by adding a `/` to the end of the descriptor.
+  ```js
+  userEvent.keyboard('{shift}{ctrl/}a{shift}') // translates to: Shift(down), Control(down+up), a, Shift(up)
+  ```
+
+Keys can be kept pressed by adding a `>` to the end of the descriptor - and
+lifted by adding a `/` to the beginning of the descriptor:
+
+```js
+userEvent.keyboard('{Shift>}A{/Shift}') // translates to: Shift(down), A, Shift(up)
+```
+
+`userEvent.keyboard` returns a keyboard state that can be used to continue
+keyboard operations.
+
+```js
+const keyboardState = userEvent.keyboard('[ControlLeft>]') // keydown [ControlLeft]
+// ... inspect some changes ...
+userEvent.keyboard('a', {keyboardState}) // press [KeyA] with active ctrlKey modifier
+```
+
+The mapping of `key` to `code` is performed by a
+[default key map](https://github.com/testing-library/user-event/blob/master/src/keyboard/keyMap.ts)
+portraying a "default" US-keyboard. You can provide your own local keyboard
+mapping per option.
+
+```js
+userEvent.keyboard('?', {keyboardMap: myOwnLocaleKeyboardMap})
+```
+
+> Future versions might try to interpolate the modifiers needed to reach a
+> printable key on the keyboard. E.g. Automatically pressing `{Shift}` when
+> CapsLock is not active and `A` is referenced. If you don't wish this behavior,
+> you can pass `autoModify: false` when using `userEvent.keyboard` in your code.
+
 ### `upload(element, file, [{ clickInit, changeInit }], [options])`
 
 Uploads file to an `<input>`. For uploading multiple files use `<input>` with

From c5286454f1c2d04cfa801ec20594e08274a0a471 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Sat, 13 Mar 2021 22:02:37 +0100
Subject: [PATCH 35/43] docs: KeyboardEvent.code

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7e2b11f8..dc8c9e98 100644
--- a/README.md
+++ b/README.md
@@ -299,7 +299,7 @@ Keystrokes can be described:
 - Per
   [KeyboardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
   ```js
-  userEvent.keyboard('[ShiftLeft]{f}{o}{o}') // translates to: Shift, f, o, o
+  userEvent.keyboard('[ShiftLeft][KeyF][KeyO][KeyO]') // translates to: Shift, f, o, o
   ```
 - Per legacy `userEvent.type` modifier/specialChar The modifiers like `{shift}`
   (note the lowercase) will automatically be kept pressed, just like before. You

From 39b1d08dfa978f7ae1f21b084f4966c6e94e1c70 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 13:26:48 +0100
Subject: [PATCH 36/43] fix: relative import

---
 src/keyboard/plugins/functional/calculateBackspaceValue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keyboard/plugins/functional/calculateBackspaceValue.ts b/src/keyboard/plugins/functional/calculateBackspaceValue.ts
index 27a10fb6..4e544f61 100644
--- a/src/keyboard/plugins/functional/calculateBackspaceValue.ts
+++ b/src/keyboard/plugins/functional/calculateBackspaceValue.ts
@@ -1,4 +1,4 @@
-import {getSelectionRange, getValue} from 'utils'
+import {getSelectionRange, getValue} from '../../../utils'
 
 // yes, calculateNewBackspaceValue and calculateNewValue look extremely similar
 // and you may be tempted to create a shared abstraction.

From 3d76f0ffbbef30a173c45c37eb57456b0f825900 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 17:02:12 +0100
Subject: [PATCH 37/43] docs: closing modifier

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dc8c9e98..751c6418 100644
--- a/README.md
+++ b/README.md
@@ -305,7 +305,7 @@ Keystrokes can be described:
   (note the lowercase) will automatically be kept pressed, just like before. You
   can cancel this behavior by adding a `/` to the end of the descriptor.
   ```js
-  userEvent.keyboard('{shift}{ctrl/}a{shift}') // translates to: Shift(down), Control(down+up), a, Shift(up)
+  userEvent.keyboard('{shift}{ctrl/}a{/shift}') // translates to: Shift(down), Control(down+up), a, Shift(up)
   ```
 
 Keys can be kept pressed by adding a `>` to the end of the descriptor - and

From 3fae3bc948e22858da46dd06141c563841113a12 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 17:16:31 +0100
Subject: [PATCH 38/43] fix: annotate deprecated keyCode property

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 src/keyboard/getEventProps.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/keyboard/getEventProps.ts b/src/keyboard/getEventProps.ts
index 3a001caa..a530c8dd 100644
--- a/src/keyboard/getEventProps.ts
+++ b/src/keyboard/getEventProps.ts
@@ -9,7 +9,7 @@ export function getKeyEventProps(keyDef: keyboardKey, state: keyboardState) {
     metaKey: state.modifiers.meta,
     shiftKey: state.modifiers.shift,
 
-    // deprecated
+    /** @deprecated use code instead */
     keyCode:
       keyDef.keyCode ??
       // istanbul ignore next

From 781e0d6bd07209e66a4fca5d9b833ef90ebe6408 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 17:19:37 +0100
Subject: [PATCH 39/43] refactor: remove TODO

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 src/type/typeImplementation.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 5811b752..40f0e2fb 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -1,4 +1,3 @@
-// TODO: wrap in asyncWrapper
 import {
   setSelectionRangeIfNecessary,
   getSelectionRange,

From b4090626b5c38ceda7bb1b93f113574f4b1d91fc Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 17:53:58 +0100
Subject: [PATCH 40/43] refactor: use jest-in-case

---
 package.json                            |   2 +
 src/__tests__/keyboard/getNextKeyDef.ts | 192 ++++++++----------------
 2 files changed, 68 insertions(+), 126 deletions(-)

diff --git a/package.json b/package.json
index 766de19f..9e4ee802 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,9 @@
     "@testing-library/dom": "^7.28.1",
     "@testing-library/jest-dom": "^5.11.6",
     "@types/estree": "0.0.45",
+    "@types/jest-in-case": "^1.0.3",
     "is-ci": "^2.0.0",
+    "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",
     "kcd-scripts": "^7.5.1",
     "typescript": "^4.1.2"
diff --git a/src/__tests__/keyboard/getNextKeyDef.ts b/src/__tests__/keyboard/getNextKeyDef.ts
index 892767d6..fc6344f7 100644
--- a/src/__tests__/keyboard/getNextKeyDef.ts
+++ b/src/__tests__/keyboard/getNextKeyDef.ts
@@ -1,3 +1,4 @@
+import cases from 'jest-in-case'
 import {getNextKeyDef} from 'keyboard/getNextKeyDef'
 import {defaultKeyMap} from 'keyboard/keyMap'
 import {keyboardKey, keyboardOptions} from 'keyboard/types'
@@ -9,130 +10,69 @@ const options: keyboardOptions = {
   delay: 123,
 }
 
-test('reference key per code', () => {
-  expect(getNextKeyDef('[ControlLeft]foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'Control',
-        code: 'ControlLeft',
-      }) as keyboardKey,
-    }),
-  )
-  expect(getNextKeyDef('[Foo]foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'Unknown',
-        code: 'Foo',
-      }) as keyboardKey,
-    }),
-  )
-})
+cases(
+  'reference key per',
+  ({text, key, code}) => {
+    expect(getNextKeyDef(`${text}foo`, options)).toEqual(
+      expect.objectContaining({
+        keyDef: expect.objectContaining({
+          key,
+          code,
+        }) as keyboardKey,
+      }),
+    )
+  },
+  {
+    code: {text: '[ControlLeft]', key: 'Control', code: 'ControlLeft'},
+    'unimplemented code': {text: '[Foo]', key: 'Unknown', code: 'Foo'},
+    key: {text: '{Control}', key: 'Control', code: 'ControlLeft'},
+    'unimplemented key': {text: '{Foo}', key: 'Foo', code: 'Unknown'},
+    'legacy modifier': {text: '{ctrl}', key: 'Control', code: 'ControlLeft'},
+    'printable character': {text: 'a', key: 'a', code: 'KeyA'},
+    '{ as printable': {text: '{{', key: '{', code: 'Unknown'},
+    '[ as printable': {text: '[[', key: '[', code: 'Unknown'},
+  },
+)
 
-test('reference key per key', () => {
-  expect(getNextKeyDef('{Control}foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'Control',
-        code: 'ControlLeft',
-      }) as keyboardKey,
-    }),
-  )
-  expect(getNextKeyDef('{Foo}foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'Foo',
-        code: 'Unknown',
-      }) as keyboardKey,
-    }),
-  )
-})
-
-test('reference per legacy modifier', () => {
-  expect(getNextKeyDef('{ctrl}foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'Control',
-        code: 'ControlLeft',
-      }) as keyboardKey,
-    }),
-  )
-})
-
-test('reference per printable character', () => {
-  expect(getNextKeyDef('afoo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: 'a',
-        code: 'KeyA',
-      }) as keyboardKey,
-    }),
-  )
-})
-
-test('reference bracket as printable character', () => {
-  expect(getNextKeyDef('{{foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: '{',
-        code: 'Unknown',
-      }) as keyboardKey,
-    }),
-  )
-  expect(getNextKeyDef('[[foo', options)).toEqual(
-    expect.objectContaining({
-      keyDef: expect.objectContaining({
-        key: '[',
-        code: 'Unknown',
-      }) as keyboardKey,
-    }),
-  )
-})
-
-test('release previously pressed key', () => {
-  expect(getNextKeyDef('{Control}foo', options)).toEqual(
-    expect.objectContaining({
-      releasePrevious: false,
-    }),
-  )
-  expect(getNextKeyDef('{/Control}foo', options)).toEqual(
-    expect.objectContaining({
-      releasePrevious: true,
-    }),
-  )
-  expect(getNextKeyDef('[/ControlLeft]foo', options)).toEqual(
-    expect.objectContaining({
-      releasePrevious: true,
-    }),
-  )
-})
-
-test('keep key pressed', () => {
-  expect(getNextKeyDef('{Control}foo', options)).toEqual(
-    expect.objectContaining({
-      releaseSelf: true,
-    }),
-  )
-  expect(getNextKeyDef('{Control>}foo', options)).toEqual(
-    expect.objectContaining({
-      releaseSelf: false,
-    }),
-  )
-  expect(getNextKeyDef('[ControlLeft>]foo', options)).toEqual(
-    expect.objectContaining({
-      releaseSelf: false,
-    }),
-  )
-})
-
-test('autopress legacy modifiers', () => {
-  expect(getNextKeyDef('{ctrl}foo', options)).toEqual(
-    expect.objectContaining({
-      releaseSelf: false,
-    }),
-  )
-  expect(getNextKeyDef('{ctrl/}foo', options)).toEqual(
-    expect.objectContaining({
-      releaseSelf: true,
-    }),
-  )
-})
+cases(
+  'modifiers',
+  ({text, modifiers}) => {
+    expect(getNextKeyDef(`${text}foo`, options)).toEqual(
+      expect.objectContaining(modifiers),
+    )
+  },
+  {
+    'no releasePrevious': {
+      text: '{Control}',
+      modifiers: {releasePrevious: false},
+    },
+    'releasePrevious per key': {
+      text: '{/Control}',
+      modifiers: {releasePrevious: true},
+    },
+    'releasePrevious per code': {
+      text: '[/ControlLeft]',
+      modifiers: {releasePrevious: true},
+    },
+    'default releaseSelf': {
+      text: '{Control}',
+      modifiers: {releaseSelf: true},
+    },
+    'keep key pressed per key': {
+      text: '{Control>}',
+      modifiers: {releaseSelf: false},
+    },
+    'keep key pressed per code': {
+      text: '[Control>]',
+      modifiers: {releaseSelf: false},
+    },
+    'no releaseSelf on legacy modifier': {
+      text: '{ctrl}',
+      modifiers: {releaseSelf: false},
+    },
+    'release legacy modifier': {
+      text: '{ctrl/}',
+      modifiers: {releaseSelf: true},
+    },
+  },
+)

From 64ffb173f3366d1fa8a13ab666fe017c0be12571 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 18:05:44 +0100
Subject: [PATCH 41/43] fix: remove obsolete delay

---
 src/__tests__/type.js          | 2 +-
 src/type/typeImplementation.ts | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index ce1549a2..7cc35808 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -246,7 +246,7 @@ test('should delay the typing when opts.delay is not 0', async () => {
   await userEvent.type(element, text, {delay})
 
   expect(onInput).toHaveBeenCalledTimes(text.length)
-  for (let index = 1; index < inputValues.length; index++) {
+  for (let index = 2; index < inputValues.length; index++) {
     const {timestamp, value} = inputValues[index]
     expect(timestamp - inputValues[index - 1].timestamp).toBeGreaterThanOrEqual(
       delay,
diff --git a/src/type/typeImplementation.ts b/src/type/typeImplementation.ts
index 40f0e2fb..864e8d71 100644
--- a/src/type/typeImplementation.ts
+++ b/src/type/typeImplementation.ts
@@ -4,7 +4,6 @@ import {
   getValue,
   isContentEditable,
   getActiveElement,
-  wait,
 } from '../utils'
 import {click} from '../click'
 import {keyboardImplementationWrapper} from '../keyboard'
@@ -67,12 +66,6 @@ export async function typeImplementation(
     )
   }
 
-  // previous implementation did wait before the first character
-  // this probably can be removed
-  if (delay > 0) {
-    await wait(delay)
-  }
-
   const {promise, releaseAllKeys} = keyboardImplementationWrapper(text, {
     delay,
     document: element.ownerDocument,

From db00fe14b38adf8d9025bfab7ecf55b6beb0de65 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 18:26:16 +0100
Subject: [PATCH 42/43] chore: disable
 @typescript-eslint/non-nullable-type-assertion-style

The fix collides with no-non-null-assertion
---
 .eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index df4cb262..b9e85808 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,5 +9,6 @@ module.exports = {
   },
   rules: {
     'testing-library/no-dom-import': 0,
+    '@typescript-eslint/non-nullable-type-assertion-style': 0,
   },
 }

From f6c533ed760e21d35904ce324fb10184dae88352 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Tue, 16 Mar 2021 18:31:23 +0100
Subject: [PATCH 43/43] chore: lint fix

---
 src/utils/click/getMouseEventOptions.ts | 4 ++--
 typings/index.d.ts                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/utils/click/getMouseEventOptions.ts b/src/utils/click/getMouseEventOptions.ts
index 6569c9e3..d798a151 100644
--- a/src/utils/click/getMouseEventOptions.ts
+++ b/src/utils/click/getMouseEventOptions.ts
@@ -22,7 +22,7 @@ const BUTTON_NAMES = {
   secondary: 2,
 } as const
 
-function translateButtonNumber(value: number, from: 'buttons' | 'button') {
+function translateButtonNumber(value: number, from: 'button' | 'buttons') {
   const [mapIn, mapOut] =
     from === 'button'
       ? [BUTTON_NAMES, BUTTONS_NAMES]
@@ -39,7 +39,7 @@ function translateButtonNumber(value: number, from: 'buttons' | 'button') {
 function convertMouseButtons(
   event: string,
   init: MouseEventInit,
-  property: 'buttons' | 'button',
+  property: 'button' | 'buttons',
 ): number {
   if (!isMousePressEvent(event)) {
     return 0
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 4c032c7c..3d4ae385 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -36,12 +36,12 @@ declare const userEvent: {
   ) => void
   selectOptions: (
     element: TargetElement,
-    values: string | string[] | HTMLElement | HTMLElement[],
+    values: HTMLElement | HTMLElement[] | string[] | string,
     init?: MouseEventInit,
   ) => void
   deselectOptions: (
     element: TargetElement,
-    values: string | string[] | HTMLElement | HTMLElement[],
+    values: HTMLElement | HTMLElement[] | string[] | string,
     init?: MouseEventInit,
   ) => void
   upload: (