fix(tab): make the events more correct

Author: kentcdodds

src/user-event/__tests__/tab.js

@@ -1,5 +1,85 @@
 import {userEvent} from '../../'
-import {setup} from './helpers/utils'
+import {setup, addListeners} from './helpers/utils'
+
+test('fires events when tabbing between two elements', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(
+    `<div><input id="a" /><input id="b" /></div>`,
+  )
+  const a = element.children[0]
+  const b = element.children[1]
+  await userEvent.focus(a)
+  clearEventCalls()
+
+  const aListeners = addListeners(a)
+  const bListeners = addListeners(b)
+
+  await userEvent.tab()
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: div
+    
+    input#a[value=""] - keydown: Tab (9)
+    input#a[value=""] - focusout
+    input#b[value=""] - focusin
+    input#b[value=""] - keyup: Tab (9)
+  `)
+  // blur/focus do not bubble
+  expect(aListeners.eventWasFired('blur')).toBe(true)
+  expect(bListeners.eventWasFired('focus')).toBe(true)
+})
+
+test('does not change focus if default prevented on keydown', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(
+    `<div><input id="a" /><input id="b" /></div>`,
+  )
+  const a = element.children[0]
+  const b = element.children[1]
+  await userEvent.focus(a)
+  clearEventCalls()
+
+  const aListeners = addListeners(a, {
+    eventHandlers: {keyDown: e => e.preventDefault()},
+  })
+  const bListeners = addListeners(b)
+
+  await userEvent.tab()
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: div
+    
+    input#a[value=""] - keydown: Tab (9)
+    input#a[value=""] - keyup: Tab (9)
+  `)
+  // blur/focus do not bubble
+  expect(aListeners.eventWasFired('blur')).toBe(false)
+  expect(bListeners.eventWasFired('focus')).toBe(false)
+})
+
+test('fires correct events with shift key', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(
+    `<div><input id="a" /><input id="b" /></div>`,
+  )
+  const a = element.children[0]
+  const b = element.children[1]
+  await userEvent.focus(b)
+  clearEventCalls()
+
+  const aListeners = addListeners(a)
+  const bListeners = addListeners(b)
+
+  await userEvent.tab({shift: true})
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: div
+
+    input#b[value=""] - keydown: Shift (16) {shift}
+    input#b[value=""] - keydown: Tab (9) {shift}
+    input#b[value=""] - focusout
+    input#a[value=""] - focusin
+    input#a[value=""] - keyup: Tab (9) {shift}
+    input#a[value=""] - keyup: Shift (16)
+  `)
+  // blur/focus do not bubble
+  expect(aListeners.eventWasFired('focus')).toBe(true)
+  expect(bListeners.eventWasFired('blur')).toBe(true)
+})
 
 test('should cycle elements in document tab order', async () => {
   setup(`

src/user-event/tab.js

@@ -1,11 +1,14 @@
 import {wrapAsync} from '../wrap-async'
-import {tick} from './tick'
-import {FOCUSABLE_SELECTOR} from './utils'
+import {fireEvent, getActiveElement, FOCUSABLE_SELECTOR} from './utils'
+import {focus} from './focus'
+import {blur} from './blur'
 
-async function tab({shift = false, focusTrap = document} = {}) {
-  // everything in user-event must be actually async, but since we're not
-  // calling fireEvent in here, we'll add this tick here...
-  await tick()
+async function tab({shift = false, focusTrap} = {}) {
+  const previousElement = getActiveElement(focusTrap?.ownerDocument ?? document)
+
+  if (!focusTrap) {
+    focusTrap = document
+  }
 
   const focusableElements = focusTrap.querySelectorAll(FOCUSABLE_SELECTOR)
 
@@ -57,16 +60,60 @@ async function tab({shift = false, focusTrap = document} = {}) {
   const nextIndex = shift ? index - 1 : index + 1
   const defaultIndex = shift ? prunedElements.length - 1 : 0
 
-  const next = prunedElements[nextIndex] || prunedElements[defaultIndex]
+  const nextElement = prunedElements[nextIndex] || prunedElements[defaultIndex]
+
+  const shiftKeyInit = {
+    key: 'Shift',
+    keyCode: 16,
+    shiftKey: true,
+  }
+  const tabKeyInit = {
+    key: 'Tab',
+    keyCode: 9,
+    shiftKey: shift,
+  }
+
+  let continueToTab = true
+
+  // not sure how to make it so there's no previous element...
+  // istanbul ignore else
+  if (previousElement) {
+    // preventDefault on the shift key makes no difference
+    if (shift) await fireEvent.keyDown(previousElement, {...shiftKeyInit})
+    continueToTab = await fireEvent.keyDown(previousElement, {...tabKeyInit})
+    if (continueToTab) {
+      await blur(previousElement)
+    }
+  }
+
+  const keyUpTarget =
+    !continueToTab && previousElement ? previousElement : nextElement
+
+  if (continueToTab) {
+    const hasTabIndex = nextElement.getAttribute('tabindex') !== null
+    if (!hasTabIndex) {
+      nextElement.setAttribute('tabindex', '0') // jsdom requires tabIndex=0 for an item to become 'document.activeElement'
+    }
 
-  if (next.getAttribute('tabindex') === null) {
-    next.setAttribute('tabindex', '0') // jsdom requires tabIndex=0 for an item to become 'document.activeElement'
-    next.focus()
-    next.removeAttribute('tabindex') // leave no trace. :)
-  } else {
-    next.focus()
+    await focus(nextElement)
+
+    if (!hasTabIndex) {
+      nextElement.removeAttribute('tabindex') // leave no trace. :)
+    }
+  }
+
+  await fireEvent.keyUp(keyUpTarget, {...tabKeyInit})
+
+  if (shift) {
+    await fireEvent.keyUp(keyUpTarget, {...shiftKeyInit, shiftKey: false})
   }
 }
 tab = wrapAsync(tab)
 
 export {tab}
+
+/*
+eslint
+  complexity: "off",
+  max-statements: "off",
+*/

src/user-event/utils.js

@@ -125,7 +125,7 @@ const FOCUSABLE_SELECTOR = [
 function isFocusable(element) {
   return (
     !isLabelWithInternallyDisabledControl(element) &&
-    element.matches(FOCUSABLE_SELECTOR)
+    element?.matches(FOCUSABLE_SELECTOR)
   )
 }