diff --git a/README.md b/README.md
index f9273c8ec..c6855298c 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,12 @@ has been around for a while. It established a successful pattern for making
 components accessible and functional while giving developers complete freedom
 when building the UI.
 
+Both _useSelect_ and _useCombobox_ support he latest ARIA combobox patterns for
+W3C, which _Downshift_ does not. Consequently, we strongly recommend the you use
+the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the
+version 7 of _downshift_. There is a [Migration Guide][migration-guide-v7] that
+documents the changes introduced in version 7.
+
 The `README` on this page covers only the component while each hook has its own
 `README` page. You can navigate to the [hooks page][hooks-readme] or go directly
 to the hook you need by using the links in the list above.
@@ -1499,3 +1505,5 @@ MIT
   https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js
 [code-sandbox-no-get-root-props]:
   https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/01-basic-autocomplete.js
+[migration-guide-v7]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md
diff --git a/cypress/e2e/combobox.cy.js b/cypress/e2e/combobox.cy.js
index 3e20cb657..488036b4e 100644
--- a/cypress/e2e/combobox.cy.js
+++ b/cypress/e2e/combobox.cy.js
@@ -22,7 +22,7 @@ describe('combobox', () => {
   it('can arrow up to select last item', () => {
     cy.findByTestId('combobox-input')
       .type('{uparrow}{enter}') // open menu, last option is focused
-      .should('have.value', 'Purple')
+      .should('have.value', 'Skyblue')
   })
 
   it('can arrow down to select first item', () => {
@@ -46,7 +46,7 @@ describe('combobox', () => {
   it('can use end arrow to select last item', () => {
     cy.findByTestId('combobox-input')
       .type('{downarrow}{end}{enter}') // open to first, go to last by end.
-      .should('have.value', 'Purple')
+      .should('have.value', 'Skyblue')
   })
 
   it('resets the item on blur', () => {
diff --git a/cypress/e2e/useMultipleCombobox.cy.js b/cypress/e2e/useMultipleCombobox.cy.js
new file mode 100644
index 000000000..20fec955b
--- /dev/null
+++ b/cypress/e2e/useMultipleCombobox.cy.js
@@ -0,0 +1,16 @@
+describe('useMultipleCombobox', () => {
+  before(() => {
+    cy.visit('/useMultipleCombobox')
+  })
+
+  it('can select multiple items', () => {
+    cy.findByRole('button', {name: 'toggle menu'}).click()
+    cy.findByRole('option', {name: 'Green'}).click()
+    cy.findByRole('option', {name: 'Gray'}).click()
+    cy.findByRole('button', {name: 'toggle menu'}).click()
+    cy.findByText('Black').should('be.visible')
+    cy.findByText('Red').should('be.visible')
+    cy.findByText('Green').should('be.visible')
+    cy.findByText('Gray').should('be.visible')
+  })
+})
diff --git a/cypress/e2e/useMultipleSelect.cy.js b/cypress/e2e/useMultipleSelect.cy.js
new file mode 100644
index 000000000..26b6dd102
--- /dev/null
+++ b/cypress/e2e/useMultipleSelect.cy.js
@@ -0,0 +1,16 @@
+describe('useMultipleSelect', () => {
+  before(() => {
+    cy.visit('/useMultipleSelect')
+  })
+
+  it('can select multiple options', () => {
+    cy.findByRole('combobox').click()
+    cy.findByRole('option', {name: 'Green'}).click()
+    cy.findByRole('option', {name: 'Gray'}).click()
+    cy.findByRole('combobox').click()
+    cy.findByText('Black').should('be.visible')
+    cy.findByText('Red').should('be.visible')
+    cy.findByText('Green').should('be.visible')
+    cy.findByText('Gray').should('be.visible')
+  })
+})
diff --git a/cypress/e2e/useSelect.cy.js b/cypress/e2e/useSelect.cy.js
index 786b70ef6..ca84646d2 100644
--- a/cypress/e2e/useSelect.cy.js
+++ b/cypress/e2e/useSelect.cy.js
@@ -4,15 +4,15 @@ describe('useSelect', () => {
   })
 
   it('can open and close a menu', () => {
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length.above', 0)
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length', 0)
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length.above', 0)
diff --git a/docusaurus/pages/combobox.js b/docusaurus/pages/combobox.js
index 4a096be04..cc2c84c6c 100644
--- a/docusaurus/pages/combobox.js
+++ b/docusaurus/pages/combobox.js
@@ -1,10 +1,9 @@
 import * as React from 'react'
 
 import Downshift from '../../src'
+import {colors} from '../utils'
 
 export default function ComboBox() {
-  const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
-
   return (
     <Downshift>
       {({
@@ -73,10 +72,10 @@ export default function ComboBox() {
           >
             {isOpen &&
               (inputValue
-                ? items.filter(i =>
+                ? colors.filter(i =>
                     i.toLowerCase().includes(inputValue.toLowerCase()),
                   )
-                : items
+                : colors
               ).map((item, index) => (
                 <li
                   style={{
diff --git a/docusaurus/pages/useCombobox.js b/docusaurus/pages/useCombobox.js
index 72db6e50e..eaa3ddddc 100644
--- a/docusaurus/pages/useCombobox.js
+++ b/docusaurus/pages/useCombobox.js
@@ -1,27 +1,25 @@
 import React, {useState} from 'react'
 
 import {useCombobox} from '../../src'
-
-const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
+import {colors} from '../utils'
 
 export default function DropdownCombobox() {
-  const [inputItems, setInputItems] = useState(items)
+  const [inputItems, setInputItems] = useState(colors)
   const {
     isOpen,
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     highlightedIndex,
     getItemProps,
     selectedItem,
-    clearSelection,
+    selectItem,
   } = useCombobox({
     items: inputItems,
     onInputValueChange: ({inputValue}) => {
       setInputItems(
-        items.filter(item =>
+        colors.filter(item =>
           item.toLowerCase().startsWith(inputValue.toLowerCase()),
         ),
       )
@@ -47,7 +45,7 @@ export default function DropdownCombobox() {
       >
         Choose an element:
       </label>
-      <div {...getComboboxProps()}>
+      <div>
         <input
           style={{padding: '4px'}}
           {...getInputProps()}
@@ -65,7 +63,7 @@ export default function DropdownCombobox() {
           style={{padding: '4px 8px'}}
           aria-label="toggle menu"
           data-testid="clear-button"
-          onClick={clearSelection}
+          onClick={() => selectItem(null)}
         >
           &#10007;
         </button>
diff --git a/docusaurus/pages/useMultipleCombobox.js b/docusaurus/pages/useMultipleCombobox.js
index 6651ad261..adf46695d 100644
--- a/docusaurus/pages/useMultipleCombobox.js
+++ b/docusaurus/pages/useMultipleCombobox.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import {useCombobox, useMultipleSelection} from '../../src'
+import {colors} from '../utils'
 
-const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
 const initialSelectedItems = [colors[0], colors[1]]
 
 function getFilteredItems(selectedItems, inputValue) {
@@ -46,7 +46,6 @@ export default function DropdownMultipleCombobox() {
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     highlightedIndex,
     getItemProps,
     selectedItem,
@@ -150,7 +149,7 @@ export default function DropdownMultipleCombobox() {
             </span>
           )
         })}
-        <div {...getComboboxProps()}>
+        <div>
           <input
             style={{padding: '4px'}}
             {...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}
@@ -166,7 +165,7 @@ export default function DropdownMultipleCombobox() {
           </button>
           <button
             style={{padding: '4px 8px'}}
-            aria-label="toggle menu"
+            aria-label="clear selection"
             data-testid="clear-button"
             onClick={clearSelection}
           >
diff --git a/docusaurus/pages/useMultipleSelect.js b/docusaurus/pages/useMultipleSelect.js
index 5758ffbf6..6aa08d9e5 100644
--- a/docusaurus/pages/useMultipleSelect.js
+++ b/docusaurus/pages/useMultipleSelect.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 import {useSelect, useMultipleSelection} from '../../src'
+import {colors} from '../utils'
 
-const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
 const initialSelectedItems = [colors[0], colors[1]]
 
 function getFilteredItems(selectedItems) {
@@ -33,8 +33,8 @@ export default function DropdownMultipleSelect() {
     stateReducer: (state, actionAndChanges) => {
       const {changes, type} = actionAndChanges
       switch (type) {
-        case useSelect.stateChangeTypes.MenuKeyDownEnter:
-        case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
           return {
             ...changes,
@@ -46,8 +46,8 @@ export default function DropdownMultipleSelect() {
     },
     onStateChange: ({type, selectedItem: newSelectedItem}) => {
       switch (type) {
-        case useSelect.stateChangeTypes.MenuKeyDownEnter:
-        case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
           if (newSelectedItem) {
             addSelectedItem(newSelectedItem)
@@ -122,15 +122,21 @@ export default function DropdownMultipleSelect() {
               </span>
             )
           })}
-          <button
-            style={{padding: '4px'}}
+          <div
+            style={{
+              padding: '4px',
+              textAlign: 'center',
+              border: '1px solid black',
+              backgroundColor: 'lightgray',
+              cursor: 'pointer',
+            }}
             type="button"
             {...getToggleButtonProps(
               getDropdownProps({preventKeyAction: isOpen}),
             )}
           >
             Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
-          </button>
+          </div>
         </div>
       </div>
       <ul
diff --git a/docusaurus/pages/useSelect.js b/docusaurus/pages/useSelect.js
index 1795ab2b1..5a222f32c 100644
--- a/docusaurus/pages/useSelect.js
+++ b/docusaurus/pages/useSelect.js
@@ -1,8 +1,7 @@
 import React from 'react'
 
 import {useSelect} from '../../src'
-
-const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
+import {colors} from '../utils'
 
 export default function DropdownSelect() {
   const {
@@ -13,7 +12,7 @@ export default function DropdownSelect() {
     getMenuProps,
     highlightedIndex,
     getItemProps,
-  } = useSelect({items})
+  } = useSelect({items: colors})
 
   return (
     <div
@@ -35,14 +34,19 @@ export default function DropdownSelect() {
       >
         Choose an element:
       </label>
-      <button
-        data-testid="select-toggle-button"
-        style={{padding: '4px'}}
+      <div
+        style={{
+          padding: '4px',
+          textAlign: 'center',
+          border: '1px solid black',
+          backgroundColor: 'lightgray',
+          cursor: 'pointer',
+        }}
         {...getToggleButtonProps()}
       >
         {selectedItem ?? 'Elements'}
         {isOpen ? <>&#8593;</> : <>&#8595;</>}
-      </button>
+      </div>
       <ul
         {...getMenuProps()}
         style={{
@@ -53,7 +57,7 @@ export default function DropdownSelect() {
         }}
       >
         {isOpen &&
-          items.map((item, index) => (
+          colors.map((item, index) => (
             <li
               style={{
                 padding: '4px',
diff --git a/docusaurus/utils.js b/docusaurus/utils.js
new file mode 100644
index 000000000..6c6c30917
--- /dev/null
+++ b/docusaurus/utils.js
@@ -0,0 +1 @@
+export const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple', 'Pink', 'Orchid', 'Aqua', 'Lime', 'Gray', 'Brown', 'Teal', 'Skyblue']
\ No newline at end of file
diff --git a/flow-typed/npm/downshift_v2.x.x.js.flow b/flow-typed/npm/downshift_v2.x.x.js.flow
index 8b5c7f967..4345a5f88 100644
--- a/flow-typed/npm/downshift_v2.x.x.js.flow
+++ b/flow-typed/npm/downshift_v2.x.x.js.flow
@@ -45,7 +45,7 @@ declare module downshift {
     highlightedIndex: number | null;
     inputValue: string | null;
     isOpen: boolean;
-    selectedItem: Item;
+    selectedItem: Item | null;
   }
   declare export interface DownshiftProps<Item> {
     defaultSelectedItem?: Item;
@@ -209,7 +209,7 @@ declare module downshift {
     openMenu: (cb?: Callback) => void;
     closeMenu: (cb?: Callback) => void;
     toggleMenu: (otherStateToSet?: {}, cb?: Callback) => void;
-    selectItem: (item: Item, otherStateToSet?: {}, cb?: Callback) => void;
+    selectItem: (item: Item | null, otherStateToSet?: {}, cb?: Callback) => void;
     selectItemAtIndex: (
       index: number,
       otherStateToSet?: {},
diff --git a/package.json b/package.json
index 4f5579481..7bcec14af 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
   },
   "devDependencies": {
     "@babel/helpers": "^7.14.8",
-    "@cypress/webpack-preprocessor": "^5.12.2",
+    "@cypress/webpack-preprocessor": "^5.14.0",
     "@docusaurus/core": "^2.0.1",
     "@docusaurus/module-type-aliases": "^2.0.1",
     "@docusaurus/preset-classic": "^2.0.1",
@@ -88,7 +88,7 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.15",
     "@typescript-eslint/eslint-plugin": "^4.28.5",
@@ -99,7 +99,7 @@
     "buble": "^0.20.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^10.3.1",
+    "cypress": "10.8.0",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-react": "7.24.0",
diff --git a/src/hooks/MIGRATION_V7.md b/src/hooks/MIGRATION_V7.md
new file mode 100644
index 000000000..cb683b665
--- /dev/null
+++ b/src/hooks/MIGRATION_V7.md
@@ -0,0 +1,281 @@
+# Migration from v6 to v7
+
+Since version _7.0.0_ Downshift follows the (ARIA 1.2 guideline for the
+combobox)[select-aria]. This brought a series of changes that are considered
+breaking, both to the API and the behaviour of downshift's _useSelect_ and
+_useCombobox_ hooks. The list of changes, as well as the migration itself, is
+detailed below.
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [useSelect](#useselect)
+  - [Focus](#focus)
+  - [HTML Attributes](#html-attributes)
+  - [Events](#events)
+  - [stateChangeTypes](#statechangetypes)
+  - [circularNavigation](#circularnavigation)
+- [useCombobox](#usecombobox)
+  - [HTML Attributes](#html-attributes-1)
+  - [Events](#events-1)
+  - [stateChangeTypes](#statechangetypes-1)
+  - [circularNavigation](#circularnavigation-1)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## useSelect
+
+### Focus
+
+Since ARIA 1.2, focus stays on the trigger element at all times.
+(Previously)[deprecated-select-aria], it toggled between the trigger and the
+menu depending on the open state of the _select_ element. If any of your custom
+implementation involved the focus on the menu element, please change it as the
+focus stays on the trigger even when the menu is open.
+
+### HTML Attributes
+
+Similar to 1.1, _useSelect_ communicates to the screen reader the currently
+highlighted item via the _aria-activedescendant_ attribute. However, since now
+the focus is always on the trigger element, this attribute, along with others,
+have shifted as shown below:
+
+- getToggleButtonProps additions:
+  - role=combobox
+  - aria-activedescendant=${highlightedItemId}
+  - aria-controls=${menuId}
+  - tabindex=0
+- getMenuProps removals:
+  - aria-activedescendant=${highlightedItemId}
+- getItemProps changes:
+  - aria-selected=${item === selectedItem} - now the item that is selected
+    received _aria-selected=true_, the rest receive it as false. Previously, the
+    highlighted item was marked with _aria-selected=true_.
+
+### Events
+
+Event changes occured because of the focus shift, as well as new accessibility
+pattern recommendantions.
+
+- getToggleButtonProps additions:
+
+  - _ArrowDown+Alt_: opens the menu without any item highlighted.
+  - _ArrowUp+Alt_: closes the menu and selects the highlighted item.
+  - _End_: highlights the last item and opens the menu if closed.
+  - _Home_: highlights the first item and opens the menu if closed.
+  - _PageUp_: if menu is open, moves highlight by 10 positions to the start.
+  - _PageDown_: if menu is open, moves highlight by 10 positions to the end.
+  - _${characterKey}_: always opens the menu if closed, highlights the item
+    starting with that key (same behaviour as before when the menu is opened).
+  - _Enter_: if menu is open, closes the menu and selects the highlighted item.
+  - _SpaceBar_: if menu is open, closes the menu and selects the highlighted
+    item. If the space is part of a search query, it will be added to the search
+    query instead.
+  - _Escape_: closes the menu if open, without selecting anything.
+  - _Tab_ or any other _Blur_: closes the menu if open, selects highlighted
+    item, focus moves naturally.
+  - _ArrowUp_: moves highlight one position up. _Shift_ modifier is not
+    supported anymore.
+  - _ArrowDown_: moves highlight one position down. _Shift_ modifier is not
+    supported anymore.
+
+- getToggleButtonProps changes:
+
+  - _ArrowUp_: if there is an item selected, opens the menu with that item
+    highlighted, not with the -1 offset as it did in v6 (ARIA 1.1).
+  - _ArrowDown_: if there is an item selected, opens the menu with that item
+    highlighted, not with the +1 offset as it did in v6 (ARIA 1.1).
+
+- getMenuProps removals:
+  - _ArrowUp_, _ArrowDown_, _End_, _Home_, _Enter_, _Escape_, _SpaceBar_, _Tab_.
+
+### stateChangeTypes
+
+As a consequence of the [event changes](#events), the _stateChangeTypes_
+received in the _stateReducer_ and _on${statePropery}Change_ received the
+following modifications:
+
+- MenuKeyDownArrowDown -> ToggleButtonKeyDownArrowDown
+- MenuKeyDownArrowUp -> ToggleButtonKeyDownArrowUp
+- MenuKeyDownEscape -> ToggleButtonKeyDownEscape
+- MenuKeyDownHome -> ToggleButtonKeyDownHome
+- MenuKeyDownEnd -> ToggleButtonKeyDownEnd
+- MenuKeyDownEnter -> ToggleButtonKeyDownEnter
+- MenuKeyDownSpaceButton -> ToggleButtonKeyDownSpaceButton
+- MenuKeyDownCharacter -> ToggleButtonKeyDownCharacter
+- MenuBlur -> ToggleButtonBlur
+- ToggleButtonKeyDownPageUp: new state change type.
+- ToggleButtonKeyDownPageDown: new state change type.
+
+Please change your reducer / onChange code accordingly. For instance:
+
+```js
+function stateReducer(state, actionAndChanges) {
+  const {changes, type} = actionAndChanges
+  switch (type) {
+    case useSelect.stateChangeTypes.MenuKeyDownEnter:
+    case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true, // keep the menu open after selection.
+      }
+    default:
+      return changes
+  }
+}
+```
+
+Becomes:
+
+```js
+function stateReducer(state, actionAndChanges) {
+  const {changes, type} = actionAndChanges
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true, // keep the menu open after selection.
+      }
+    default:
+      return changes
+  }
+}
+```
+
+### circularNavigation
+
+The prop _circularNavigation_ has been removed. Navigation inside the menu is
+standard and non-circular. If you wish to make it circular, use the
+_stateReducer_:
+
+```js
+function stateReducer(state, actionAndChanges) {
+  const {changes, type} = actionAndChanges
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
+      if (state.highlightedIndex === items.length - 1) {
+        return {...changes, highlightedIndex: state.highlightedIndex}
+      } else {
+        return changes
+      }
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
+      if (state.highlightedIndex === 0) {
+        return {...changes, highlightedIndex: state.highlightedIndex}
+      } else {
+        return changes
+      }
+    default:
+      return changes
+  }
+}
+```
+
+## useCombobox
+
+### HTML Attributes
+
+The biggest change is that the input wrapper element does not receive the
+combobox role attributes anymore. Previously[deprecated-combobox-aria], the role
+of _combobox_, as well as other HTML attributes, had to be added on the input
+parent element. Some attributes that belonged to the wrapper element are now
+added on the input element. The changes are as follows:
+
+- getComboboxProps has been removed.
+- getInputProps additions:
+  - role=combobox
+  - aria-expanded=${isOpen}
+- getToggleButtonProps additions:
+  - aria-controls=${menuId}
+  - aria-expanded=${isOpen}
+
+### Events
+
+As a result of the 1.2 pattern, there are a few event handling changes detailed
+below.
+
+- getInputProps additions:
+
+  - _ArrowDown+Alt_: opens the menu without any item highlighted.
+  - _ArrowUp+Alt_: closes the menu and selects the highlighted item.
+  - _PageUp_: if menu is open, moves highlight by 10 positions to the start.
+  - _PageDown_: if menu is open, moves highlight by 10 positions to the end.
+  - _Focus_: if menu is closed, opens the menu.
+
+- getInputProps changes:
+  - _ArrowUp_: moves highlight one position up. _Shift_ modifier is not
+    supported anymore.
+  - _ArrowDown_: moves highlight one position down. _Shift_ modifier is not
+    supported anymore.
+
+### stateChangeTypes
+
+As a consequence of the [event changes](#events), the _stateChangeTypes_
+received in the _stateReducer_ and _on${statePropery}Change_ received the
+following additions:
+
+- InputKeyDownPageUp
+- InputKeyDownPageDown
+- InputFocus
+
+You don't need to change your reducer if you want to keep the 1.2 functionality
+provided by default. However, if you want to keep the menu closed when the input
+gets focus, you can do:
+
+```js
+function stateReducer(state, actionAndChanges) {
+  const {changes, type} = actionAndChanges
+  switch (type) {
+    case useCombobox.stateChangeTypes.InputFocus:
+      return {
+        ...changes,
+        isOpen: false, // keep the menu closed when input gets focused.
+      }
+    default:
+      return changes
+  }
+}
+```
+
+### circularNavigation
+
+The prop _circularNavigation_ has been removed. Navigation inside the menu is
+standard and circular. If you wish to make it non-circular, use the
+_stateReducer_:
+
+```js
+function stateReducer(state, actionAndChanges) {
+  const {changes, type} = actionAndChanges
+
+  switch (type) {
+    case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+      if (state.highlightedIndex === items.length - 1) {
+        return {...changes, highlightedIndex: state.highlightedIndex}
+      }
+      break
+    case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+      if (state.highlightedIndex === 0) {
+        return {...changes, highlightedIndex: state.highlightedIndex}
+      }
+      break
+    default:
+      return changes
+  }
+
+  return changes
+}
+```
+
+[combobox-aria]: https://w3c.github.io/aria-practices/#combobox
+[select-aria-example]:
+  https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
+[combobox-aria-example]:
+  https://w3c.github.io/aria-practices/examples/combobox/combobox-autocomplete-both.html
+[deprecated-select-aria]:
+  https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html
+[deprecated-combobox-aria]:
+  https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html
diff --git a/src/hooks/README.md b/src/hooks/README.md
index 79a4f80a3..9dbc17681 100644
--- a/src/hooks/README.md
+++ b/src/hooks/README.md
@@ -4,6 +4,13 @@ A set of hooks to build simple, flexible, WAI-ARIA compliant React dropdown
 components. Developed as a follow up on [this issue][hooks-issue] about using
 hooks in our API.
 
+## Migration to v7
+
+`useSelect` and `useCombobox` received some changes related to their API and how
+they works in version 7, as a conequence of adapting both hooks to the ARIA 1.2
+combobox patterns. If you were using _useSelect_ and/or _useCombobox_ previous
+to 7.0.0, check the [migration guide][migration-guide] and update if necessary.
+
 ## Hooks
 
 Check out one of the hooks below to use in your application and create fully
@@ -38,6 +45,8 @@ Next steps:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox
 [multiple-selection-readme]:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection
+[migration-guide]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
diff --git a/src/hooks/reducer.js b/src/hooks/reducer.js
index bbecb8aeb..b404910f3 100644
--- a/src/hooks/reducer.js
+++ b/src/hooks/reducer.js
@@ -1,6 +1,5 @@
 import {getHighlightedIndexOnOpen, getDefaultValue} from './utils'
 
-/* eslint-disable complexity */
 export default function downshiftCommonReducer(
   state,
   action,
diff --git a/src/hooks/testUtils.js b/src/hooks/testUtils.js
index 40165808b..21ced50fb 100644
--- a/src/hooks/testUtils.js
+++ b/src/hooks/testUtils.js
@@ -1,7 +1,8 @@
 import React from 'react'
-import {act} from '@testing-library/react'
+import {screen, act} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
-const items = [
+export const items = [
   'Neptunium',
   'Plutonium',
   'Americium',
@@ -30,7 +31,16 @@ const items = [
   'Oganesson',
 ]
 
-const defaultIds = {
+export const dataTestIds = {
+  toggleButton: 'toggle-button-id',
+  menu: 'menu-id',
+  item: index => `item-id-${index}`,
+  input: 'input-id',
+  selectedItemPrefix: 'selected-item-id',
+  selectedItem: index => `selected-item-id-${index}`,
+}
+
+export const defaultIds = {
   labelId: 'downshift-test-id-label',
   menuId: 'downshift-test-id-menu',
   getItemId: index => `downshift-test-id-item-${index}`,
@@ -38,14 +48,13 @@ const defaultIds = {
   inputId: 'downshift-test-id-input',
 }
 
-const waitForDebouncedA11yStatusUpdate = () =>
+export const waitForDebouncedA11yStatusUpdate = () =>
   act(() => jest.advanceTimersByTime(200))
 
-const MemoizedItem = React.memo(function Item({
+export const MemoizedItem = React.memo(function Item({
   index,
   item,
   getItemProps,
-  dataTestIds,
   stringItem,
   ...rest
 }) {
@@ -60,4 +69,45 @@ const MemoizedItem = React.memo(function Item({
   )
 })
 
-export {items, defaultIds, waitForDebouncedA11yStatusUpdate, MemoizedItem}
+export const user = userEvent.setup({delay: null})
+
+export function getLabel() {
+  return screen.getByText(/choose an element/i)
+}
+export function getMenu() {
+  return screen.getByRole('listbox')
+}
+export function getToggleButton() {
+  return screen.getByTestId(dataTestIds.toggleButton)
+}
+export function getItemAtIndex(index) {
+  return getItems()[index]
+}
+export function getItems() {
+  return screen.queryAllByRole('option')
+}
+export async function clickOnItemAtIndex(index) {
+  await user.click(getItemAtIndex(index))
+}
+export async function clickOnToggleButton() {
+  await user.click(getToggleButton())
+}
+export async function mouseMoveItemAtIndex(index) {
+  await user.hover(getItemAtIndex(index))
+}
+export async function mouseLeaveItemAtIndex(index) {
+  await user.unhover(getItemAtIndex(index))
+}
+export async function keyDownOnToggleButton(keys) {
+  if (document.activeElement !== getToggleButton()) {
+    getToggleButton().focus()
+  }
+
+  await user.keyboard(keys)
+}
+export function getA11yStatusContainer() {
+  return screen.queryByRole('status')
+}
+export async function tab(shiftKey = false) {
+  await user.tab({shift: shiftKey})
+}
diff --git a/src/hooks/useCombobox/README.md b/src/hooks/useCombobox/README.md
index 73c736361..22d3ec837 100644
--- a/src/hooks/useCombobox/README.md
+++ b/src/hooks/useCombobox/README.md
@@ -13,9 +13,8 @@ specific needs.
 `useCombobox` is a React hook that manages all the stateful logic needed to make
 the combobox functional and accessible. It returns a set of props that are meant
 to be called and their results destructured on the combobox's elements: its
-label, toggle button, input, combobox container, list and list items. The props
-are similar to the ones provided by vanilla `<Downshift>` to the children render
-prop.
+label, toggle button, input, list and list items. The props are similar to the
+ones provided by vanilla `<Downshift>` to the children render prop.
 
 These props are called getter props and their return values are destructured as
 a set of ARIA attributes and event listeners. Together with the action props and
@@ -24,6 +23,13 @@ implement the corresponding ARIA pattern. Every functionality needed should be
 provided out-of-the-box: menu toggle, item selection and up/down movement
 between them, screen reader support, highlight by character keys etc.
 
+## Migration to v7
+
+`useCombobox` received some changes related to how it works in version 7, as a
+conequence of adapting it to the ARIA 1.2 combobox pattern. If you were using
+_useCombobox_ previous to 7.0.0, check the [migration guide][migration-guide-v7]
+and update if necessary.
+
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -61,15 +67,23 @@ between them, screen reader support, highlight by character keys etc.
   - [inputId](#inputid)
   - [getItemId](#getitemid)
   - [environment](#environment)
-  - [circularNavigation](#circularnavigation)
 - [stateChangeTypes](#statechangetypes)
 - [Control Props](#control-props)
 - [Returned props](#returned-props)
   - [prop getters](#prop-getters)
+    - [`getLabelProps`](#getlabelprops)
+    - [`getMenuProps`](#getmenuprops)
+    - [`getItemProps`](#getitemprops)
+    - [`getToggleButtonProps`](#gettogglebuttonprops)
+    - [`getInputProps`](#getinputprops)
   - [actions](#actions)
   - [state](#state)
 - [Event Handlers](#event-handlers)
   - [Default handlers](#default-handlers)
+    - [Toggle Button](#toggle-button)
+    - [Input](#input)
+    - [Menu](#menu)
+    - [Item](#item)
   - [Customizing Handlers](#customizing-handlers)
 - [Examples](#examples)
 
@@ -95,7 +109,6 @@ function DropdownCombobox() {
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     highlightedIndex,
     getItemProps,
   } = useCombobox({
@@ -112,7 +125,7 @@ function DropdownCombobox() {
   return (
     <>
       <label {...getLabelProps()}>Choose an element:</label>
-      <div style={comboboxStyles} {...getComboboxProps()}>
+      <div style={comboboxStyles}>
         <input {...getInputProps()} />
         <button
           type="button"
@@ -493,14 +506,6 @@ then you will need to pass in a custom object that is able to provide
 [access to these properties](https://gist.github.com/Rendez/1dd55882e9b850dd3990feefc9d6e177)
 for downshift.
 
-### circularNavigation
-
-> `boolean` | defaults to `true`
-
-Controls the circular keyboard navigation between items. If set to `true`, when
-first item is highlighted, the Arrow Up will move highlight to the last item,
-and viceversa using Arrow Down.
-
 ## stateChangeTypes
 
 There are a few props that expose changes to state
@@ -517,8 +522,11 @@ The list of all possible values this `type` property can take is defined in
 - `useCombobox.stateChangeTypes.InputKeyDownEscape`
 - `useCombobox.stateChangeTypes.InputKeyDownHome`
 - `useCombobox.stateChangeTypes.InputKeyDownEnd`
+- `useCombobox.stateChangeTypes.InputKeyDownPageUp`
+- `useCombobox.stateChangeTypes.InputKeyDownPadeDown`
 - `useCombobox.stateChangeTypes.InputKeyDownEnter`
 - `useCombobox.stateChangeTypes.InputChange`
+- `useCombobox.stateChangeTypes.InputFocus`
 - `useCombobox.stateChangeTypes.InputBlur`
 - `useCombobox.stateChangeTypes.MenuMouseLeave`
 - `useCombobox.stateChangeTypes.ItemMouseMove`
@@ -608,14 +616,13 @@ props being overridden (or overriding the props returned). For example:
 
 <!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
 
-| property               | type           | description                                                                                      |
-| ---------------------- | -------------- | ------------------------------------------------------------------------------------------------ |
-| `getToggleButtonProps` | `function({})` | returns the props you should apply to any menu toggle button element you render.                 |
-| `getItemProps`         | `function({})` | returns the props you should apply to any menu item elements you render.                         |
-| `getLabelProps`        | `function({})` | returns the props you should apply to the `label` element that you render.                       |
-| `getMenuProps`         | `function({})` | returns the props you should apply to the `ul` element (or root of your menu) that you render.   |
-| `getInputProps`        | `function({})` | returns the props you should apply to the `input` element that you render.                       |
-| `getComboboxProps`     | `function({})` | returns the props you should apply to an element that wraps the `input` element that you render. |
+| property               | type           | description                                                                                    |
+| ---------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
+| `getToggleButtonProps` | `function({})` | returns the props you should apply to any menu toggle button element you render.               |
+| `getItemProps`         | `function({})` | returns the props you should apply to any menu item elements you render.                       |
+| `getLabelProps`        | `function({})` | returns the props you should apply to the `label` element that you render.                     |
+| `getMenuProps`         | `function({})` | returns the props you should apply to the `ul` element (or root of your menu) that you render. |
+| `getInputProps`        | `function({})` | returns the props you should apply to the `input` element that you render.                     |
 
 #### `getLabelProps`
 
@@ -805,24 +812,6 @@ can provide the object `{suppressRefError : true}` as the second argument to
 sure that the ref is correctly forwarded otherwise `useCombobox` will
 unexpectedly fail.**
 
-#### `getComboboxProps`
-
-This method should be applied to the `input` wrapper element. It has similar
-return values to the `getRootProps` from vanilla `Downshift`, but renaming it as
-it's not a root element anymore. We are encouraging the correct `combobox` HTML
-structure as having the combobox wrapper as a root for the rest of the elements
-broke navigation and readings with assistive technologies. The wrapper should
-contain the `input` and the `toggleButton` and it should be on the same level
-with the `menu`.
-
-There are no required properties for this method.
-
-In some cases, you might want to completely bypass the `refKey` check. Then you
-can provide the object `{suppressRefError : true}` as the second argument to
-`getComboboxProps`. **Please use it with extreme care and only if you are
-absolutely sure that the ref is correctly forwarded otherwise `useCombobox` will
-unexpectedly fail.**
-
 ### actions
 
 These are functions you can call to change the state of the downshift
@@ -875,21 +864,28 @@ described below.
 
 #### Input
 
-- `ArrowDown`: Moves `highlightedIndex` one position down. If
-  `circularNavigation` is true, when reaching the last option, `ArrowDown` will
-  move `highlightedIndex` to first position. Otherwise it won't change anything.
-- `ArrowUp`: Moves `highlightedIndex` one position up. If `circularNavigation`
-  is true, when reaching the first option, `ArrowUp` will move
-  `highlightedIndex` to last position. Otherwise it won't change anything.
+- `ArrowDown`: Moves `highlightedIndex` one position down. When reaching the
+  last option, `ArrowDown` will move `highlightedIndex` to first position.
+- `ArrowUp`: Moves `highlightedIndex` one position up. When reaching the first
+  option, `ArrowUp` will move `highlightedIndex` to last position.
+- `Alt+ArrowDown`: If the menu is closed, it will open it, without highlighting
+  any item.
+- `Alt+ArrowUp`: If the menu is open, it will close it and will select the item
+  that was highlighted.
 - `CharacterKey`: Will change the `inputValue` according to the value visible in
   the `<input>`. `Backspace` or `Space` triggere the same event.
-- `End`: Moves `highlightedIndex` to last position.
-- `Home`: Moves `highlightedIndex` to first position.
+- `End`: If the menu is open, it will highlight the last item in the list.
+- `Home`: If the menu is open, it will highlight the first item in the list.
+- `PageUp`: If the menu is open, it will move the highlight the item 10
+  positions before the current selection.
+- `PageDown`: If the menu is open, it will move the highlight the item 10
+  positions after the current selection.
 - `Enter`: If there is a highlighted option, it will select it and close the
   menu.
 - `Escape`: It will close the menu if open. If the menu is closed, it will clear
   selection: the value in the `input` will become an empty string and the item
   stored as `selectedItem` will become `null`.
+- `Focus`: If the menu is closed, it will open it.
 - `Blur(Tab, Shift+Tab)`: It will close the menu and select the highlighted
   item, if any. The focus will move naturally to the next/previous element in
   the Tab order.
@@ -977,7 +973,7 @@ docsite examples. If you have such an example, please create an issue with the
 suggestion and the Codesandbox for it, and we will take it from there.
 
 [combobox-aria]:
-  https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html
+  https://w3c.github.io/aria-practices/examples/combobox/combobox-autocomplete-none.html
 [sandbox-example]:
   https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useCombobox/basic-usage.js
 [state-change-file]:
@@ -986,3 +982,5 @@ suggestion and the Codesandbox for it, and we will take it from there.
   https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf
 [docsite]: https://downshift-js.com/
 [sandbox-repo]: https://codesandbox.io/s/github/kentcdodds/downshift-examples
+[migration-guide-v7]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md#usecombobox
diff --git a/src/hooks/useCombobox/__tests__/getComboboxProps.test.js b/src/hooks/useCombobox/__tests__/getComboboxProps.test.js
deleted file mode 100644
index 3f2f5cea4..000000000
--- a/src/hooks/useCombobox/__tests__/getComboboxProps.test.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import {act, renderHook} from '@testing-library/react-hooks'
-import {noop} from '../../../utils'
-import {renderUseCombobox} from '../testUtils'
-import {defaultIds, items} from '../../testUtils'
-import useCombobox from '..' // eslint-disable-next-line import/default
-import utils from '../../utils'
-
-describe('getComboboxProps', () => {
-  describe('hook props', () => {
-    test("assign 'combobox' to role", () => {
-      const {result} = renderUseCombobox()
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps.role).toEqual('combobox')
-    })
-
-    test("assign 'listbox' to aria-haspopup", () => {
-      const {result} = renderUseCombobox()
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps['aria-haspopup']).toEqual('listbox')
-    })
-
-    test('assign default value to aria-owns', () => {
-      const {result} = renderUseCombobox()
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps['aria-owns']).toEqual(`${defaultIds.menuId}`)
-    })
-
-    test('assign custom value passed by user to aria-owns', () => {
-      const props = {
-        menuId: 'my-custom-label-id',
-      }
-      const {result} = renderUseCombobox(props)
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps['aria-owns']).toEqual(`${props.menuId}`)
-    })
-
-    test("assign 'false' value to aria-expanded when menu is closed", () => {
-      const {result} = renderUseCombobox({isOpen: false})
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps['aria-expanded']).toEqual(false)
-    })
-
-    test("assign 'true' value to aria-expanded when menu is open", () => {
-      const {result} = renderUseCombobox()
-
-      act(() => {
-        const {ref: inputRef} = result.current.getInputProps()
-
-        inputRef({focus: noop})
-        result.current.toggleMenu()
-      })
-
-      const comboboxProps = result.current.getComboboxProps()
-
-      expect(comboboxProps['aria-expanded']).toEqual(true)
-    })
-  })
-
-  describe('user props', () => {
-    test('are passed down', () => {
-      const {result} = renderUseCombobox()
-
-      expect(result.current.getComboboxProps({foo: 'bar'})).toHaveProperty(
-        'foo',
-        'bar',
-      )
-    })
-  })
-
-  describe('non production errors', () => {
-    beforeEach(() => {
-      const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
-      jest
-        .spyOn(utils, 'useGetterPropsCalledChecker')
-        .mockImplementation(useGetterPropsCalledChecker)
-      jest.spyOn(console, 'error').mockImplementation(() => {})
-    })
-
-    test('will be displayed if getComboboxProps is not called', () => {
-      renderHook(() => {
-        const {getInputProps, getMenuProps} = useCombobox({items})
-        getInputProps({}, {suppressRefError: true})
-        getMenuProps({}, {suppressRefError: true})
-      })
-
-      // eslint-disable-next-line no-console
-      expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
-        `downshift: You forgot to call the getComboboxProps getter function on your component / element.`,
-      )
-    })
-
-    test('will not be displayed if getComboboxProps is not called on subsequent renders', () => {
-      let firstRender = true
-      const {rerender} = renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
-          items,
-        })
-        getInputProps({}, {suppressRefError: true})
-        getMenuProps({}, {suppressRefError: true})
-
-        if (firstRender) {
-          firstRender = false
-          getComboboxProps({}, {suppressRefError: true})
-        }
-      })
-
-      rerender()
-
-      // eslint-disable-next-line no-console
-      expect(console.error).not.toHaveBeenCalled()
-    })
-
-    test('will be displayed if element ref is not set and suppressRefError is false', () => {
-      renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
-          items,
-        })
-
-        getInputProps({}, {suppressRefError: true})
-        getMenuProps({}, {suppressRefError: true})
-        getComboboxProps()
-      })
-
-      // eslint-disable-next-line no-console
-      expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
-        `downshift: The ref prop "ref" from getComboboxProps was not applied correctly on your element.`,
-      )
-    })
-
-    // this test will cover also the equivalent getInputProps and getMenuProps cases.
-    test('will not be displayed if element ref is not set and suppressRefError is true', () => {
-      renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
-          items,
-        })
-
-        getInputProps({}, {suppressRefError: true})
-        getMenuProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
-      })
-
-      // eslint-disable-next-line no-console
-      expect(console.error).not.toHaveBeenCalled()
-    })
-
-    test('will not be displayed if called with a correct ref', () => {
-      const refFn = jest.fn()
-      const comboboxNode = {}
-
-      renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
-          items,
-        })
-
-        getMenuProps({}, {suppressRefError: true})
-        getInputProps({}, {suppressRefError: true})
-
-        const {ref} = getComboboxProps({
-          ref: refFn,
-        })
-        ref(comboboxNode)
-      })
-
-      // eslint-disable-next-line no-console
-      expect(console.error).not.toHaveBeenCalled()
-    })
-  })
-})
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
index 7f0456c86..534038e10 100644
--- a/src/hooks/useCombobox/__tests__/getInputProps.test.js
+++ b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -1,18 +1,33 @@
-/* eslint-disable jest/no-disabled-tests */
 import * as React from 'react'
 import {act, renderHook} from '@testing-library/react-hooks'
 import {fireEvent, createEvent} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import * as stateChangeTypes from '../stateChangeTypes'
 import {noop} from '../../../utils'
-import {renderUseCombobox, renderCombobox} from '../testUtils'
-import {items, defaultIds} from '../../testUtils'
-// eslint-disable-next-line import/default
+import {
+  renderUseCombobox,
+  renderCombobox,
+  items,
+  defaultIds,
+  changeInputValue,
+  getInput,
+  getItems,
+  keyDownOnInput,
+  mouseLeaveItemAtIndex,
+  mouseMoveItemAtIndex,
+  tab,
+} from '../testUtils'
 import utils from '../../utils'
 import useCombobox from '..'
 
 describe('getInputProps', () => {
   describe('hook props', () => {
+    test("assign 'combobox' to role", () => {
+      const {result} = renderUseCombobox()
+      const inputProps = result.current.getInputProps()
+
+      expect(inputProps.role).toEqual('combobox')
+    })
+
     test('assign default value to id', () => {
       const {result} = renderUseCombobox()
       const inputProps = result.current.getInputProps()
@@ -74,14 +89,21 @@ describe('getInputProps', () => {
       const {result} = renderUseCombobox({highlightedIndex: 2})
       const inputProps = result.current.getInputProps()
 
-      expect(inputProps['aria-activedescendant']).toBeUndefined()
+      expect(inputProps['aria-activedescendant']).toBe('')
     })
 
     test('do not assign aria-activedescendant if no item is highlighted', () => {
       const {result} = renderUseCombobox()
       const inputProps = result.current.getInputProps()
 
-      expect(inputProps['aria-activedescendant']).toBeUndefined()
+      expect(inputProps['aria-activedescendant']).toBe('')
+    })
+
+    test('do not assign aria-activedescendant if no item is highlighted and menu is open', () => {
+      const {result} = renderUseCombobox({isOpen: true})
+      const inputProps = result.current.getInputProps()
+
+      expect(inputProps['aria-activedescendant']).toBe('')
     })
 
     test('assign default value to aria-labelledby', () => {
@@ -101,6 +123,28 @@ describe('getInputProps', () => {
       expect(inputProps['aria-labelledby']).toEqual(`${props.labelId}`)
     })
 
+    test("assign 'false' value to aria-expanded when menu is closed", () => {
+      const {result} = renderUseCombobox({isOpen: false})
+      const inputProps = result.current.getInputProps()
+
+      expect(inputProps['aria-expanded']).toEqual(false)
+    })
+
+    test("assign 'true' value to aria-expanded when menu is open", () => {
+      const {result} = renderUseCombobox()
+
+      act(() => {
+        const {ref: inputRef} = result.current.getInputProps()
+
+        inputRef({focus: noop})
+        result.current.toggleMenu()
+      })
+
+      const inputProps = result.current.getInputProps()
+
+      expect(inputProps['aria-expanded']).toEqual(true)
+    })
+
     test("handlers are not called if it's disabled", () => {
       const {result} = renderUseCombobox()
       const inputProps = result.current.getInputProps({
@@ -110,7 +154,7 @@ describe('getInputProps', () => {
       expect(inputProps.onChange).toBeUndefined()
       expect(inputProps.onKeyDown).toBeUndefined()
       expect(inputProps.onBlur).toBeUndefined()
-      // eslint-disable-next-line jest-dom/prefer-enabled-disabled
+      expect(inputProps.onFocus).toBeUndefined()
       expect(inputProps.disabled).toBe(true)
     })
   })
@@ -314,44 +358,45 @@ describe('getInputProps', () => {
 
   describe('initial focus', () => {
     test('is grabbed when isOpen is passed as true', () => {
-      const {input} = renderCombobox({isOpen: true})
+      renderCombobox({isOpen: true})
 
-      expect(input).toHaveFocus()
+      expect(getInput()).toHaveFocus()
     })
 
     test('is grabbed when initialIsOpen is passed as true', () => {
-      const {input} = renderCombobox({initialIsOpen: true})
+      renderCombobox({initialIsOpen: true})
 
-      expect(input).toHaveFocus()
+      expect(getInput()).toHaveFocus()
     })
 
     test('is grabbed when defaultIsOpen is passed as true', () => {
-      const {input} = renderCombobox({defaultIsOpen: true})
+      renderCombobox({defaultIsOpen: true})
 
-      expect(input).toHaveFocus()
+      expect(getInput()).toHaveFocus()
     })
 
     test('is not grabbed when initial open is set to default (false)', () => {
-      const {input} = renderCombobox()
+      renderCombobox()
 
-      expect(input).not.toHaveFocus()
+      expect(getInput()).not.toHaveFocus()
     })
   })
 
   describe('event handlers', () => {
-    test('on change should open the menu and keep the input value', () => {
-      const {changeInputValue, getItems, input} = renderCombobox()
+    test('on change should open the menu and keep the input value', async () => {
+      renderCombobox()
 
-      changeInputValue('california')
+      await changeInputValue('california')
 
       expect(getItems()).toHaveLength(items.length)
-      expect(input).toHaveValue('california')
+      expect(getInput()).toHaveValue('california')
     })
 
     describe('on key down', () => {
       describe('arrow up', () => {
         test('it prevents the default event behavior', () => {
-          const {input} = renderCombobox()
+          renderCombobox()
+          const input = getInput()
           const keyDownEvent = createEvent.keyDown(input, {key: 'ArrowUp'})
 
           fireEvent(input, keyDownEvent)
@@ -359,119 +404,161 @@ describe('getInputProps', () => {
           expect(keyDownEvent.defaultPrevented).toBe(true)
         })
 
-        test('it does not open or highlight anything if there are no options', () => {
-          const {keyDownOnInput, getItems, input} = renderCombobox({items: []})
+        test('it does not open or highlight anything if there are no options', async () => {
+          renderCombobox({items: []})
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).not.toHaveAttribute('aria-activedescendant')
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test('it does not highlight anything if there are no options', () => {
-          const {keyDownOnInput, getItems, input} = renderCombobox({
+        test('it does not highlight anything if there are no options', async () => {
+          renderCombobox({
             items: [],
             isOpen: true,
           })
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).not.toHaveAttribute('aria-activedescendant')
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test('it opens the menu and highlights the last option', () => {
-          const {keyDownOnInput, getItems, input} = renderCombobox()
+        test('it opens the menu and highlights the last option', async () => {
+          renderCombobox()
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(items.length - 1),
           )
           expect(getItems()).toHaveLength(items.length)
         })
 
-        test('it highlights the last option number if none is highlighted', () => {
-          const {keyDownOnInput, input} = renderCombobox({isOpen: true})
+        test('it opens the closed menu with selected option highlighted', async () => {
+          const selectedIndex = 4
+          renderCombobox({
+            initialSelectedItem: items[selectedIndex],
+          })
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
+            defaultIds.getItemId(selectedIndex),
           )
         })
 
-        test('it highlights the previous item', () => {
+        test('it opens the closed menu at initialHighlightedIndex, but on first arrow up only', async () => {
           const initialHighlightedIndex = 2
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
+          renderCombobox({
             initialHighlightedIndex,
           })
 
-          keyDownOnInput('ArrowUp')
+          const input = getInput()
+
+          await keyDownOnInput('{ArrowUp}')
 
           expect(input).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex - 1),
+            defaultIds.getItemId(items.length - 1),
           )
         })
 
-        test('with shift it highlights the 5th previous item', () => {
-          const initialHighlightedIndex = 6
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
-            initialHighlightedIndex,
+        test('it opens the closed menu at defaultHighlightedIndex, on every arrow up', async () => {
+          const defaultHighlightedIndex = 3
+          renderCombobox({
+            defaultHighlightedIndex,
           })
+          const input = getInput()
 
-          keyDownOnInput('ArrowUp', {shiftKey: true})
+          await keyDownOnInput('{ArrowUp}')
 
           expect(input).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex - 5),
+            defaultIds.getItemId(defaultHighlightedIndex),
+          )
+
+          await keyDownOnInput('{Escape}')
+          await keyDownOnInput('{ArrowUp}')
+
+          expect(input).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(defaultHighlightedIndex),
+          )
+        })
+
+        test('it opens the closed menu and keeps focus on the combobox', async () => {
+          renderCombobox()
+
+          await keyDownOnInput('{ArrowUp}')
+
+          expect(getInput()).toHaveFocus()
+        })
+
+        test('it highlights the last option number if none is highlighted', async () => {
+          renderCombobox({isOpen: true})
+
+          await keyDownOnInput('{ArrowUp}')
+
+          expect(getInput()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(items.length - 1),
           )
         })
 
-        test('with shift it highlights the last item if not enough items remaining', () => {
-          const initialHighlightedIndex = 1
-          const {keyDownOnInput, input} = renderCombobox({
+        test('it highlights the previous item', async () => {
+          const initialHighlightedIndex = 2
+          renderCombobox({
             isOpen: true,
             initialHighlightedIndex,
           })
 
-          keyDownOnInput('ArrowUp', {shiftKey: true})
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
+            defaultIds.getItemId(initialHighlightedIndex - 1),
           )
         })
 
-        test('will stop at 0 if circularNavigatios is false', () => {
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
-            initialHighlightedIndex: 0,
-            circularNavigation: false,
+        test('with Alt it selects the item and closes the menu', async () => {
+          const initialHighlightedIndex = 2
+          renderCombobox({
+            initialIsOpen: true,
+            initialHighlightedIndex,
           })
+          const input = getInput()
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{Alt>}{ArrowUp}{/Alt}')
 
-          expect(input).toHaveAttribute(
+          expect(getItems()).toHaveLength(0)
+          expect(input).toHaveValue(items[initialHighlightedIndex])
+        })
+
+        test('with Alt it opens the menu without any additional change', async () => {
+          renderCombobox()
+
+          await keyDownOnInput('{Alt>}{ArrowUp}{/Alt}')
+
+          expect(getItems()).toHaveLength(items.length)
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(0),
+            defaultIds.getItemId(items.length - 1),
           )
         })
 
-        test('will continue from 0 to last item if circularNavigatios is default', () => {
-          const {keyDownOnInput, input} = renderCombobox({
+        test('will continue from 0 to last item', async () => {
+          renderCombobox({
             isOpen: true,
             initialHighlightedIndex: 0,
           })
 
-          keyDownOnInput('ArrowUp')
+          await keyDownOnInput('{ArrowUp}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(items.length - 1),
           )
@@ -480,7 +567,8 @@ describe('getInputProps', () => {
 
       describe('arrow down', () => {
         test('it prevents the default event behavior', () => {
-          const {input} = renderCombobox()
+          renderCombobox()
+          const input = getInput()
           const keyDownEvent = createEvent.keyDown(input, {key: 'ArrowDown'})
 
           fireEvent(input, keyDownEvent)
@@ -488,55 +576,61 @@ describe('getInputProps', () => {
           expect(keyDownEvent.defaultPrevented).toBe(true)
         })
 
-        test('it does not opne on highlight anything if there are no options', () => {
-          const {keyDownOnInput, getItems, input} = renderCombobox({items: []})
+        test('it does not opne on highlight anything if there are no options', async () => {
+          renderCombobox({items: []})
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).not.toHaveAttribute('aria-activedescendant')
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test('it does not highlight anything if there are no options', () => {
-          const {keyDownOnInput, getItems, input} = renderCombobox({
+        test('it does not highlight anything if there are no options', async () => {
+          renderCombobox({
             items: [],
             isOpen: true,
           })
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).not.toHaveAttribute('aria-activedescendant')
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test("it opens the menu and highlights option number '0'", () => {
-          const {input, keyDownOnInput, getItems} = renderCombobox()
+        test("it opens the menu and highlights option number '0'", async () => {
+          renderCombobox()
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(0),
           )
           expect(getItems()).toHaveLength(items.length)
         })
 
-        test('it opens the menu and highlights initialHighlightedIndex only once', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnInput, input, getItems} = renderCombobox({
-            initialHighlightedIndex,
+        test('opens the closed menu with selected option highlighted', async () => {
+          const selectedIndex = 4
+          renderCombobox({
+            initialSelectedItem: items[selectedIndex],
           })
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex),
+            defaultIds.getItemId(selectedIndex),
           )
-          expect(getItems()).toHaveLength(items.length)
+        })
+
+        test('it opens the menu and highlights initialHighlightedIndex only once', async () => {
+          const initialHighlightedIndex = 2
+          renderCombobox({
+            initialHighlightedIndex,
+          })
+          const input = getInput()
 
-          keyDownOnInput('Escape')
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
           expect(input).toHaveAttribute(
             'aria-activedescendant',
@@ -545,13 +639,14 @@ describe('getInputProps', () => {
           expect(getItems()).toHaveLength(items.length)
         })
 
-        test('it opens the menu and highlights defaultHighlightedIndex always', () => {
+        test('it opens the menu and highlights defaultHighlightedIndex always', async () => {
           const defaultHighlightedIndex = 2
-          const {keyDownOnInput, input, getItems} = renderCombobox({
+          renderCombobox({
             defaultHighlightedIndex,
           })
+          const input = getInput()
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
           expect(input).toHaveAttribute(
             'aria-activedescendant',
@@ -559,8 +654,8 @@ describe('getInputProps', () => {
           )
           expect(getItems()).toHaveLength(items.length)
 
-          keyDownOnInput('Escape')
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{Escape}')
+          await keyDownOnInput('{ArrowDown}')
 
           expect(input).toHaveAttribute(
             'aria-activedescendant',
@@ -569,108 +664,104 @@ describe('getInputProps', () => {
           expect(getItems()).toHaveLength(items.length)
         })
 
-        test("it highlights option number '0' if none is highlighted", () => {
-          const {keyDownOnInput, input} = renderCombobox({isOpen: true})
+        test('opens the closed menu and keeps focus on the button', async () => {
+          renderCombobox()
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveFocus()
+        })
+
+        test("it highlights option number '0' if none is highlighted", async () => {
+          renderCombobox({isOpen: true})
+
+          await keyDownOnInput('{ArrowDown}')
+
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(0),
           )
         })
 
-        test('it highlights the next item', () => {
+        test('it highlights the next item', async () => {
           const initialHighlightedIndex = 2
-          const {keyDownOnInput, input} = renderCombobox({
+          renderCombobox({
             isOpen: true,
             initialHighlightedIndex,
           })
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(initialHighlightedIndex + 1),
           )
         })
 
-        test('with shift it highlights the next 5th item', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
+        test('with Alt it opens the menu and highlights no item', async () => {
+          renderCombobox()
 
-          keyDownOnInput('ArrowDown', {shiftKey: true})
+          await keyDownOnInput('{Alt>}{ArrowDown}{/Alt}')
 
-          expect(input).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex + 5),
-          )
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
         })
 
-        test('with shift it highlights first item if not enough next items remaining', () => {
-          const initialHighlightedIndex = items.length - 2
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
+        test('with Alt it opens the menu and highlights with selected item highlighted', async () => {
+          const itemIndex = 8
+          renderCombobox({selectedItem: items[itemIndex]})
 
-          keyDownOnInput('ArrowDown', {shiftKey: true})
+          await keyDownOnInput('{Alt>}{ArrowDown}{/Alt}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(0),
+            defaultIds.getItemId(itemIndex),
           )
         })
 
-        test('will stop at last item if circularNavigatios is false', () => {
-          const {keyDownOnInput, input} = renderCombobox({
-            isOpen: true,
-            initialHighlightedIndex: items.length - 1,
-            circularNavigation: false,
-          })
+        test('with Alt it highlights the next item without any additional change', async () => {
+          const initialHighlightedIndex = 2
+          renderCombobox({initialHighlightedIndex, isOpen: true})
 
-          keyDownOnInput('ArrowDown', {shiftKey: true})
+          await keyDownOnInput('{Alt>}{ArrowDown}{/Alt}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
+            defaultIds.getItemId(initialHighlightedIndex + 1),
           )
         })
 
-        test('will continue from last item to 0 if circularNavigatios is default', () => {
-          const {keyDownOnInput, input} = renderCombobox({
+        test('will continue from last item to 0', async () => {
+          renderCombobox({
             isOpen: true,
             initialHighlightedIndex: items.length - 1,
           })
 
-          keyDownOnInput('ArrowDown')
+          await keyDownOnInput('{ArrowDown}')
 
-          expect(input).toHaveAttribute(
+          expect(getInput()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(0),
           )
         })
       })
 
-      test('end it highlights the last option number', () => {
-        const {keyDownOnInput, input} = renderCombobox({
+      test('end highlights the last option number', async () => {
+        renderCombobox({
           isOpen: true,
           initialHighlightedIndex: 2,
         })
 
-        keyDownOnInput('End')
+        await keyDownOnInput('{End}')
 
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(items.length - 1),
         )
       })
 
-      test('end it prevents the default event and calls dispatch only when menu is open', () => {
-        const {input, rerender, renderSpy} = renderCombobox({isOpen: false})
+      test('end prevents the default event and calls dispatch only when menu is open', () => {
+        const {rerender, renderSpy} = renderCombobox({isOpen: false})
+        const input = getInput()
         const keyDownEvent = createEvent.keyDown(input, {key: 'End'})
 
         renderSpy.mockClear()
@@ -687,22 +778,23 @@ describe('getInputProps', () => {
         expect(renderSpy).toHaveBeenCalledTimes(1)
       })
 
-      test('home it highlights the first option number', () => {
-        const {keyDownOnInput, input} = renderCombobox({
+      test('home highlights the first option number', async () => {
+        renderCombobox({
           isOpen: true,
           initialHighlightedIndex: 2,
         })
 
-        keyDownOnInput('Home')
+        await keyDownOnInput('{Home}')
 
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(0),
         )
       })
 
-      test('home it prevents the default event calls dispatch only when menu is open', () => {
-        const {input, rerender, renderSpy} = renderCombobox({isOpen: false})
+      test('home prevents the default event calls dispatch only when menu is open', () => {
+        const {rerender, renderSpy} = renderCombobox({isOpen: false})
+        const input = getInput()
         const keyDownEvent = createEvent.keyDown(input, {key: 'Home'})
 
         renderSpy.mockClear()
@@ -719,63 +811,67 @@ describe('getInputProps', () => {
         expect(renderSpy).toHaveBeenCalledTimes(1) // re-render on key
       })
 
-      test('escape with menu open has the menu closed and focused kept on input', () => {
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+      test('escape with menu open has the menu closed and focused kept on input', async () => {
+        renderCombobox({
           initialIsOpen: true,
           initialHighlightedIndex: 2,
           initialSelectedItem: items[0],
         })
+        const input = getInput()
 
-        keyDownOnInput('Escape')
+        await keyDownOnInput('{Escape}')
 
         expect(getItems()).toHaveLength(0)
         expect(input).toHaveValue(items[0])
         expect(input).toHaveFocus()
       })
 
-      test('escape with closed menu has item removed and focused kept on input', () => {
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+      test('escape with closed menu has item removed and focused kept on input', async () => {
+        renderCombobox({
           initialHighlightedIndex: 2,
           initialSelectedItem: items[0],
         })
+        const input = getInput()
 
-        input.focus()
-        keyDownOnInput('Escape')
+        await keyDownOnInput('{Escape}')
 
         expect(getItems()).toHaveLength(0)
         expect(input).toHaveValue('')
         expect(input).toHaveFocus()
       })
 
-      test('escape it prevents the rerender when menu closed, no selectedItem and no inputValue', () => {
-        const {keyDownOnInput, rerender, renderSpy} = renderCombobox({
+      test('escape prevents the rerender when menu is closed, no selectedItem and no inputValue', async () => {
+        const {renderSpy, rerender} = renderCombobox({
           isOpen: false,
           inputValue: '',
         })
 
+        await keyDownOnInput('{Escape}') // focus input and close the menu.
         renderSpy.mockClear()
-        keyDownOnInput('Escape')
+        
+        await keyDownOnInput('{Escape}')
 
         expect(renderSpy).toHaveBeenCalledTimes(0) // no re-render
 
         rerender({isOpen: true, inputValue: ''})
         renderSpy.mockClear() // reset rerender and initial render
-        keyDownOnInput('Escape')
+        await keyDownOnInput('{Escape}')
 
         expect(renderSpy).toHaveBeenCalledTimes(1) // re-render on key
 
         rerender({isOpen: false, inputValue: 'still'})
         renderSpy.mockClear() // reset rerender and initial render
-        keyDownOnInput('Escape')
+        await keyDownOnInput('{Escape}')
 
         expect(renderSpy).toHaveBeenCalledTimes(1) // re-render on key
       })
 
       test('escape stops propagation when it closes the menu or clears the input', () => {
-        const {input} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
           initialSelectedItem: items[0],
         })
+        const input = getInput()
         const keyDownEvents = [
           createEvent.keyDown(input, {key: 'Escape'}),
           createEvent.keyDown(input, {key: 'Escape'}),
@@ -790,27 +886,28 @@ describe('getInputProps', () => {
         }
       })
 
-      test('enter it closes the menu and selects highlighted item', () => {
+      test('enter closes the menu and selects highlighted item', async () => {
         const initialHighlightedIndex = 2
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
           initialHighlightedIndex,
         })
 
-        keyDownOnInput('Enter')
+        await keyDownOnInput('{Enter}')
 
         expect(getItems()).toHaveLength(0)
-        expect(input).toHaveValue(items[initialHighlightedIndex])
+        expect(getInput()).toHaveValue(items[initialHighlightedIndex])
       })
 
-      test('enter selects highlighted item and resets to user defaults', () => {
+      test('enter selects highlighted item and resets to user defaults', async () => {
         const defaultHighlightedIndex = 2
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+        renderCombobox({
           defaultHighlightedIndex,
           defaultIsOpen: true,
         })
+        const input = getInput()
 
-        keyDownOnInput('Enter')
+        await keyDownOnInput('{Enter}')
 
         expect(input).toHaveValue(items[defaultHighlightedIndex])
         expect(getItems()).toHaveLength(items.length)
@@ -820,14 +917,15 @@ describe('getInputProps', () => {
         )
       })
 
-      test('enter while IME composing will not select highlighted item', () => {
+      test('enter while IME composing will not select highlighted item', async () => {
         const initialHighlightedIndex = 2
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+        renderCombobox({
           initialHighlightedIndex,
           initialIsOpen: true,
         })
+        const input = getInput()
 
-        keyDownOnInput('Enter', {keyCode: 229})
+        fireEvent.keyDown(getInput(), {key: 'Enter', keyCode: 229})
 
         expect(input).toHaveValue('')
         expect(getItems()).toHaveLength(items.length)
@@ -836,41 +934,42 @@ describe('getInputProps', () => {
           defaultIds.getItemId(initialHighlightedIndex),
         )
 
-        keyDownOnInput('Enter')
+        await keyDownOnInput('{Enter}')
 
         expect(input).toHaveValue(items[2])
         expect(getItems()).toHaveLength(0)
-        expect(input).not.toHaveAttribute('aria-activedescendant')
+        expect(input).toHaveAttribute('aria-activedescendant', '')
       })
 
-      test('enter with a closed menu does nothing', () => {
-        const {keyDownOnInput, getItems, input} = renderCombobox({
+      test('enter with a closed menu does nothing', async () => {
+        renderCombobox({
           initialHighlightedIndex: 2,
           initialIsOpen: false,
         })
 
-        keyDownOnInput('Enter')
+        await keyDownOnInput('{Enter}')
 
         expect(getItems()).toHaveLength(0)
-        expect(input).not.toHaveValue()
+        expect(getInput()).not.toHaveValue()
       })
 
-      test('enter with an open menu does nothing without a highlightedIndex', () => {
-        const {keyDownOnInput, getItems, input} = renderCombobox({
+      test('enter with an open menu closes the menu without a highlightedIndex', async () => {
+        renderCombobox({
           initialIsOpen: true,
         })
 
-        keyDownOnInput('Enter')
+        await keyDownOnInput('{Enter}')
 
-        expect(getItems()).toHaveLength(items.length)
-        expect(input).not.toHaveValue()
+        expect(getItems()).toHaveLength(0)
+        expect(getInput()).not.toHaveValue()
       })
 
-      test('enter with closed menu, no item highlighted or composing event, it will not rerender or prevent event default', () => {
-        const {input, renderSpy, rerender} = renderCombobox({
+      test('enter with closed menu or composing event, it will not rerender or prevent event default', () => {
+        const {renderSpy, rerender} = renderCombobox({
           isOpen: false,
           highlightedIndex: -1,
         })
+        const input = getInput()
         let keyDownEvent = createEvent.keyDown(input, {key: 'Enter'})
 
         renderSpy.mockClear()
@@ -879,16 +978,6 @@ describe('getInputProps', () => {
         expect(renderSpy).not.toHaveBeenCalled()
         expect(keyDownEvent.defaultPrevented).toBe(false)
 
-        rerender({
-          isOpen: true,
-          highlightedIndex: -1,
-        })
-        renderSpy.mockClear()
-        fireEvent(input, keyDownEvent)
-
-        expect(renderSpy).not.toHaveBeenCalled()
-        expect(keyDownEvent.defaultPrevented).toBe(false)
-
         keyDownEvent = createEvent.keyDown(input, {key: 'Enter', keyCode: 229})
         rerender({
           isOpen: true,
@@ -907,9 +996,9 @@ describe('getInputProps', () => {
         expect(keyDownEvent.defaultPrevented).toBe(true)
       })
 
-      test('tab it closes the menu and selects highlighted item', () => {
+      test('tab it closes the menu and selects highlighted item', async () => {
         const initialHighlightedIndex = 2
-        const {input, getItems} = renderCombobox(
+        renderCombobox(
           {initialIsOpen: true, initialHighlightedIndex: 2},
           ui => {
             return (
@@ -921,30 +1010,15 @@ describe('getInputProps', () => {
           },
         )
 
-        userEvent.tab()
+        await tab()
 
         expect(getItems()).toHaveLength(0)
-        expect(input).toHaveValue(items[initialHighlightedIndex])
-      })
-
-      test('tab it prevents the rerender and does not call dispatch when menu is closed', () => {
-        const {rerender, renderSpy} = renderCombobox({isOpen: false})
-
-        renderSpy.mockClear()
-        userEvent.tab()
-
-        expect(renderSpy).toHaveBeenCalledTimes(0)
-
-        rerender({isOpen: true})
-        renderSpy.mockClear()
-        userEvent.tab()
-
-        expect(renderSpy).toHaveBeenCalledTimes(1)
+        expect(getInput()).toHaveValue(items[initialHighlightedIndex])
       })
 
-      test('shift+tab it closes the menu', () => {
+      test('shift+tab it closes the menu', async () => {
         const initialHighlightedIndex = 2
-        const {input, getItems} = renderCombobox(
+        renderCombobox(
           {initialIsOpen: true, initialHighlightedIndex: 2},
           ui => {
             return (
@@ -956,22 +1030,23 @@ describe('getInputProps', () => {
           },
         )
 
-        userEvent.tab()
+        await tab(true)
 
         expect(getItems()).toHaveLength(0)
-        expect(input).toHaveValue(items[initialHighlightedIndex])
+        expect(getInput()).toHaveValue(items[initialHighlightedIndex])
       })
 
-      test("other than the ones supported don't affect anything", () => {
+      test("other than the ones supported don't affect anything", async () => {
         const highlightedIndex = 2
-        const {keyDownOnInput, input, getItems} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
           initialHighlightedIndex: highlightedIndex,
           initialSelectedItem: items[highlightedIndex],
         })
+        const input = getInput()
 
-        keyDownOnInput('Alt')
-        keyDownOnInput('Control')
+        await keyDownOnInput('{Alt}')
+        await keyDownOnInput('{Control}')
 
         expect(input).toHaveFocus()
         expect(input).toHaveValue(items[highlightedIndex])
@@ -981,55 +1056,161 @@ describe('getInputProps', () => {
         )
         expect(getItems()).toHaveLength(items.length)
       })
+
+      test('pageUp jumps highlight up by 10 options', async () => {
+        const initialHighlightedIndex = 12
+        renderCombobox({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnInput('{PageUp}')
+
+        expect(getInput()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(initialHighlightedIndex - 10),
+        )
+      })
+
+      test('pageUp jumps highlight the first option if highlightedIndex is 10 or smaller', async () => {
+        const initialHighlightedIndex = 7
+        renderCombobox({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnInput('{PageUp}')
+
+        expect(getInput()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(0),
+        )
+      })
+
+      test('pageUp prevents the default event behavior with the menu open', () => {
+        renderCombobox({isOpen: true})
+        const toggleButton = getInput()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'PageUp'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('pageUp does not prevent the default event behavior with the menu closed', () => {
+        renderCombobox()
+        const toggleButton = getInput()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'PageUp'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(false)
+      })
+
+      test('pageDown jumps highlight down by 10 options', async () => {
+        const initialHighlightedIndex = 12
+        renderCombobox({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnInput('{PageDown}')
+
+        expect(getInput()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(initialHighlightedIndex + 10),
+        )
+      })
+
+      test('pageDown jumps highlight the last option if highlightedIndex is closer than 10 indeces to the end', async () => {
+        const initialHighlightedIndex = items.length - 5
+        renderCombobox({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnInput('{PageDown}')
+
+        expect(getInput()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(items.length - 1),
+        )
+      })
+
+      test('pageDown prevents the default event behavior with the menu open', () => {
+        renderCombobox({isOpen: true})
+        const toggleButton = getInput()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {
+          key: 'PageDown',
+        })
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('pageDown does not prevent the default event behavior with the menu closed', () => {
+        renderCombobox()
+        const toggleButton = getInput()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {
+          key: 'PageDown',
+        })
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(false)
+      })
     })
 
     describe('on blur', () => {
-      test('the open menu will be closed and highlighted item will be selected', () => {
+      test('the open menu will be closed and highlighted item will be selected', async () => {
         const initialHighlightedIndex = 2
-        const {input, getItems, blurInput} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
           initialHighlightedIndex,
         })
 
-        blurInput()
+        await tab()
 
         expect(getItems()).toHaveLength(0)
-        expect(input).toHaveValue(items[initialHighlightedIndex])
+        expect(getInput()).toHaveValue(items[initialHighlightedIndex])
       })
 
-      test('the open menu will be closed and highlighted item will not be selected if the highlight by mouse leaves the menu', () => {
+      test('the open menu will be closed and highlighted item will not be selected if the highlight by mouse leaves the menu', async () => {
         const initialHighlightedIndex = 2
-        const {blurInput, mouseLeaveMenu, getItems, input} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
           initialHighlightedIndex,
         })
 
-        mouseLeaveMenu()
-        blurInput()
+        await mouseMoveItemAtIndex(initialHighlightedIndex)
+        await mouseLeaveItemAtIndex(initialHighlightedIndex)
+        await tab()
 
         expect(getItems()).toHaveLength(0)
-        expect(input).toHaveValue('')
+        expect(getInput()).toHaveValue('')
       })
 
-      test('the value in the input will stay the same', () => {
+      test('the value in the input will stay the same', async () => {
         const inputValue = 'test me'
-        const {blurInput, changeInputValue, input} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
         })
 
-        changeInputValue(inputValue)
-        blurInput()
+        await changeInputValue(inputValue)
+        await tab()
 
-        expect(input).toHaveValue(inputValue)
+        expect(getInput()).toHaveValue(inputValue)
       })
 
       test('by mouse is not triggered if target is within downshift', () => {
         const stateReducer = jest.fn().mockImplementation(s => s)
-        const {input, container} = renderCombobox({
+        const {container} = renderCombobox({
           isOpen: true,
           highlightedIndex: 0,
           stateReducer,
         })
+        const input = getInput()
         document.body.appendChild(container)
 
         fireEvent.mouseDown(input)
@@ -1062,11 +1243,12 @@ describe('getInputProps', () => {
 
       test('by touch is not triggered if target is within downshift', () => {
         const stateReducer = jest.fn().mockImplementation(s => s)
-        const {container, input} = renderCombobox({
+        const {container} = renderCombobox({
           isOpen: true,
           highlightedIndex: 0,
           stateReducer,
         })
+        const input = getInput()
         document.body.appendChild(container)
 
         fireEvent.touchStart(input)
@@ -1098,6 +1280,75 @@ describe('getInputProps', () => {
         )
       })
     })
+
+    describe('on focus', () => {
+      test('it opens the menu', async () => {
+        renderCombobox()
+
+        await tab()
+
+        expect(getItems()).toHaveLength(items.length)
+      })
+
+      test('it opens the menu with selected option highlighted', async () => {
+        const selectedIndex = 4
+        renderCombobox({
+          initialSelectedItem: items[selectedIndex],
+        })
+
+        await tab()
+
+        expect(getInput()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(selectedIndex),
+        )
+      })
+
+      test('it opens the closed menu at initialHighlightedIndex, but on first focus only', async () => {
+        const initialHighlightedIndex = 2
+        renderCombobox({
+          initialHighlightedIndex,
+        })
+        const input = getInput()
+
+        await tab()
+
+        expect(input).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(initialHighlightedIndex),
+        )
+
+        await keyDownOnInput('{Escape}')
+        await tab(true)
+        await tab()
+
+        expect(input).toHaveAttribute('aria-activedescendant', '')
+      })
+
+      test('it opens the closed menu at defaultHighlightedIndex, on every focus', async () => {
+        const defaultHighlightedIndex = 3
+        renderCombobox({
+          defaultHighlightedIndex,
+        })
+        const input = getInput()
+
+        await tab()
+
+        expect(input).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(defaultHighlightedIndex),
+        )
+
+        await keyDownOnInput('{Escape}')
+        await tab(true)
+        await tab()
+
+        expect(input).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(defaultHighlightedIndex),
+        )
+      })
+    })
   })
 
   describe('non production errors', () => {
@@ -1111,12 +1362,10 @@ describe('getInputProps', () => {
 
     test('will be displayed if getInputProps is not called', () => {
       renderHook(() => {
-        const {getMenuProps, getComboboxProps} = useCombobox({items})
+        const {getMenuProps} = useCombobox({items})
         getMenuProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
         `downshift: You forgot to call the getInputProps getter function on your component / element.`,
       )
@@ -1125,12 +1374,12 @@ describe('getInputProps', () => {
     test('will not be displayed if getInputProps is not called on subsequent renders', () => {
       let firstRender = true
       const {rerender} = renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
         getMenuProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
 
+        // eslint-disable-next-line jest/no-if
         if (firstRender) {
           firstRender = false
           getInputProps({}, {suppressRefError: true})
@@ -1139,22 +1388,19 @@ describe('getInputProps', () => {
 
       rerender()
 
-      // eslint-disable-next-line no-console
       expect(console.error).not.toHaveBeenCalled()
     })
 
     test('will be displayed if element ref is not set and suppressRefError is false', () => {
       renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
 
         getMenuProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
         getInputProps()
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
         `downshift: The ref prop "ref" from getInputProps was not applied correctly on your element.`,
       )
@@ -1165,12 +1411,11 @@ describe('getInputProps', () => {
       const inputNode = {}
 
       renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
 
         getMenuProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
 
         const {ref} = getInputProps({
           ref: refFn,
@@ -1178,7 +1423,6 @@ describe('getInputProps', () => {
         ref(inputNode)
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error).not.toHaveBeenCalled()
     })
   })
diff --git a/src/hooks/useCombobox/__tests__/getItemProps.test.js b/src/hooks/useCombobox/__tests__/getItemProps.test.js
index 690a7d6fa..c0e4cb144 100644
--- a/src/hooks/useCombobox/__tests__/getItemProps.test.js
+++ b/src/hooks/useCombobox/__tests__/getItemProps.test.js
@@ -1,6 +1,16 @@
 import {act} from '@testing-library/react-hooks'
-import {renderCombobox, renderUseCombobox} from '../testUtils'
-import {items, defaultIds} from '../../testUtils'
+import {
+  renderCombobox,
+  renderUseCombobox,
+  items,
+  defaultIds,
+  mouseMoveItemAtIndex,
+  getItemAtIndex,
+  getInput,
+  getItems,
+  clickOnItemAtIndex,
+  keyDownOnInput,
+} from '../testUtils'
 
 describe('getItemProps', () => {
   test('throws error if no index or item has been passed', () => {
@@ -186,37 +196,37 @@ describe('getItemProps', () => {
 
   describe('event handlers', () => {
     describe('on mouse over', () => {
-      test('it highlights the item', () => {
+      test('it highlights the item', async () => {
         const index = 1
-        const {input, mouseMoveItemAtIndex, getItemAtIndex} = renderCombobox({
+        renderCombobox({
           isOpen: true,
         })
 
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
         expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
       })
 
-      test('it removes highlight from the previously highlighted item', () => {
+      test('it removes highlight from the previously highlighted item', async () => {
         const index = 1
         const previousIndex = 2
-        const {input, mouseMoveItemAtIndex, getItemAtIndex} = renderCombobox({
+        renderCombobox({
           isOpen: true,
           initialHighlightedIndex: previousIndex,
         })
 
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
         expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
         expect(getItemAtIndex(previousIndex)).toHaveAttribute(
           'aria-selected',
           'false',
         )
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
@@ -226,70 +236,73 @@ describe('getItemProps', () => {
         )
       })
 
-      it('keeps highlight on multiple events', () => {
+      it('keeps highlight on multiple events', async () => {
         const index = 1
-        const {input, mouseMoveItemAtIndex, getItemAtIndex} = renderCombobox({
+        renderCombobox({
           isOpen: true,
         })
 
-        mouseMoveItemAtIndex(index)
-        mouseMoveItemAtIndex(index)
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
         expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
       })
 
-      it('removes highlight from previous item even if current item is disabled', () => {
+      it('removes highlight from previous item even if current item is disabled', async () => {
         const disabledIndex = 1
         const highlightedIndex = 2
         const itemsWithDisabled = [...items].map((item, index) =>
           index === disabledIndex ? {...item, disabled: true} : item,
         )
 
-        const {input, mouseMoveItemAtIndex} = renderCombobox({
+        renderCombobox({
           items: itemsWithDisabled,
           isOpen: true,
         })
+        const input = getInput()
 
-        mouseMoveItemAtIndex(highlightedIndex)
+        await mouseMoveItemAtIndex(highlightedIndex)
 
         expect(input).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(highlightedIndex),
         )
 
-        mouseMoveItemAtIndex(disabledIndex)
-        expect(input).not.toHaveAttribute('aria-activedescendant')
+        await mouseMoveItemAtIndex(disabledIndex)
+        expect(input).toHaveAttribute('aria-activedescendant', '')
       })
     })
 
     describe('on click', () => {
-      test('it selects the item and keeps focus on the input', () => {
+      test('it selects the item and keeps focus on the input', async () => {
         const index = 1
-        const {input, getItems, clickOnItemAtIndex} = renderCombobox({
+        renderCombobox({
           initialIsOpen: true,
         })
+        const input = getInput()
 
-        clickOnItemAtIndex(index)
+        await clickOnItemAtIndex(index)
 
         expect(getItems()).toHaveLength(0)
         expect(input).toHaveValue(items[index])
         expect(input).toHaveFocus()
       })
 
-      test('it selects the item and resets to user defined defaults', () => {
+      test('it selects the item and resets to user defined defaults', async () => {
         const index = 1
         const defaultHighlightedIndex = 2
-        const {input, getItems, clickOnItemAtIndex} = renderCombobox({
+        renderCombobox({
           defaultIsOpen: true,
           defaultHighlightedIndex,
         })
+        const input = getInput()
 
-        clickOnItemAtIndex(index)
+        await clickOnItemAtIndex(index)
 
         expect(input).toHaveValue(items[index])
         expect(getItems()).toHaveLength(items.length)
@@ -302,14 +315,14 @@ describe('getItemProps', () => {
   })
 
   describe('scrolling', () => {
-    test('is performed by the menu to the item if highlighted and not 100% visible', () => {
+    test('is performed by the menu to the item if highlighted and not 100% visible', async () => {
       const scrollIntoView = jest.fn()
-      const {keyDownOnInput} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         scrollIntoView,
       })
 
-      keyDownOnInput('End')
+      await keyDownOnInput('{End}')
 
       expect(scrollIntoView).toHaveBeenCalledTimes(1)
     })
diff --git a/src/hooks/useCombobox/__tests__/getMenuProps.test.js b/src/hooks/useCombobox/__tests__/getMenuProps.test.js
index f82228587..7e23a99be 100644
--- a/src/hooks/useCombobox/__tests__/getMenuProps.test.js
+++ b/src/hooks/useCombobox/__tests__/getMenuProps.test.js
@@ -1,8 +1,12 @@
 import {act, renderHook} from '@testing-library/react-hooks'
 import {noop} from '../../../utils'
-import {renderCombobox, renderUseCombobox} from '../testUtils'
-import {defaultIds, items} from '../../testUtils'
-// eslint-disable-next-line import/default
+import {getInput, renderCombobox, renderUseCombobox} from '../testUtils'
+import {
+  defaultIds,
+  items,
+  mouseLeaveItemAtIndex,
+  mouseMoveItemAtIndex,
+} from '../../testUtils'
 import utils from '../../utils'
 import useCombobox from '..'
 
@@ -104,15 +108,17 @@ describe('getMenuProps', () => {
   describe('event handlers', () => {
     describe('on key down', () => {
       describe('on mouse leave', () => {
-        test('the highlightedIndex should be reset', () => {
-          const {mouseLeaveMenu, input} = renderCombobox({
+        test('the highlightedIndex should be reset', async () => {
+          const initialHighlightedIndex = 2
+          renderCombobox({
             initialIsOpen: true,
-            initialHighlightedIndex: 2,
+            initialHighlightedIndex,
           })
 
-          mouseLeaveMenu()
+          await mouseMoveItemAtIndex(initialHighlightedIndex)
+          await mouseLeaveItemAtIndex(initialHighlightedIndex)
 
-          expect(input).not.toHaveAttribute('aria-activedescendant')
+          expect(getInput()).toHaveAttribute('aria-activedescendant', '')
         })
       })
     })
@@ -129,9 +135,8 @@ describe('getMenuProps', () => {
 
     test('will be displayed if getMenuProps is not called', () => {
       renderHook(() => {
-        const {getInputProps, getComboboxProps} = useCombobox({items})
+        const {getInputProps} = useCombobox({items})
         getInputProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
       })
 
       // eslint-disable-next-line no-console
@@ -143,12 +148,12 @@ describe('getMenuProps', () => {
     test('will not be displayed if getMenuProps is not called on subsequent renders', () => {
       let firstRender = true
       const {rerender} = renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
-        getComboboxProps({}, {suppressRefError: true})
         getInputProps({}, {suppressRefError: true})
 
+        // eslint-disable-next-line jest/no-if
         if (firstRender) {
           firstRender = false
           getMenuProps({}, {suppressRefError: true})
@@ -163,12 +168,11 @@ describe('getMenuProps', () => {
 
     test('will be displayed if element ref is not set and suppressRefError is false', () => {
       renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
 
         getInputProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
         getMenuProps()
       })
 
@@ -183,12 +187,11 @@ describe('getMenuProps', () => {
       const menuNode = {}
 
       renderHook(() => {
-        const {getInputProps, getMenuProps, getComboboxProps} = useCombobox({
+        const {getInputProps, getMenuProps} = useCombobox({
           items,
         })
 
         getInputProps({}, {suppressRefError: true})
-        getComboboxProps({}, {suppressRefError: true})
 
         const {ref} = getMenuProps({
           ref: refFn,
diff --git a/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js b/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js
index 3d13eb068..74aff9555 100644
--- a/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js
+++ b/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js
@@ -1,7 +1,13 @@
-/* eslint-disable jest/no-disabled-tests */
 import {act} from '@testing-library/react-hooks'
-import {renderCombobox, renderUseCombobox} from '../testUtils'
-import {items, defaultIds} from '../../testUtils'
+import {
+  renderCombobox,
+  renderUseCombobox,
+  items,
+  defaultIds,
+  clickOnToggleButton,
+  getInput,
+  getItems,
+} from '../testUtils'
 
 describe('getToggleButtonProps', () => {
   describe('hook props', () => {
@@ -22,6 +28,45 @@ describe('getToggleButtonProps', () => {
       expect(toggleButtonProps.id).toEqual(props.toggleButtonId)
     })
 
+    test('assign tabindex of -1', () => {
+      const {result} = renderUseCombobox()
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps.tabIndex).toEqual(-1)
+    })
+
+    test('assign default value to aria-controls', () => {
+      const {result} = renderUseCombobox()
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-controls']).toEqual(`${defaultIds.menuId}`)
+    })
+
+    test('assign custom value passed by user to aria-controls', () => {
+      const props = {
+        menuId: 'my-custom-menu-id',
+      }
+      const {result} = renderUseCombobox(props)
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-controls']).toEqual(`${props.menuId}`)
+    })
+
+    test("assign 'false' value to aria-expanded when menu is closed", () => {
+      const {result} = renderUseCombobox({isOpen: false})
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-expanded']).toEqual(false)
+    })
+
+    test("assign 'true' value to aria-expanded when menu is open", () => {
+      const {result} = renderUseCombobox({isOpen: true})
+
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-expanded']).toEqual(true)
+    })
+
     test('omit event handlers when disabled', () => {
       const {result} = renderUseCombobox()
       const toggleButtonProps = result.current.getToggleButtonProps({
@@ -29,7 +74,6 @@ describe('getToggleButtonProps', () => {
       })
 
       expect(toggleButtonProps.onClick).toBeUndefined()
-      // eslint-disable-next-line jest-dom/prefer-enabled-disabled
       expect(toggleButtonProps.disabled).toBe(true)
     })
   })
@@ -81,100 +125,101 @@ describe('getToggleButtonProps', () => {
 
   describe('event handlers', () => {
     describe('on click', () => {
-      test('opens the closed menu', () => {
-        const {getItems, clickOnToggleButton} = renderCombobox()
+      test('opens the closed menu', async () => {
+        renderCombobox()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
       })
 
-      test('closes the open menu', () => {
-        const {getItems, clickOnToggleButton} = renderCombobox({
+      test('closes the open menu', async () => {
+        renderCombobox({
           initialIsOpen: true,
         })
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
       })
 
-      test('opens and closes menu at consecutive clicks', () => {
-        const {getItems, clickOnToggleButton} = renderCombobox()
+      test('opens and closes menu at consecutive clicks', async () => {
+        renderCombobox()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
       })
 
-      test('opens the closed menu without any option highlighted', () => {
-        const {input, clickOnToggleButton} = renderCombobox()
+      test('opens the closed menu without any option highlighted', async () => {
+        renderCombobox()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(input).not.toHaveAttribute('aria-activedescendant')
+        expect(getInput()).toHaveAttribute('aria-activedescendant', '')
       })
 
-      test('opens the closed menu with selected option highlighted', () => {
+      test('opens the closed menu with selected option highlighted', async () => {
         const selectedIndex = 3
-        const {input, clickOnToggleButton} = renderCombobox({
+        renderCombobox({
           initialSelectedItem: items[selectedIndex],
         })
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(selectedIndex),
         )
       })
 
-      test('opens the closed menu at initialHighlightedIndex, but on first click only', () => {
+      test('opens the closed menu at initialHighlightedIndex, but on first click only', async () => {
         const initialHighlightedIndex = 3
-        const {input, clickOnToggleButton} = renderCombobox({
+        renderCombobox({
           initialHighlightedIndex,
         })
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(input).toHaveAttribute(
+        expect(getInput()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(initialHighlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(input).not.toHaveAttribute('aria-activedescendant')
+        expect(getInput()).toHaveAttribute('aria-activedescendant', '')
       })
 
-      test('opens the closed menu at defaultHighlightedIndex, on every click', () => {
+      test('opens the closed menu at defaultHighlightedIndex, on every click', async () => {
         const defaultHighlightedIndex = 3
-        const {input, clickOnToggleButton} = renderCombobox({
+        renderCombobox({
           defaultHighlightedIndex,
         })
+        const input = getInput()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(input).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(defaultHighlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(input).toHaveAttribute(
           'aria-activedescendant',
@@ -182,21 +227,22 @@ describe('getToggleButtonProps', () => {
         )
       })
 
-      test('opens the closed menu at highlightedIndex from props, on every click', () => {
+      test('opens the closed menu at highlightedIndex from props, on every click', async () => {
         const highlightedIndex = 3
-        const {input, clickOnToggleButton} = renderCombobox({
+        renderCombobox({
           highlightedIndex,
         })
+        const input = getInput()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(input).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(highlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(input).toHaveAttribute(
           'aria-activedescendant',
@@ -204,12 +250,12 @@ describe('getToggleButtonProps', () => {
         )
       })
 
-      test('opens the closed menu and sets focus on the input', () => {
-        const {clickOnToggleButton, input} = renderCombobox()
+      test('opens the closed menu and sets focus on the input', async () => {
+        renderCombobox()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
     })
   })
diff --git a/src/hooks/useCombobox/__tests__/memo.test.js b/src/hooks/useCombobox/__tests__/memo.test.js
index a7bbdc156..641fb5c9d 100644
--- a/src/hooks/useCombobox/__tests__/memo.test.js
+++ b/src/hooks/useCombobox/__tests__/memo.test.js
@@ -1,5 +1,10 @@
 import React from 'react'
-import {renderUseCombobox, renderCombobox} from '../testUtils'
+import {
+  renderUseCombobox,
+  renderCombobox,
+  getInput,
+  keyDownOnInput,
+} from '../testUtils'
 import {items, defaultIds, MemoizedItem} from '../../testUtils'
 
 test('functions are memoized', () => {
@@ -10,7 +15,7 @@ test('functions are memoized', () => {
   expect(firstRenderResult).toEqual(secondRenderResult)
 })
 
-test('will skip disabled items after component rerenders and items are memoized', () => {
+test('will skip disabled items after component rerenders and items are memoized', async () => {
   function renderItem(props) {
     return (
       <MemoizedItem
@@ -21,16 +26,16 @@ test('will skip disabled items after component rerenders and items are memoized'
     )
   }
 
-  const {keyDownOnInput, input, rerender} = renderCombobox({
+  const {rerender} = renderCombobox({
     isOpen: true,
     initialHighlightedIndex: items.length - 1,
     renderItem,
   })
 
   rerender({renderItem, isOpen: true})
-  keyDownOnInput('ArrowUp')
+  await keyDownOnInput('{ArrowUp}')
 
-  expect(input).toHaveAttribute(
+  expect(getInput()).toHaveAttribute(
     'aria-activedescendant',
     defaultIds.getItemId(items.length - 3),
   )
diff --git a/src/hooks/useCombobox/__tests__/props.test.js b/src/hooks/useCombobox/__tests__/props.test.js
index 1d2d7b4d4..b31df5c1b 100644
--- a/src/hooks/useCombobox/__tests__/props.test.js
+++ b/src/hooks/useCombobox/__tests__/props.test.js
@@ -1,13 +1,27 @@
 import React from 'react'
 import {renderHook, act as hooksAct} from '@testing-library/react-hooks'
 import {act} from '@testing-library/react'
-import {renderCombobox, renderUseCombobox} from '../testUtils'
-import * as stateChangeTypes from '../stateChangeTypes'
 import {
+  renderCombobox,
+  renderUseCombobox,
   items,
   defaultIds,
   waitForDebouncedA11yStatusUpdate,
-} from '../../testUtils'
+  getToggleButton,
+  getMenu,
+  getLabel,
+  getInput,
+  getItems,
+  clickOnItemAtIndex,
+  getA11yStatusContainer,
+  keyDownOnInput,
+  clickOnToggleButton,
+  changeInputValue,
+  mouseMoveItemAtIndex,
+  mouseLeaveItemAtIndex,
+  tab,
+} from '../testUtils'
+import * as stateChangeTypes from '../stateChangeTypes'
 import useCombobox from '..'
 
 describe('props', () => {
@@ -22,10 +36,10 @@ describe('props', () => {
 
   describe('id', () => {
     test('if passed will override downshift default', () => {
-      const {toggleButton, menu, label, input} = renderCombobox({
+      renderCombobox({
         id: 'my-custom-little-id',
       })
-      const elements = [toggleButton, menu, label, input]
+      const elements = [getToggleButton(), getMenu(), getLabel(), getInput()]
 
       elements.forEach(element => {
         expect(element).toHaveAttribute(
@@ -38,20 +52,20 @@ describe('props', () => {
 
   describe('items', () => {
     test('if passed as empty then menu will not open', () => {
-      const {getItems} = renderCombobox({items: [], isOpen: true})
+      renderCombobox({items: [], isOpen: true})
 
       expect(getItems()).toHaveLength(0)
     })
 
-    test('passed as objects should work with custom itemToString', () => {
+    test('passed as objects should work with custom itemToString', async () => {
       jest.useFakeTimers()
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderCombobox({
+      renderCombobox({
         items: [{str: 'aaa'}, {str: 'bbb'}],
         itemToString: item => item.str,
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -61,14 +75,14 @@ describe('props', () => {
   })
 
   describe('itemToString', () => {
-    test('should provide string version to a11y status message', () => {
+    test('should provide string version to a11y status message', async () => {
       jest.useFakeTimers()
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderCombobox({
+      renderCombobox({
         itemToString: () => 'custom-item',
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -84,13 +98,13 @@ describe('props', () => {
     })
     afterAll(jest.useRealTimers)
 
-    test('reports that an item has been selected', () => {
+    test('reports that an item has been selected', async () => {
       const itemIndex = 0
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(itemIndex)
+      await clickOnItemAtIndex(itemIndex)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -98,24 +112,24 @@ describe('props', () => {
       )
     })
 
-    test('reports nothing if item is removed', () => {
-      const {keyDownOnInput, getA11yStatusContainer} = renderCombobox({
+    test('reports nothing if item is removed', async () => {
+      renderCombobox({
         initialSelectedItem: items[0],
       })
 
-      keyDownOnInput('Escape')
+      await keyDownOnInput('{Escape}')
       waitForDebouncedA11yStatusUpdate()
       jest.runAllTimers()
 
       expect(getA11yStatusContainer()).toBeEmptyDOMElement()
     })
 
-    test('is called with object that contains specific props', () => {
+    test('is called with object that contains specific props', async () => {
       const getA11ySelectionMessage = jest.fn()
       const inputValue = 'a'
       const isOpen = true
       const highlightedIndex = 0
-      const {clickOnItemAtIndex} = renderCombobox({
+      renderCombobox({
         inputValue,
         isOpen,
         highlightedIndex,
@@ -123,7 +137,7 @@ describe('props', () => {
         getA11ySelectionMessage,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11ySelectionMessage).toHaveBeenCalledWith({
@@ -138,13 +152,13 @@ describe('props', () => {
       })
     })
 
-    test('is replaced with the user provided one', () => {
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderCombobox({
+    test('is replaced with the user provided one', async () => {
+      renderCombobox({
         isOpen: true,
         getA11ySelectionMessage: () => 'custom message',
       })
 
-      clickOnItemAtIndex(3)
+      await clickOnItemAtIndex(3)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent('custom message')
@@ -158,12 +172,12 @@ describe('props', () => {
     })
     afterAll(jest.useRealTimers)
 
-    test('reports that no results are available if items list is empty', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox({
+    test('reports that no results are available if items list is empty', async () => {
+      renderCombobox({
         items: [],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -171,12 +185,12 @@ describe('props', () => {
       )
     })
 
-    test('reports that one result is available if one item is shown', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox({
+    test('reports that one result is available if one item is shown', async () => {
+      renderCombobox({
         items: ['bla'],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -184,12 +198,12 @@ describe('props', () => {
       )
     })
 
-    test('reports the number of results available if more than one item are shown', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox({
+    test('reports the number of results available if more than one item are shown', async () => {
+      renderCombobox({
         items: ['bla', 'blabla'],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -197,48 +211,48 @@ describe('props', () => {
       )
     })
 
-    test('is empty on menu close', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox({
+    test('is empty on menu close', async () => {
+      renderCombobox({
         items: ['bla', 'blabla'],
         initialIsOpen: true,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toBeEmptyDOMElement()
     })
 
-    test('is removed after 500ms as a cleanup', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox()
+    test('is removed after 500ms as a cleanup', async () => {
+      renderCombobox()
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
       act(() => jest.advanceTimersByTime(500))
 
       expect(getA11yStatusContainer()).toHaveTextContent('')
     })
 
-    test('is replaced with the user provided one', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderCombobox({
+    test('is replaced with the user provided one', async () => {
+      renderCombobox({
         getA11yStatusMessage: () => 'custom message',
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent('custom message')
     })
 
-    test('is called with previousResultCount that gets updated correctly', () => {
+    test('is called with previousResultCount that gets updated correctly', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputItems = ['aaa', 'bbb']
-      const {clickOnToggleButton, changeInputValue} = renderCombobox({
+      renderCombobox({
         getA11yStatusMessage,
         items: inputItems,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)
@@ -250,7 +264,7 @@ describe('props', () => {
       )
 
       inputItems.pop()
-      changeInputValue('a')
+      await changeInputValue('a')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(2)
@@ -262,19 +276,19 @@ describe('props', () => {
       )
     })
 
-    test('is called with object that contains specific props at toggle', () => {
+    test('is called with object that contains specific props at toggle', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputValue = 'a'
       const highlightedIndex = 1
       const initialSelectedItem = items[highlightedIndex]
-      const {clickOnToggleButton} = renderCombobox({
+      renderCombobox({
         inputValue,
         initialSelectedItem,
         items,
         getA11yStatusMessage,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith({
@@ -289,7 +303,7 @@ describe('props', () => {
       })
     })
 
-    test('is added to the document provided by the user as prop', () => {
+    test('is added to the document provided by the user as prop', async () => {
       const environment = {
         document: {
           getElementById: jest.fn(() => ({
@@ -300,23 +314,18 @@ describe('props', () => {
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
       }
-      const {clickOnToggleButton} = renderCombobox({items: [], environment})
+      renderCombobox({items: [], environment})
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(environment.document.getElementById).toHaveBeenCalledTimes(1)
     })
 
-    test('is called when isOpen, highlightedIndex, inputValue or items change', () => {
+    test('is called when isOpen, highlightedIndex, inputValue or items change', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputItems = ['aaa', 'bbb']
-      const {
-        clickOnToggleButton,
-        rerender,
-        keyDownOnInput,
-        changeInputValue,
-      } = renderCombobox({
+      const {rerender} = renderCombobox({
         getA11yStatusMessage,
         items,
       })
@@ -326,7 +335,7 @@ describe('props', () => {
       expect(getA11yStatusMessage).not.toHaveBeenCalled()
 
       // should not be called when any other prop is changed.
-      rerender({getA11yStatusMessage, items, circularNavigation: false})
+      rerender({getA11yStatusMessage, items})
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).not.toHaveBeenCalled()
@@ -339,7 +348,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -347,7 +356,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(2)
 
-      changeInputValue('b')
+      await changeInputValue('b')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -355,7 +364,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(3)
 
-      keyDownOnInput('ArrowDown')
+      await keyDownOnInput('{ArrowDown}')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -365,55 +374,50 @@ describe('props', () => {
     })
   })
 
-  describe('highlightedIndex', () => {
-    test('controls the state property if passed', () => {
-      const highlightedIndex = 1
-      const expectedItemId = defaultIds.getItemId(highlightedIndex)
-      const {keyDownOnInput, input} = renderCombobox({
-        isOpen: true,
-        highlightedIndex,
-      })
+  test('highlightedIndex controls the state property if passed', async () => {
+    const highlightedIndex = 1
+    const expectedItemId = defaultIds.getItemId(highlightedIndex)
+    renderCombobox({
+      isOpen: true,
+      highlightedIndex,
+    })
+    const input = getInput()
 
-      expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
+    expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
 
-      keyDownOnInput('ArrowDown')
+    await keyDownOnInput('{ArrowDown}')
 
-      expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
+    expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
 
-      keyDownOnInput('End')
+    await keyDownOnInput('{End}')
 
-      expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
+    expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
 
-      keyDownOnInput('ArrowUp')
+    await keyDownOnInput('{ArrowUp}')
 
-      expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
-    })
+    expect(input).toHaveAttribute('aria-activedescendant', expectedItemId)
   })
 
   describe('inputValue', () => {
-    test('controls the state property if passed', () => {
-      const {
-        keyDownOnInput,
-        input,
-        blurInput,
-        clickOnItemAtIndex,
-      } = renderCombobox({isOpen: true, inputValue: 'Dohn Joe'})
+    test('controls the state property if passed', async () => {
+      renderCombobox({isOpen: true, inputValue: 'Dohn Joe'})
+      const input = getInput()
 
-      keyDownOnInput('ArrowDown')
-      keyDownOnInput('Enter')
+      await keyDownOnInput('{ArrowDown}')
+      await keyDownOnInput('{Enter}')
 
       expect(input).toHaveValue('Dohn Joe')
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
 
       expect(input).toHaveValue('Dohn Joe')
 
-      keyDownOnInput('ArrowUp')
-      keyDownOnInput('Enter')
+      await keyDownOnInput('{ArrowUp}')
+      await keyDownOnInput('{Enter}')
 
       expect(input).toHaveValue('Dohn Joe')
 
-      blurInput()
+      await tab()
 
       expect(input).toHaveValue('Dohn Joe')
     })
@@ -421,10 +425,11 @@ describe('props', () => {
     test('is changed once a new selectedItem comes from props', () => {
       const initialSelectedItem = 'John Doe'
       const finalSelectedItem = 'John Wick'
-      const {rerender, input} = renderCombobox({
+      const {rerender} = renderCombobox({
         isOpen: true,
         selectedItem: initialSelectedItem,
       })
+      const input = getInput()
 
       expect(input).toHaveValue(initialSelectedItem)
 
@@ -434,68 +439,56 @@ describe('props', () => {
     })
   })
 
-  describe('isOpen', () => {
-    test('controls the state property if passed', () => {
-      const {
-        clickOnToggleButton,
-        getItems,
-        blurInput,
-        keyDownOnInput,
-      } = renderCombobox({isOpen: true})
+  test('isOpen controls the state property if passed', async () => {
+    renderCombobox({isOpen: true})
 
-      expect(getItems()).toHaveLength(items.length)
+    expect(getItems()).toHaveLength(items.length)
 
-      clickOnToggleButton()
+    await clickOnToggleButton()
 
-      expect(getItems()).toHaveLength(items.length)
+    expect(getItems()).toHaveLength(items.length)
 
-      keyDownOnInput('Escape')
+    await keyDownOnInput('{Escape}')
 
-      expect(getItems()).toHaveLength(items.length)
+    expect(getItems()).toHaveLength(items.length)
 
-      blurInput()
+    await tab()
 
-      expect(getItems()).toHaveLength(items.length)
-    })
+    expect(getItems()).toHaveLength(items.length)
   })
 
-  describe('selectedItem', () => {
-    test('controls the state property if passed', () => {
-      const selectedItem = items[2]
-      const {
-        keyDownOnInput,
-        input,
-        clickOnItemAtIndex,
-        clickOnToggleButton,
-      } = renderCombobox({
-        selectedItem,
-        initialIsOpen: true,
-      })
+  test('selectedItem controls the state property if passed', async () => {
+    const selectedItem = items[2]
 
-      expect(input).toHaveValue(selectedItem)
+    renderCombobox({
+      selectedItem,
+      initialIsOpen: true,
+    })
+    const input = getInput()
 
-      keyDownOnInput('ArrowDown')
-      keyDownOnInput('Enter')
-      clickOnToggleButton()
+    expect(input).toHaveValue(selectedItem)
 
-      expect(input).toHaveValue(selectedItem)
+    await keyDownOnInput('{ArrowDown}')
+    await keyDownOnInput('{Enter}')
+    await clickOnToggleButton()
 
-      keyDownOnInput('ArrowUp')
-      keyDownOnInput('Enter')
-      clickOnToggleButton()
+    expect(input).toHaveValue(selectedItem)
 
-      expect(input).toHaveValue(selectedItem)
+    await keyDownOnInput('{ArrowUp}')
+    await keyDownOnInput('{Enter}')
+    await clickOnToggleButton()
 
-      keyDownOnInput('Escape')
-      clickOnToggleButton()
+    expect(input).toHaveValue(selectedItem)
 
-      expect(input).toHaveValue(selectedItem)
+    await keyDownOnInput('{Escape}')
+    await clickOnToggleButton()
 
-      clickOnItemAtIndex(1)
-      clickOnToggleButton()
+    expect(input).toHaveValue(selectedItem)
 
-      expect(input).toHaveValue(selectedItem)
-    })
+    await clickOnItemAtIndex(1)
+    await clickOnToggleButton()
+
+    expect(input).toHaveValue(selectedItem)
   })
 
   describe('stateReducer', () => {
@@ -582,17 +575,9 @@ describe('props', () => {
       )
     })
 
-    test('is called at each state change with the appropriate change type', () => {
+    test('is called at each state change with the appropriate change type', async () => {
       const stateReducer = jest.fn((s, a) => a.changes)
-      const {
-        clickOnToggleButton,
-        changeInputValue,
-        clickOnItemAtIndex,
-        mouseLeaveMenu,
-        mouseMoveItemAtIndex,
-        keyDownOnInput,
-        blurInput,
-      } = renderCombobox({stateReducer})
+      renderCombobox({stateReducer})
       const initialState = {
         isOpen: false,
         highlightedIndex: -1,
@@ -601,45 +586,77 @@ describe('props', () => {
       }
       const testCases = [
         {
-          step: clickOnToggleButton,
+          step: tab,
           state: {
             isOpen: true,
             highlightedIndex: -1,
             inputValue: '',
             selectedItem: null,
           },
-          type: stateChangeTypes.ToggleButtonClick,
+          type: stateChangeTypes.InputFocus,
         },
         {
-          step: mouseMoveItemAtIndex,
-          args: 2,
+          step: tab,
           state: {
-            isOpen: true,
-            highlightedIndex: 2,
+            isOpen: false,
+            highlightedIndex: -1,
             inputValue: '',
             selectedItem: null,
           },
-          type: stateChangeTypes.ItemMouseMove,
+          type: stateChangeTypes.InputBlur,
         },
         {
-          step: mouseLeaveMenu,
+          step: tab,
           state: {
             isOpen: true,
             highlightedIndex: -1,
             inputValue: '',
             selectedItem: null,
           },
-          type: stateChangeTypes.MenuMouseLeave,
+          type: stateChangeTypes.InputFocus,
         },
         {
-          step: blurInput,
+          step: keyDownOnInput,
+          args: '{Enter}',
           state: {
             isOpen: false,
             highlightedIndex: -1,
             inputValue: '',
             selectedItem: null,
           },
-          type: stateChangeTypes.InputBlur,
+          type: stateChangeTypes.InputKeyDownEnter,
+        },
+        {
+          step: clickOnToggleButton,
+          state: {
+            isOpen: true,
+            highlightedIndex: -1,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.ToggleButtonClick,
+        },
+        {
+          step: mouseMoveItemAtIndex,
+          args: 2,
+          state: {
+            isOpen: true,
+            highlightedIndex: 2,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.ItemMouseMove,
+        },
+        {
+          step: mouseLeaveItemAtIndex,
+          args: 2,
+          state: {
+            isOpen: true,
+            highlightedIndex: -1,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.MenuMouseLeave,
         },
         {
           step: changeInputValue,
@@ -654,7 +671,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'ArrowDown',
+          args: '{ArrowDown}',
           state: {
             isOpen: true,
             highlightedIndex: 0,
@@ -665,7 +682,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'Enter',
+          args: '{Enter}',
           state: {
             isOpen: false,
             highlightedIndex: -1,
@@ -676,7 +693,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'Escape',
+          args: '{Escape}',
           state: {
             isOpen: false,
             highlightedIndex: -1,
@@ -687,7 +704,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'ArrowDown',
+          args: '{ArrowDown}',
           state: {
             isOpen: true,
             highlightedIndex: 0,
@@ -698,7 +715,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'ArrowUp',
+          args: '{ArrowUp}',
           state: {
             isOpen: true,
             highlightedIndex: items.length - 1,
@@ -709,7 +726,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'Home',
+          args: '{Home}',
           state: {
             isOpen: true,
             highlightedIndex: 0,
@@ -720,7 +737,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'End',
+          args: '{End}',
           state: {
             isOpen: true,
             highlightedIndex: items.length - 1,
@@ -729,6 +746,39 @@ describe('props', () => {
           },
           type: stateChangeTypes.InputKeyDownEnd,
         },
+        {
+          step: mouseMoveItemAtIndex,
+          args: 3,
+          state: {
+            isOpen: true,
+            highlightedIndex: 3,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.ItemMouseMove,
+        },
+        {
+          step: keyDownOnInput,
+          args: '{PageDown}',
+          state: {
+            isOpen: true,
+            highlightedIndex: 13,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.InputKeyDownPageDown,
+        },
+        {
+          step: keyDownOnInput,
+          args: '{PageUp}',
+          state: {
+            isOpen: true,
+            highlightedIndex: 3,
+            inputValue: '',
+            selectedItem: null,
+          },
+          type: stateChangeTypes.InputKeyDownPageUp,
+        },
         {
           step: clickOnItemAtIndex,
           args: 3,
@@ -742,10 +792,10 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'ArrowUp',
+          args: '{ArrowUp}',
           state: {
             isOpen: true,
-            highlightedIndex: 2,
+            highlightedIndex: 3,
             inputValue: items[3],
             selectedItem: items[3],
           },
@@ -753,7 +803,7 @@ describe('props', () => {
         },
         {
           step: keyDownOnInput,
-          args: 'Escape',
+          args: '{Escape}',
           state: {
             isOpen: false,
             highlightedIndex: -1,
@@ -770,7 +820,8 @@ describe('props', () => {
         const {step, state, args, type} = testCases[index]
         const previousState = testCases[index - 1]?.state ?? initialState
 
-        step(args)
+        // eslint-disable-next-line no-await-in-loop
+        await step(args)
 
         expect(stateReducer).toHaveBeenCalledTimes(index + 1)
         expect(stateReducer).toHaveBeenLastCalledWith(
@@ -780,21 +831,21 @@ describe('props', () => {
       }
     })
 
-    test('replaces prop values with user defined', () => {
+    test('replaces prop values with user defined', async () => {
       const inputValue = 'Robin Hood'
       const stateReducer = jest.fn((s, a) => {
         const changes = a.changes
         changes.inputValue = inputValue
         return changes
       })
-      const {clickOnToggleButton, input} = renderCombobox({stateReducer})
+      renderCombobox({stateReducer})
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
-      expect(input).toHaveValue('Robin Hood')
+      expect(getInput()).toHaveValue('Robin Hood')
     })
 
-    test('receives state, changes and type', () => {
+    test('receives state, changes and type', async () => {
       const stateReducer = jest.fn((s, a) => {
         expect(a.type).not.toBeUndefined()
         expect(a.type).not.toBeNull()
@@ -807,12 +858,12 @@ describe('props', () => {
 
         return a.changes
       })
-      const {clickOnToggleButton} = renderCombobox({stateReducer})
+      renderCombobox({stateReducer})
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
     })
 
-    test('changes are visible in onChange handlers', () => {
+    test('changes are visible in onChange handlers', async () => {
       const highlightedIndex = 2
       const selectedItem = {foo: 'bar'}
       const isOpen = true
@@ -828,7 +879,7 @@ describe('props', () => {
       const onHighlightedIndexChange = jest.fn()
       const onIsOpenChange = jest.fn()
       const onStateChange = jest.fn()
-      const {clickOnToggleButton} = renderCombobox({
+      renderCombobox({
         stateReducer,
         onStateChange,
         onSelectedItemChange,
@@ -837,7 +888,7 @@ describe('props', () => {
         onInputValueChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onInputValueChange).toHaveBeenCalledTimes(1)
       expect(onInputValueChange).toHaveBeenCalledWith(
@@ -874,14 +925,14 @@ describe('props', () => {
   })
 
   describe('onInputValueChange', () => {
-    test('is called at inputValue change', () => {
+    test('is called at inputValue change', async () => {
       const inputValue = 'test'
       const onInputValueChange = jest.fn()
-      const {changeInputValue} = renderCombobox({
+      renderCombobox({
         onInputValueChange,
       })
 
-      changeInputValue(inputValue)
+      await changeInputValue(inputValue)
 
       expect(onInputValueChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -890,33 +941,33 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if inputValue is the same', () => {
+    test('is not called at if inputValue is the same', async () => {
       const inputValue = items[0]
       const onInputValueChange = jest.fn()
-      const {clickOnItemAtIndex} = renderCombobox({
+      renderCombobox({
         initialInputValue: inputValue,
         initialIsOpen: true,
         onInputValueChange,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
 
       expect(onInputValueChange).not.toHaveBeenCalled()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let inputValue = 'nep'
-      const {changeInputValue, input, rerender} = renderCombobox({
+      const {rerender} = renderCombobox({
         inputValue,
         onSelectedItemChange: changes => {
           inputValue = changes.inputValue
         },
       })
 
-      changeInputValue('nept')
+      await changeInputValue('nept')
       rerender({inputValue})
 
-      expect(input).toHaveValue(inputValue)
+      expect(getInput()).toHaveValue(inputValue)
     })
 
     test('can have downshift actions executed', () => {
@@ -936,15 +987,15 @@ describe('props', () => {
   })
 
   describe('onSelectedItemChange', () => {
-    test('is called at selectedItem change', () => {
+    test('is called at selectedItem change', async () => {
       const itemIndex = 0
       const onSelectedItemChange = jest.fn()
-      const {clickOnItemAtIndex} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         onSelectedItemChange,
       })
 
-      clickOnItemAtIndex(itemIndex)
+      await clickOnItemAtIndex(itemIndex)
 
       expect(onSelectedItemChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -954,24 +1005,24 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if selectedItem is the same', () => {
+    test('is not called at if selectedItem is the same', async () => {
       const itemIndex = 0
       const onSelectedItemChange = jest.fn()
-      const {clickOnItemAtIndex} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         initialSelectedItem: items[itemIndex],
         onSelectedItemChange,
       })
 
-      clickOnItemAtIndex(itemIndex)
+      await clickOnItemAtIndex(itemIndex)
 
       expect(onSelectedItemChange).not.toHaveBeenCalled()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let selectedItem = items[2]
       const selectionIndex = 3
-      const {clickOnItemAtIndex, input, rerender} = renderCombobox({
+      const {rerender} = renderCombobox({
         initialIsOpen: true,
         selectedItem,
         onSelectedItemChange: changes => {
@@ -979,21 +1030,21 @@ describe('props', () => {
         },
       })
 
-      clickOnItemAtIndex(selectionIndex)
+      await clickOnItemAtIndex(selectionIndex)
       rerender({selectedItem})
 
-      expect(input).toHaveValue(items[selectionIndex])
+      expect(getInput()).toHaveValue(items[selectionIndex])
     })
 
-    test('works correctly with the corresponding control prop in strict mode', () => {
+    test('works correctly with the corresponding control prop in strict mode', async () => {
       const onSelectedItemChange = jest.fn()
       const itemIndex = 0
-      const {clickOnItemAtIndex} = renderCombobox(
+      renderCombobox(
         {selectedItem: null, initialIsOpen: true, onSelectedItemChange},
         ui => <React.StrictMode>{ui}</React.StrictMode>,
       )
 
-      clickOnItemAtIndex(itemIndex)
+      await clickOnItemAtIndex(itemIndex)
 
       expect(onSelectedItemChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1019,14 +1070,14 @@ describe('props', () => {
   })
 
   describe('onHighlightedIndexChange', () => {
-    test('is called at each highlightedIndex change', () => {
+    test('is called at each highlightedIndex change', async () => {
       const onHighlightedIndexChange = jest.fn()
-      const {keyDownOnInput} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         onHighlightedIndexChange,
       })
 
-      keyDownOnInput('ArrowDown')
+      await keyDownOnInput('{ArrowDown}')
 
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1036,37 +1087,32 @@ describe('props', () => {
       )
     })
 
-    test('is not called if highlightedIndex is the same', () => {
+    test('is not called if highlightedIndex is the same', async () => {
       const onHighlightedIndexChange = jest.fn()
-      const {keyDownOnInput, mouseMoveItemAtIndex} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         initialHighlightedIndex: 0,
         onHighlightedIndexChange,
-        circularNavigation: false,
       })
 
-      keyDownOnInput('ArrowUp')
+      await keyDownOnInput('{Home}')
 
       expect(onHighlightedIndexChange).not.toHaveBeenCalled()
 
-      keyDownOnInput('Home')
-
-      expect(onHighlightedIndexChange).not.toHaveBeenCalled()
-
-      mouseMoveItemAtIndex(0)
+      await mouseMoveItemAtIndex(0)
 
       expect(onHighlightedIndexChange).not.toHaveBeenCalled()
     })
 
-    test('is called on first open when initialSelectedItem is set', () => {
+    test('is called on first open when initialSelectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderCombobox({
+      renderCombobox({
         initialSelectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1076,15 +1122,15 @@ describe('props', () => {
       )
     })
 
-    test('is called on first open when selectedItem is set', () => {
+    test('is called on first open when selectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderCombobox({
+      renderCombobox({
         selectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1094,15 +1140,15 @@ describe('props', () => {
       )
     })
 
-    test('is called on first open when defaultSelectedItem is set', () => {
+    test('is called on first open when defaultSelectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderCombobox({
+      renderCombobox({
         defaultSelectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1112,9 +1158,9 @@ describe('props', () => {
       )
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let highlightedIndex = 2
-      const {keyDownOnInput, input, rerender} = renderCombobox({
+      const {rerender} = renderCombobox({
         isOpen: true,
         highlightedIndex,
         onHighlightedIndexChange: changes => {
@@ -1122,10 +1168,10 @@ describe('props', () => {
         },
       })
 
-      keyDownOnInput('ArrowDown')
+      await keyDownOnInput('{ArrowDown}')
       rerender({highlightedIndex, isOpen: true})
 
-      expect(input).toHaveAttribute(
+      expect(getInput()).toHaveAttribute(
         'aria-activedescendant',
         defaultIds.getItemId(3),
       )
@@ -1151,14 +1197,14 @@ describe('props', () => {
   })
 
   describe('onIsOpenChange', () => {
-    test('is called at each isOpen change', () => {
+    test('is called at each isOpen change', async () => {
       const onIsOpenChange = jest.fn()
-      const {keyDownOnInput} = renderCombobox({
+      renderCombobox({
         initialIsOpen: true,
         onIsOpenChange,
       })
 
-      keyDownOnInput('Escape')
+      await keyDownOnInput('{Escape}')
 
       expect(onIsOpenChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1168,28 +1214,28 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if isOpen is the same', () => {
+    test('is not called at if isOpen is the same', async () => {
       const onIsOpenChange = jest.fn()
-      const {clickOnItemAtIndex} = renderCombobox({
+      renderCombobox({
         defaultIsOpen: true,
         onIsOpenChange,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
 
       expect(onIsOpenChange).not.toHaveBeenCalledWith()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let isOpen = true
-      const {keyDownOnInput, getItems, rerender} = renderCombobox({
+      const {rerender} = renderCombobox({
         isOpen,
         onIsOpenChange: changes => {
           isOpen = changes.isOpen
         },
       })
 
-      keyDownOnInput('Escape')
+      await keyDownOnInput('{Escape}')
       rerender({isOpen})
 
       expect(getItems()).toHaveLength(0)
@@ -1212,19 +1258,11 @@ describe('props', () => {
   })
 
   describe('onStateChange', () => {
-    test('is called at each state property change', () => {
+    test('is called at each state property change', async () => {
       const onStateChange = jest.fn()
-      const {
-        clickOnToggleButton,
-        changeInputValue,
-        clickOnItemAtIndex,
-        mouseLeaveMenu,
-        mouseMoveItemAtIndex,
-        keyDownOnInput,
-        blurInput,
-      } = renderCombobox({onStateChange})
-
-      clickOnToggleButton()
+      renderCombobox({onStateChange})
+
+      await clickOnToggleButton()
 
       expect(onStateChange).toHaveBeenCalledTimes(1)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1234,7 +1272,7 @@ describe('props', () => {
         }),
       )
 
-      changeInputValue('t')
+      await changeInputValue('t')
 
       expect(onStateChange).toHaveBeenCalledTimes(2)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1244,17 +1282,17 @@ describe('props', () => {
         }),
       )
 
-      mouseMoveItemAtIndex(1)
+      await mouseMoveItemAtIndex(2)
 
       expect(onStateChange).toHaveBeenCalledTimes(3)
       expect(onStateChange).toHaveBeenLastCalledWith(
         expect.objectContaining({
-          highlightedIndex: 1,
+          highlightedIndex: 2,
           type: stateChangeTypes.ItemMouseMove,
         }),
       )
 
-      clickOnItemAtIndex(2)
+      await clickOnItemAtIndex(2)
 
       expect(onStateChange).toHaveBeenCalledTimes(4)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1266,17 +1304,17 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('ArrowDown')
+      await keyDownOnInput('{ArrowDown}')
 
       expect(onStateChange).toHaveBeenCalledTimes(5)
       expect(onStateChange).toHaveBeenLastCalledWith(
         expect.objectContaining({
-          highlightedIndex: 3,
+          highlightedIndex: 2,
           type: stateChangeTypes.InputKeyDownArrowDown,
         }),
       )
 
-      keyDownOnInput('End')
+      await keyDownOnInput('{End}')
 
       expect(onStateChange).toHaveBeenCalledTimes(6)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1286,7 +1324,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('Home')
+      await keyDownOnInput('{Home}')
 
       expect(onStateChange).toHaveBeenCalledTimes(7)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1296,7 +1334,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('Enter')
+      await keyDownOnInput('{Enter}')
 
       expect(onStateChange).toHaveBeenCalledTimes(8)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1308,7 +1346,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('Escape')
+      await keyDownOnInput('{Escape}')
 
       expect(onStateChange).toHaveBeenCalledTimes(9)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1319,7 +1357,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('ArrowUp')
+      await keyDownOnInput('{ArrowUp}')
 
       expect(onStateChange).toHaveBeenCalledTimes(10)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1330,7 +1368,8 @@ describe('props', () => {
         }),
       )
 
-      mouseLeaveMenu()
+      await mouseMoveItemAtIndex(25)
+      await mouseLeaveItemAtIndex(25)
 
       expect(onStateChange).toHaveBeenCalledTimes(11)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -1340,7 +1379,7 @@ describe('props', () => {
         }),
       )
 
-      blurInput()
+      await tab()
 
       expect(onStateChange).toHaveBeenCalledTimes(12)
       expect(onStateChange).toHaveBeenLastCalledWith(
diff --git a/src/hooks/useCombobox/__tests__/returnProps.test.js b/src/hooks/useCombobox/__tests__/returnProps.test.js
index 5249a0c24..323ab4b55 100644
--- a/src/hooks/useCombobox/__tests__/returnProps.test.js
+++ b/src/hooks/useCombobox/__tests__/returnProps.test.js
@@ -19,7 +19,6 @@ describe('returnProps', () => {
       expect(result.current.getLabelProps).toBeInstanceOf(Function)
       expect(result.current.getToggleButtonProps).toBeInstanceOf(Function)
       expect(result.current.getInputProps).toBeInstanceOf(Function)
-      expect(result.current.getComboboxProps).toBeInstanceOf(Function)
     })
   })
 
diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
index 373ff5e1c..cff04761b 100644
--- a/src/hooks/useCombobox/index.js
+++ b/src/hooks/useCombobox/index.js
@@ -54,7 +54,6 @@ function useCombobox(userProps = {}) {
   const itemRefs = useRef({})
   const inputRef = useRef(null)
   const toggleButtonRef = useRef(null)
-  const comboboxRef = useRef(null)
   const isInitialMountRef = useRef(true)
   // prevent id re-generation between renders.
   const elementIds = useElementIds(props)
@@ -124,7 +123,7 @@ function useCombobox(userProps = {}) {
   // Add mouse/touch events to document.
   const mouseAndTouchTrackersRef = useMouseAndTouchTracker(
     isOpen,
-    [comboboxRef, menuRef, toggleButtonRef],
+    [inputRef, menuRef, toggleButtonRef],
     environment,
     () => {
       dispatch({
@@ -135,7 +134,6 @@ function useCombobox(userProps = {}) {
   )
   const setGetterPropCallInfo = useGetterPropsCalledChecker(
     'getInputProps',
-    'getComboboxProps',
     'getMenuProps',
   )
   // Make initial ref false.
@@ -146,6 +144,8 @@ function useCombobox(userProps = {}) {
   useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {}
+    } else if (document.activeElement !== inputRef.current) {
+      inputRef?.current?.focus()
     }
   }, [isOpen])
 
@@ -156,7 +156,7 @@ function useCombobox(userProps = {}) {
         event.preventDefault()
         dispatch({
           type: stateChangeTypes.InputKeyDownArrowDown,
-          shiftKey: event.shiftKey,
+          altKey: event.altKey,
           getItemNodeFromIndex,
         })
       },
@@ -164,7 +164,7 @@ function useCombobox(userProps = {}) {
         event.preventDefault()
         dispatch({
           type: stateChangeTypes.InputKeyDownArrowUp,
-          shiftKey: event.shiftKey,
+          altKey: event.altKey,
           getItemNodeFromIndex,
         })
       },
@@ -210,7 +210,6 @@ function useCombobox(userProps = {}) {
         // if closed or no highlighted index, do nothing.
         if (
           !latestState.isOpen ||
-          latestState.highlightedIndex < 0 ||
           event.which === 229 // if IME composing, wait for next Enter keydown event.
         ) {
           return
@@ -222,6 +221,26 @@ function useCombobox(userProps = {}) {
           getItemNodeFromIndex,
         })
       },
+      PageUp(event) {
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
+
+          dispatch({
+            type: stateChangeTypes.InputKeyDownPageUp,
+            getItemNodeFromIndex,
+          })
+        }
+      },
+      PageDown(event) {
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
+
+          dispatch({
+            type: stateChangeTypes.InputKeyDownPageDown,
+            getItemNodeFromIndex,
+          })
+        }
+      },
     }),
     [dispatch, latest, getItemNodeFromIndex],
   )
@@ -330,20 +349,19 @@ function useCombobox(userProps = {}) {
 
   const getToggleButtonProps = useCallback(
     ({onClick, onPress, refKey = 'ref', ref, ...rest} = {}) => {
+      const latestState = latest.current.state
       const toggleButtonHandleClick = () => {
         dispatch({
           type: stateChangeTypes.ToggleButtonClick,
         })
-
-        if (!latest.current.state.isOpen && inputRef.current) {
-          inputRef.current.focus()
-        }
       }
 
       return {
         [refKey]: handleRefs(ref, toggleButtonNode => {
           toggleButtonRef.current = toggleButtonNode
         }),
+        'aria-controls': elementIds.menuId,
+        'aria-expanded': latestState.isOpen,
         id: elementIds.toggleButtonId,
         tabIndex: -1,
         ...(!rest.disabled && {
@@ -366,6 +384,7 @@ function useCombobox(userProps = {}) {
         onKeyDown,
         onChange,
         onInput,
+        onFocus,
         onBlur,
         onChangeText,
         refKey = 'ref',
@@ -403,6 +422,13 @@ function useCombobox(userProps = {}) {
           })
         }
       }
+      const inputHandleFocus = () => {
+        if (!latestState.isOpen) {
+          dispatch({
+            type: stateChangeTypes.InputFocus,
+          })
+        }
+      }
 
       /* istanbul ignore next (preact) */
       const onChangeKey = isPreact ? 'onInput' : 'onChange'
@@ -417,6 +443,7 @@ function useCombobox(userProps = {}) {
           ),
           onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
           onBlur: callAllEventHandlers(onBlur, inputHandleBlur),
+          onFocus: callAllEventHandlers(onFocus, inputHandleFocus),
         }
       }
 
@@ -440,19 +467,19 @@ function useCombobox(userProps = {}) {
         [refKey]: handleRefs(ref, inputNode => {
           inputRef.current = inputNode
         }),
-        id: elementIds.inputId,
+        'aria-activedescendant':
+          latestState.isOpen && latestState.highlightedIndex > -1
+            ? elementIds.getItemId(latestState.highlightedIndex)
+            : '',
         'aria-autocomplete': 'list',
         'aria-controls': elementIds.menuId,
-        ...(latestState.isOpen &&
-          latestState.highlightedIndex > -1 && {
-            'aria-activedescendant': elementIds.getItemId(
-              latestState.highlightedIndex,
-            ),
-          }),
+        'aria-expanded': latestState.isOpen,
         'aria-labelledby': elementIds.labelId,
         // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
         // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
         autoComplete: 'off',
+        id: elementIds.inputId,
+        role: 'combobox',
         value: latestState.inputValue,
         ...eventHandlers,
         ...rest,
@@ -467,28 +494,6 @@ function useCombobox(userProps = {}) {
       elementIds,
     ],
   )
-  const getComboboxProps = useCallback(
-    ({refKey = 'ref', ref, ...rest} = {}, {suppressRefError = false} = {}) => {
-      setGetterPropCallInfo(
-        'getComboboxProps',
-        suppressRefError,
-        refKey,
-        comboboxRef,
-      )
-
-      return {
-        [refKey]: handleRefs(ref, comboboxNode => {
-          comboboxRef.current = comboboxNode
-        }),
-        role: 'combobox',
-        'aria-haspopup': 'listbox',
-        'aria-owns': elementIds.menuId,
-        'aria-expanded': latest.current.state.isOpen,
-        ...rest,
-      }
-    },
-    [latest, setGetterPropCallInfo, elementIds],
-  )
 
   // returns
   const toggleMenu = useCallback(() => {
@@ -545,7 +550,6 @@ function useCombobox(userProps = {}) {
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getToggleButtonProps,
     // actions.
     toggleMenu,
diff --git a/src/hooks/useCombobox/reducer.js b/src/hooks/useCombobox/reducer.js
index 230a52f3f..ffdab45b2 100644
--- a/src/hooks/useCombobox/reducer.js
+++ b/src/hooks/useCombobox/reducer.js
@@ -5,7 +5,7 @@ import * as stateChangeTypes from './stateChangeTypes'
 
 /* eslint-disable complexity */
 export default function downshiftUseComboboxReducer(state, action) {
-  const {type, props, shiftKey} = action
+  const {type, props, altKey} = action
   let changes
 
   switch (type) {
@@ -21,35 +21,51 @@ export default function downshiftUseComboboxReducer(state, action) {
       if (state.isOpen) {
         changes = {
           highlightedIndex: getNextWrappingIndex(
-            shiftKey ? 5 : 1,
+            1,
             state.highlightedIndex,
             props.items.length,
             action.getItemNodeFromIndex,
-            props.circularNavigation,
+            true,
           ),
         }
       } else {
         changes = {
-          highlightedIndex: getHighlightedIndexOnOpen(
-            props,
-            state,
-            1,
-            action.getItemNodeFromIndex,
-          ),
+          highlightedIndex:
+            altKey && state.selectedItem == null
+              ? -1
+              : getHighlightedIndexOnOpen(
+                  props,
+                  state,
+                  1,
+                  action.getItemNodeFromIndex,
+                ),
           isOpen: props.items.length >= 0,
         }
       }
       break
     case stateChangeTypes.InputKeyDownArrowUp:
       if (state.isOpen) {
-        changes = {
-          highlightedIndex: getNextWrappingIndex(
-            shiftKey ? -5 : -1,
-            state.highlightedIndex,
-            props.items.length,
-            action.getItemNodeFromIndex,
-            props.circularNavigation,
-          ),
+        if (altKey) {
+          changes = {
+            isOpen: getDefaultValue(props, 'isOpen'),
+            highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
+            ...(state.highlightedIndex >= 0 && {
+              selectedItem: props.items[state.highlightedIndex],
+              inputValue: props.itemToString(
+                props.items[state.highlightedIndex],
+              ),
+            }),
+          }
+        } else {
+          changes = {
+            highlightedIndex: getNextWrappingIndex(
+              -1,
+              state.highlightedIndex,
+              props.items.length,
+              action.getItemNodeFromIndex,
+              true,
+            ),
+          }
         }
       } else {
         changes = {
@@ -65,13 +81,12 @@ export default function downshiftUseComboboxReducer(state, action) {
       break
     case stateChangeTypes.InputKeyDownEnter:
       changes = {
-        ...(state.isOpen &&
-          state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            isOpen: getDefaultValue(props, 'isOpen'),
-            highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
-            inputValue: props.itemToString(props.items[state.highlightedIndex]),
-          }),
+        isOpen: getDefaultValue(props, 'isOpen'),
+        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
+        ...(state.highlightedIndex >= 0 && {
+          selectedItem: props.items[state.highlightedIndex],
+          inputValue: props.itemToString(props.items[state.highlightedIndex]),
+        }),
       }
       break
     case stateChangeTypes.InputKeyDownEscape:
@@ -84,6 +99,28 @@ export default function downshiftUseComboboxReducer(state, action) {
         }),
       }
       break
+    case stateChangeTypes.InputKeyDownPageUp:
+      changes = {
+        highlightedIndex: getNextWrappingIndex(
+          -10,
+          state.highlightedIndex,
+          props.items.length,
+          action.getItemNodeFromIndex,
+          false,
+        ),
+      }
+      break
+    case stateChangeTypes.InputKeyDownPageDown:
+      changes = {
+        highlightedIndex: getNextWrappingIndex(
+          10,
+          state.highlightedIndex,
+          props.items.length,
+          action.getItemNodeFromIndex,
+          false,
+        ),
+      }
+      break
     case stateChangeTypes.InputKeyDownHome:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(
@@ -124,6 +161,12 @@ export default function downshiftUseComboboxReducer(state, action) {
         inputValue: action.inputValue,
       }
       break
+    case stateChangeTypes.InputFocus:
+      changes = {
+        isOpen: true,
+        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0),
+      }
+      break
     case stateChangeTypes.FunctionSelectItem:
       changes = {
         selectedItem: action.selectedItem,
diff --git a/src/hooks/useCombobox/stateChangeTypes.js b/src/hooks/useCombobox/stateChangeTypes.js
index 21af8c23d..247135ab6 100644
--- a/src/hooks/useCombobox/stateChangeTypes.js
+++ b/src/hooks/useCombobox/stateChangeTypes.js
@@ -7,9 +7,12 @@ export const InputKeyDownArrowUp = productionEnum('__input_keydown_arrow_up__')
 export const InputKeyDownEscape = productionEnum('__input_keydown_escape__')
 export const InputKeyDownHome = productionEnum('__input_keydown_home__')
 export const InputKeyDownEnd = productionEnum('__input_keydown_end__')
+export const InputKeyDownPageUp = productionEnum('__input_keydown_page_up__')
+export const InputKeyDownPageDown = productionEnum('__input_keydown_page_down__')
 export const InputKeyDownEnter = productionEnum('__input_keydown_enter__')
 export const InputChange = productionEnum('__input_change__')
 export const InputBlur = productionEnum('__input_blur__')
+export const InputFocus = productionEnum('__input_focus__')
 
 export const MenuMouseLeave = productionEnum('__menu_mouse_leave__')
 
diff --git a/src/hooks/useCombobox/testUtils.js b/src/hooks/useCombobox/testUtils.js
index f0a67e7be..99ebb9915 100644
--- a/src/hooks/useCombobox/testUtils.js
+++ b/src/hooks/useCombobox/testUtils.js
@@ -1,16 +1,11 @@
 import * as React from 'react'
-import {render, fireEvent, screen} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import {renderHook} from '@testing-library/react-hooks'
-import userEvent from '@testing-library/user-event'
 import {defaultProps} from '../utils'
-import {items} from '../testUtils'
+import {dataTestIds, items, user} from '../testUtils'
 import useCombobox from '.'
 
-const dataTestIds = {
-  toggleButton: 'toggle-button-id',
-  item: index => `item-id-${index}`,
-  input: 'input-id',
-}
+export * from '../testUtils'
 
 jest.mock('../../utils', () => {
   const utils = jest.requireActual('../../utils')
@@ -34,81 +29,44 @@ jest.mock('../utils', () => {
 beforeEach(jest.resetAllMocks)
 afterAll(jest.restoreAllMocks)
 
-const renderCombobox = (props, uiCallback) => {
+export function getInput() {
+  return screen.getByRole('combobox')
+}
+
+export async function keyDownOnInput(keys) {
+  if (document.activeElement !== getInput()) {
+    getInput().focus()
+    await user.keyboard('{Escape}') // menu was opened because of focus, close it.
+  }
+
+  await user.keyboard(keys)
+}
+
+export async function changeInputValue(inputValue) {
+  await user.type(getInput(), inputValue)
+}
+
+export const renderCombobox = (props, uiCallback) => {
   const renderSpy = jest.fn()
   const ui = <DropdownCombobox renderSpy={renderSpy} {...props} />
   const utils = render(uiCallback ? uiCallback(ui) : ui)
   const rerender = newProps =>
     utils.rerender(<DropdownCombobox renderSpy={renderSpy} {...newProps} />)
-  const label = screen.getByText(/choose an element/i)
-  const menu = screen.getByRole('listbox')
-  const toggleButton = screen.getByTestId(dataTestIds.toggleButton)
-  const input = screen.getByTestId(dataTestIds.input)
-  const combobox = screen.getByRole('combobox')
-  const getItemAtIndex = index => screen.getByTestId(dataTestIds.item(index))
-  const getItems = () => screen.queryAllByRole('option')
-  const clickOnItemAtIndex = index => {
-    // keeping fireEvent so we don't trigger input blur via user event
-    fireEvent.click(getItemAtIndex(index))
-  }
-  const clickOnToggleButton = () => {
-    userEvent.click(toggleButton)
-  }
-  const mouseMoveItemAtIndex = index => {
-    userEvent.hover(getItemAtIndex(index))
-  }
-  const getA11yStatusContainer = () => screen.queryByRole('status')
-  const mouseLeaveMenu = () => {
-    userEvent.unhover(menu)
-  }
-  const changeInputValue = inputValue => {
-    userEvent.type(input, inputValue)
-  }
-  const focusInput = () => {
-    fireEvent.focus(input)
-  }
-  const keyDownOnInput = (key, options = {}) => {
-    if (document.activeElement !== input) {
-      focusInput()
-    }
-
-    fireEvent.keyDown(input, {key, ...options})
-  }
-  const blurInput = () => {
-    fireEvent.blur(input)
-  }
 
   return {
     ...utils,
     renderSpy,
     rerender,
-    label,
-    menu,
-    toggleButton,
-    getItemAtIndex,
-    clickOnItemAtIndex,
-    mouseMoveItemAtIndex,
-    getItems,
-    clickOnToggleButton,
-    getA11yStatusContainer,
-    mouseLeaveMenu,
-    input,
-    combobox,
-    changeInputValue,
-    keyDownOnInput,
-    blurInput,
-    focusInput,
   }
 }
 
-const DropdownCombobox = ({renderSpy, renderItem, ...props}) => {
+function DropdownCombobox({renderSpy, renderItem, ...props}) {
   const {
     isOpen,
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     getItemProps,
   } = useCombobox({items, ...props})
   const {itemToString} = props.itemToString ? props : defaultProps
@@ -118,7 +76,7 @@ const DropdownCombobox = ({renderSpy, renderItem, ...props}) => {
   return (
     <div>
       <label {...getLabelProps()}>Choose an element:</label>
-      <div data-testid={dataTestIds.combobox} {...getComboboxProps()}>
+      <div>
         <input data-testid={dataTestIds.input} {...getInputProps()} />
         <button
           data-testid={dataTestIds.toggleButton}
@@ -133,7 +91,7 @@ const DropdownCombobox = ({renderSpy, renderItem, ...props}) => {
             const stringItem =
               item instanceof Object ? itemToString(item) : item
             return renderItem ? (
-              renderItem({index, item, getItemProps, dataTestIds, stringItem})
+              renderItem({index, item, getItemProps, stringItem})
             ) : (
               <li
                 data-testid={dataTestIds.item(index)}
@@ -149,8 +107,6 @@ const DropdownCombobox = ({renderSpy, renderItem, ...props}) => {
   )
 }
 
-const renderUseCombobox = props => {
+export const renderUseCombobox = props => {
   return renderHook(() => useCombobox({items, ...props}))
 }
-
-export {renderUseCombobox, dataTestIds, renderCombobox}
diff --git a/src/hooks/useCombobox/utils.js b/src/hooks/useCombobox/utils.js
index 4adc34903..7742fa2e5 100644
--- a/src/hooks/useCombobox/utils.js
+++ b/src/hooks/useCombobox/utils.js
@@ -39,7 +39,6 @@ const propTypes = {
   itemToString: PropTypes.func,
   getA11yStatusMessage: PropTypes.func,
   getA11ySelectionMessage: PropTypes.func,
-  circularNavigation: PropTypes.bool,
   highlightedIndex: PropTypes.number,
   defaultHighlightedIndex: PropTypes.number,
   initialHighlightedIndex: PropTypes.number,
@@ -123,7 +122,6 @@ if (process.env.NODE_ENV !== 'production') {
 const defaultProps = {
   ...defaultPropsCommon,
   getA11yStatusMessage,
-  circularNavigation: true,
 }
 
 export {validatePropTypes, useControlledReducer, getInitialState, defaultProps}
diff --git a/src/hooks/useMultipleSelection/README.md b/src/hooks/useMultipleSelection/README.md
index e92b9d075..38dcb7d70 100644
--- a/src/hooks/useMultipleSelection/README.md
+++ b/src/hooks/useMultipleSelection/README.md
@@ -54,11 +54,16 @@ such as when an item has been removed from selection.
 - [Control Props](#control-props)
 - [Returned props](#returned-props)
   - [prop getters](#prop-getters)
+    - [`getSelectedItemProps`](#getselecteditemprops)
+    - [`getDropdownProps`](#getdropdownprops)
   - [actions](#actions)
   - [state](#state)
 - [Event Handlers](#event-handlers)
   - [Default handlers](#default-handlers)
+    - [Dropdown - button or input](#dropdown---button-or-input)
+    - [Item](#item)
   - [Customizing Handlers](#customizing-handlers)
+- [Examples](#examples)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -101,7 +106,6 @@ const DropdownMultipleCombobox = () => {
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
     highlightedIndex,
     getItemProps,
     selectItem,
@@ -149,7 +153,7 @@ const DropdownMultipleCombobox = () => {
             </span>
           </span>
         ))}
-        <div style={comboboxStyles} {...getComboboxProps()}>
+        <div style={comboboxStyles}>
           <input
             {...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}
           />
@@ -460,16 +464,11 @@ You use the hook like so:
 import {useMultipleSelection} from 'downshift'
 import {items} from './utils'
 
-const {
-  getDropdownProps,
-  getSelectedItemProps,
-  selectedItems,
-  reset,
-  ...rest
-} = useMultipleSelection({
-  initialSelectedItems: [items[0], [items[1]]],
-  ...otherProps,
-})
+const {getDropdownProps, getSelectedItemProps, selectedItems, reset, ...rest} =
+  useMultipleSelection({
+    initialSelectedItems: [items[0], [items[1]]],
+    ...otherProps,
+  })
 
 return (
   <div>
diff --git a/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js b/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js
index dc854d5a6..874d5dba2 100644
--- a/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js
+++ b/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js
@@ -1,7 +1,15 @@
 import {act, renderHook} from '@testing-library/react-hooks'
-import {renderMultipleCombobox, renderUseMultipleSelection} from '../testUtils'
-import {items} from '../../testUtils'
-// eslint-disable-next-line import/default
+import {
+  clickOnInput,
+  focusSelectedItemAtIndex,
+  getSelectedItemAtIndex,
+  getSelectedItems,
+  renderMultipleCombobox,
+  renderUseMultipleSelection,
+  getInput,
+  keyDownOnInput,
+  items,
+} from '../testUtils'
 import utils from '../../utils'
 import useMultipleSelection from '..'
 
@@ -101,138 +109,121 @@ describe('getDropdownProps', () => {
 
   describe('event handlers', () => {
     describe('on keydown', () => {
-      test('arrow left should make first selected item active', () => {
-        const {keyDownOnInput, getSelectedItemAtIndex} = renderMultipleCombobox(
-          {
-            multipleSelectionProps: {
-              initialSelectedItems: [items[0], items[1]],
-            },
+      test('arrow left should make first selected item active', async () => {
+        renderMultipleCombobox({
+          multipleSelectionProps: {
+            initialSelectedItems: [items[0], items[1]],
           },
-        )
+        })
 
-        keyDownOnInput('ArrowLeft')
+        await keyDownOnInput('{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
       })
 
-      test('arrow left should not work if pressed with modifier keys', () => {
-        const {keyDownOnInput, getSelectedItems} = renderMultipleCombobox({
+      test('arrow left should not work if pressed with modifier keys', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {initialSelectedItems: [items[0], items[1]]},
         })
 
-        keyDownOnInput('ArrowLeft', {shiftKey: true})
+        await keyDownOnInput('{Shift>}{ArrowLeft}{/Shift}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('ArrowLeft', {altKey: true})
+        await keyDownOnInput('{Alt>}{ArrowLeft}{/Alt}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('ArrowLeft', {metaKey: true})
+        await keyDownOnInput('{Meta>}{ArrowLeft}{/Meta}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('ArrowLeft', {ctrlKey: true})
+        await keyDownOnInput('{Control>}{ArrowLeft}{/Control}')
 
         expect(getSelectedItems()).toHaveLength(2)
       })
 
-      test('backspace should remove the first selected item', () => {
-        const {keyDownOnInput, getSelectedItems} = renderMultipleCombobox({
+      test('backspace should remove the first selected item', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {initialSelectedItems: [items[0], items[1]]},
         })
 
-        keyDownOnInput('Backspace')
+        await keyDownOnInput('{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(1)
       })
 
-      test('backspace should not work if pressed with modifier keys', () => {
-        const {keyDownOnInput, getSelectedItems} = renderMultipleCombobox({
+      test('backspace should not work if pressed with modifier keys', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {initialSelectedItems: [items[0], items[1]]},
         })
 
-        keyDownOnInput('Backspace', {shiftKey: true})
+        await keyDownOnInput('{Shift>}{Backspace}{/Shift}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('Backspace', {altKey: true})
+        await keyDownOnInput('{Alt>}{ArrowLeft}{/Alt}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('Backspace', {metaKey: true})
+        await keyDownOnInput('{Meta>}{ArrowLeft}{/Meta}')
 
         expect(getSelectedItems()).toHaveLength(2)
 
-        keyDownOnInput('Backspace', {ctrlKey: true})
+        await keyDownOnInput('{Control>}{ArrowLeft}{/Control}')
 
         expect(getSelectedItems()).toHaveLength(2)
       })
 
-      test('backspace should not work if pressed with cursor not on first position', () => {
-        const {
-          keyDownOnInput,
-          getSelectedItems,
-          input,
-        } = renderMultipleCombobox({
+      test('backspace should not work if pressed with cursor not on first position', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
           },
           comboboxProps: {initialInputValue: 'test'},
         })
+        const input = getInput()
 
         input.selectionStart = 1
         input.selectionEnd = 1
-        keyDownOnInput('Backspace')
+        await keyDownOnInput('{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(2)
       })
 
-      test('backspace should not work if pressed with cursor highlighting text', () => {
-        const {
-          keyDownOnInput,
-          getSelectedItems,
-          input,
-        } = renderMultipleCombobox({
+      test('backspace should not work if pressed with cursor highlighting text', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
           },
           comboboxProps: {initialInputValue: 'test'},
         })
+        const input = getInput()
 
         input.selectionStart = 0
         input.selectionEnd = 3
-        keyDownOnInput('Backspace')
+        await keyDownOnInput('{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(2)
       })
 
-      test("other than the ones supported don't affect anything", () => {
-        const {
-          keyDownOnInput,
-          getSelectedItems,
-          input,
-        } = renderMultipleCombobox({
+      test("other than the ones supported don't affect anything", async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
           },
         })
 
-        keyDownOnInput('Alt')
-        keyDownOnInput('Control')
+        await keyDownOnInput('{Alt}')
+        await keyDownOnInput('{Control}')
 
         expect(getSelectedItems()).toHaveLength(2)
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
     })
 
-    test('on click it should remove active status from item if any', () => {
-      const {
-        keyDownOnInput,
-        getSelectedItemAtIndex,
-        clickOnInput,
-        focusSelectedItemAtIndex,
-      } = renderMultipleCombobox({
+    test('on click it should remove active status from item if any', async () => {
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           initialActiveIndex: 1,
@@ -240,11 +231,11 @@ describe('getDropdownProps', () => {
       })
 
       focusSelectedItemAtIndex(1)
-      clickOnInput()
+      await clickOnInput()
 
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
 
-      keyDownOnInput('ArrowLeft')
+      await keyDownOnInput('{ArrowLeft}')
 
       expect(getSelectedItemAtIndex(1)).toHaveFocus()
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
diff --git a/src/hooks/useMultipleSelection/__tests__/getSelectedItemProps.test.js b/src/hooks/useMultipleSelection/__tests__/getSelectedItemProps.test.js
index 3569d83f2..6cbbeee08 100644
--- a/src/hooks/useMultipleSelection/__tests__/getSelectedItemProps.test.js
+++ b/src/hooks/useMultipleSelection/__tests__/getSelectedItemProps.test.js
@@ -1,7 +1,17 @@
 import {act} from '@testing-library/react-hooks'
 
-import {renderUseMultipleSelection, renderMultipleCombobox} from '../testUtils'
-import {items} from '../../testUtils'
+import {
+  renderUseMultipleSelection,
+  renderMultipleCombobox,
+  clickOnSelectedItemAtIndex,
+  getSelectedItemAtIndex,
+  focusSelectedItemAtIndex,
+  keyDownOnSelectedItemAtIndex,
+  getSelectedItems,
+  getInput,
+  items,
+  tab,
+} from '../testUtils'
 
 describe('getSelectedItemProps', () => {
   test('throws error if no index or item has been passed', () => {
@@ -173,35 +183,27 @@ describe('getSelectedItemProps', () => {
 
   describe('event handlers', () => {
     describe('on click', () => {
-      test('sets tabindex to "0"', () => {
-        const {
-          clickOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('sets tabindex to "0"', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {initialSelectedItems: [items[0], items[1]]},
         })
 
-        clickOnSelectedItemAtIndex(0)
+        await clickOnSelectedItemAtIndex(0)
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(0)).toHaveFocus()
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
       })
 
-      test('keeps tabindex "0" to an already active item', () => {
-        const {
-          clickOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('keeps tabindex "0" to an already active item', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
             initialActiveIndex: 0,
           },
         })
 
-        focusSelectedItemAtIndex(0)
-        clickOnSelectedItemAtIndex(0)
+        await clickOnSelectedItemAtIndex(0)
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(0)).toHaveFocus()
@@ -209,290 +211,226 @@ describe('getSelectedItemProps', () => {
     })
 
     describe('on key down', () => {
-      test('arrow left should change active item descendently', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('arrow left should change active item descendently', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
             initialActiveIndex: 1,
           },
         })
 
-        keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(0)).toHaveFocus()
       })
 
-      test(`arrow left should not change active item if it's the first one added`, () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test(`arrow left should not change active item if it's the first one added`, async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
             initialActiveIndex: 0,
           },
         })
 
-        focusSelectedItemAtIndex(0)
-        keyDownOnSelectedItemAtIndex(0, 'ArrowLeft')
+        await keyDownOnSelectedItemAtIndex(0, '{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(0)).toHaveFocus()
       })
 
-      test('arrow right should change active item ascendently', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('arrow right should change active item ascendently', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
             initialActiveIndex: 0,
           },
         })
 
-        keyDownOnSelectedItemAtIndex(0, 'ArrowRight')
+        await keyDownOnSelectedItemAtIndex(0, '{ArrowRight}')
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
       })
 
-      test(`arrow right should make no item active if it's on last one added`, () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          input,
-        } = renderMultipleCombobox({
+      test(`arrow right should make no item active if it's on last one added`, async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1]],
             initialActiveIndex: 1,
           },
         })
 
-        keyDownOnSelectedItemAtIndex(1, 'ArrowRight')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowRight}')
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
 
-      test('arrow navigation moves focus back and forth', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('arrow navigation moves focus back and forth', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 2,
           },
         })
 
-        keyDownOnSelectedItemAtIndex(2, 'ArrowLeft')
+        await keyDownOnSelectedItemAtIndex(2, '{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
 
-        keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
 
-        keyDownOnSelectedItemAtIndex(0, 'ArrowRight')
+        await keyDownOnSelectedItemAtIndex(0, '{ArrowRight}')
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
 
-        keyDownOnSelectedItemAtIndex(2, 'ArrowRight')
+        await keyDownOnSelectedItemAtIndex(2, '{ArrowRight}')
 
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
       })
 
-      test('backspace removes item and moves focus to next item if any', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('backspace removes item and moves focus to next item if any', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 1,
           },
         })
 
-        focusSelectedItemAtIndex(1)
-        keyDownOnSelectedItemAtIndex(1, 'Backspace')
+        await keyDownOnSelectedItemAtIndex(1, '{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(2)
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
         expect(getSelectedItemAtIndex(1)).toHaveTextContent(items[2])
       })
 
-      test('backspace removes item and moves focus to input if no items left', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-          input,
-        } = renderMultipleCombobox({
+      test('backspace removes item and moves focus to input if no items left', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0]],
             initialActiveIndex: 0,
           },
         })
 
-        focusSelectedItemAtIndex(0)
-        keyDownOnSelectedItemAtIndex(0, 'Backspace')
+        await keyDownOnSelectedItemAtIndex(0, '{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(0)
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
 
-      test('backspace removes item and moves focus to previous item if it was the last in the array', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('backspace removes item and moves focus to previous item if it was the last in the array', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 2,
           },
         })
 
-        focusSelectedItemAtIndex(2)
-        keyDownOnSelectedItemAtIndex(2, 'Backspace')
+        await keyDownOnSelectedItemAtIndex(2, '{Backspace}')
 
         expect(getSelectedItems()).toHaveLength(2)
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
         expect(getSelectedItemAtIndex(1)).toHaveTextContent(items[1])
       })
 
-      test('delete removes item and moves focus to next item if any', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('delete removes item and moves focus to next item if any', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 1,
           },
         })
 
-        focusSelectedItemAtIndex(1)
-        keyDownOnSelectedItemAtIndex(1, 'Delete')
+        await keyDownOnSelectedItemAtIndex(1, '{Delete}')
 
         expect(getSelectedItems()).toHaveLength(2)
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
         expect(getSelectedItemAtIndex(1)).toHaveTextContent(items[2])
       })
 
-      test('delete removes item and moves focus to input if no items left', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-          input,
-        } = renderMultipleCombobox({
+      test('delete removes item and moves focus to input if no items left', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0]],
             initialActiveIndex: 0,
           },
         })
 
-        focusSelectedItemAtIndex(0)
-        keyDownOnSelectedItemAtIndex(0, 'Delete')
+        await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
         expect(getSelectedItems()).toHaveLength(0)
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
 
-      test('delete removes item and moves focus to previous item if it was the last in the array', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          getSelectedItems,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('delete removes item and moves focus to previous item if it was the last in the array', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 2,
           },
         })
 
-        focusSelectedItemAtIndex(2)
-        keyDownOnSelectedItemAtIndex(2, 'Delete')
+        await keyDownOnSelectedItemAtIndex(2, '{Delete}')
 
         expect(getSelectedItems()).toHaveLength(2)
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
         expect(getSelectedItemAtIndex(1)).toHaveTextContent(items[1])
       })
 
-      test('navigation works correctly with both click and arrow keys', () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItemAtIndex,
-          clickOnSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test('navigation works correctly with both click and arrow keys', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
           },
         })
 
-        clickOnSelectedItemAtIndex(1)
+        await clickOnSelectedItemAtIndex(1)
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
 
-        keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
 
-        clickOnSelectedItemAtIndex(1)
+        await clickOnSelectedItemAtIndex(1)
 
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
 
-        keyDownOnSelectedItemAtIndex(2, 'ArrowRight')
+        await keyDownOnSelectedItemAtIndex(2, '{ArrowRight}')
 
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
       })
 
-      test("other than the ones supported don't affect anything", () => {
-        const {
-          keyDownOnSelectedItemAtIndex,
-          getSelectedItems,
-          getSelectedItemAtIndex,
-          focusSelectedItemAtIndex,
-        } = renderMultipleCombobox({
+      test("other than the ones supported don't affect anything", async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {initialSelectedItems: [items[0], items[1]]},
         })
 
-        focusSelectedItemAtIndex(1)
-        keyDownOnSelectedItemAtIndex(1, 'Alt')
-        keyDownOnSelectedItemAtIndex(1, 'Control')
-        keyDownOnSelectedItemAtIndex(1, 'ArrowUp')
-        keyDownOnSelectedItemAtIndex(1, 'ArrowDown')
-        keyDownOnSelectedItemAtIndex(1, 'Enter')
+        await keyDownOnSelectedItemAtIndex(1, '{Alt}')
+        await keyDownOnSelectedItemAtIndex(1, '{Control}')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowUp}')
+        await keyDownOnSelectedItemAtIndex(1, '{ArrowDown}')
+        await keyDownOnSelectedItemAtIndex(1, '{Enter}')
 
         expect(getSelectedItems()).toHaveLength(2)
         expect(getSelectedItemAtIndex(1)).toHaveFocus()
@@ -500,13 +438,8 @@ describe('getSelectedItemProps', () => {
     })
 
     describe('on focus', () => {
-      test('keeps tabindex "0" when focusing input by tab/click so user can return via tab', () => {
-        const {
-          getSelectedItemAtIndex,
-          focusSelectedItemAtIndex,
-          focusInput,
-          input,
-        } = renderMultipleCombobox({
+      test('keeps tabindex "0" when focusing input by tab/click so user can return via tab', async () => {
+        renderMultipleCombobox({
           multipleSelectionProps: {
             initialSelectedItems: [items[0], items[1], items[2]],
             initialActiveIndex: 0,
@@ -514,12 +447,12 @@ describe('getSelectedItemProps', () => {
         })
 
         focusSelectedItemAtIndex(0)
-        focusInput()
+        await tab()
 
         expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
         expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
         expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '-1')
-        expect(input).toHaveFocus()
+        expect(getInput()).toHaveFocus()
       })
     })
   })
diff --git a/src/hooks/useMultipleSelection/__tests__/props.test.js b/src/hooks/useMultipleSelection/__tests__/props.test.js
index a5774f4b1..a7612c182 100644
--- a/src/hooks/useMultipleSelection/__tests__/props.test.js
+++ b/src/hooks/useMultipleSelection/__tests__/props.test.js
@@ -1,7 +1,19 @@
 import {act, renderHook} from '@testing-library/react-hooks'
 import * as stateChangeTypes from '../stateChangeTypes'
-import {renderUseMultipleSelection, renderMultipleCombobox} from '../testUtils'
-import {items} from '../../testUtils'
+import {
+  renderUseMultipleSelection,
+  renderMultipleCombobox,
+  keyDownOnSelectedItemAtIndex,
+  getSelectedItems,
+  focusSelectedItemAtIndex,
+  clickOnSelectedItemAtIndex,
+  getSelectedItemAtIndex,
+  clickOnInput,
+  getA11yStatusContainer,
+  getInput,
+  items,
+  keyDownOnInput,
+} from '../testUtils'
 import useMultipleSelection from '..'
 
 jest.useFakeTimers()
@@ -24,11 +36,8 @@ describe('props', () => {
       act(() => jest.runAllTimers())
     })
 
-    test('passed as objects should work with custom itemToString', () => {
-      const {
-        keyDownOnSelectedItemAtIndex,
-        getA11yStatusContainer,
-      } = renderMultipleCombobox({
+    test('passed as objects should work with custom itemToString', async () => {
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [{str: 'aaa'}, {str: 'bbb'}],
           initialActiveIndex: 0,
@@ -36,26 +45,24 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(getA11yStatusContainer()).toHaveTextContent(
         'aaa has been removed.',
       )
     })
 
-    test('controls the state property if passed', () => {
+    test('controls the state property if passed', async () => {
       const inputItems = [items[0], items[1]]
-      const {
-        keyDownOnSelectedItemAtIndex,
-        getSelectedItems,
-      } = renderMultipleCombobox({
+
+      renderMultipleCombobox({
         multipleSelectionProps: {
           selectedItems: inputItems,
           initialActiveIndex: 0,
         },
       })
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(getSelectedItems()).toHaveLength(2)
     })
@@ -66,11 +73,11 @@ describe('props', () => {
       act(() => jest.runAllTimers())
     })
 
-    test('is called with object that contains specific props', () => {
+    test('is called with object that contains specific props', async () => {
       const getA11yRemovalMessage = jest.fn()
       const itemToString = item => item.str
       const initialSelectedItems = [{str: 'aaa'}, {str: 'bbb'}]
-      const {keyDownOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems,
           initialActiveIndex: 0,
@@ -80,7 +87,7 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(getA11yRemovalMessage).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -93,12 +100,10 @@ describe('props', () => {
       )
     })
 
-    test('is replaced with the user provided one', () => {
+    test('is replaced with the user provided one', async () => {
       const initialSelectedItems = [items[0], items[1]]
-      const {
-        keyDownOnSelectedItemAtIndex,
-        getA11yStatusContainer,
-      } = renderMultipleCombobox({
+
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems,
           initialActiveIndex: 0,
@@ -106,20 +111,15 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(getA11yStatusContainer()).toHaveTextContent('custom message')
     })
   })
 
   describe('activeIndex', () => {
-    test('controls the state property if passed', () => {
-      const {
-        keyDownOnSelectedItemAtIndex,
-        clickOnSelectedItemAtIndex,
-        getSelectedItemAtIndex,
-        focusSelectedItemAtIndex,
-      } = renderMultipleCombobox({
+    test('controls the state property if passed', async () => {
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           activeIndex: 1,
@@ -127,23 +127,20 @@ describe('props', () => {
       })
 
       focusSelectedItemAtIndex(1)
-      clickOnSelectedItemAtIndex(0)
+      await clickOnSelectedItemAtIndex(0)
 
       expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
-      expect(getSelectedItemAtIndex(1)).toHaveFocus()
 
-      keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+      await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
       expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
-      expect(getSelectedItemAtIndex(1)).toHaveFocus()
 
-      keyDownOnSelectedItemAtIndex(1, 'ArrowRight')
+      await keyDownOnSelectedItemAtIndex(1, '{ArrowRight}')
 
       expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '-1')
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '0')
-      expect(getSelectedItemAtIndex(1)).toHaveFocus()
     })
   })
 
@@ -240,23 +237,16 @@ describe('props', () => {
       )
     })
 
-    test('is called at each state change with the appropriate change type', () => {
+    test('is called at each state change with the appropriate change type', async () => {
       const stateReducer = jest.fn((s, a) => a.changes)
-      const {
-        keyDownOnSelectedItemAtIndex,
-        clickOnSelectedItemAtIndex,
-        keyDownOnInput,
-        input,
-        clickOnInput,
-      } = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1], items[2]],
           stateReducer,
         },
       })
 
-      input.focus()
-      keyDownOnInput('Backspace')
+      await keyDownOnInput('{Backspace}')
 
       expect(stateReducer).toHaveBeenCalledTimes(1)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -271,7 +261,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('ArrowLeft')
+      await keyDownOnInput('{ArrowLeft}')
 
       expect(stateReducer).toHaveBeenCalledTimes(2)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -284,7 +274,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+      await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
       expect(stateReducer).toHaveBeenCalledTimes(3)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -297,7 +287,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'ArrowRight')
+      await keyDownOnSelectedItemAtIndex(0, '{ArrowRight}')
 
       expect(stateReducer).toHaveBeenCalledTimes(4)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -310,7 +300,7 @@ describe('props', () => {
         }),
       )
 
-      clickOnInput()
+      await clickOnInput()
 
       expect(stateReducer).toHaveBeenCalledTimes(5)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -323,7 +313,7 @@ describe('props', () => {
         }),
       )
 
-      clickOnSelectedItemAtIndex(0)
+      await clickOnSelectedItemAtIndex(0)
 
       expect(stateReducer).toHaveBeenCalledTimes(6)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -336,7 +326,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(stateReducer).toHaveBeenCalledTimes(7)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -351,7 +341,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'Backspace')
+      await keyDownOnSelectedItemAtIndex(0, '{Backspace}')
 
       expect(stateReducer).toHaveBeenCalledTimes(8)
       expect(stateReducer).toHaveBeenLastCalledWith(
@@ -367,30 +357,28 @@ describe('props', () => {
       )
     })
 
-    test('replaces prop values with user defined', () => {
+    test('replaces prop values with user defined', async () => {
       const stateReducer = jest.fn((s, a) => {
         const changes = a.changes
         changes.activeIndex = 0
         return changes
       })
-      const {
-        clickOnSelectedItemAtIndex,
-        getSelectedItemAtIndex,
-      } = renderMultipleCombobox({
+
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           stateReducer,
         },
       })
 
-      clickOnSelectedItemAtIndex(1)
+      await clickOnSelectedItemAtIndex(1)
 
       expect(getSelectedItemAtIndex(1)).toHaveAttribute('tabindex', '-1')
       expect(getSelectedItemAtIndex(0)).toHaveAttribute('tabindex', '0')
       expect(getSelectedItemAtIndex(0)).toHaveFocus()
     })
 
-    test('receives state, changes and type', () => {
+    test('receives state, changes and type', async () => {
       const stateReducer = jest.fn((s, a) => {
         expect(a.type).not.toBeUndefined()
         expect(a.type).not.toBeNull()
@@ -403,17 +391,17 @@ describe('props', () => {
 
         return a.changes
       })
-      const {clickOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           stateReducer,
         },
       })
 
-      clickOnSelectedItemAtIndex(0)
+      await clickOnSelectedItemAtIndex(0)
     })
 
-    test('changes are visible in onChange handlers', () => {
+    test('changes are visible in onChange handlers', async () => {
       const activeIndex = 0
       const inputItems = ['foo', 'bar']
       const stateReducer = jest.fn(() => ({
@@ -423,7 +411,7 @@ describe('props', () => {
       const onSelectedItemsChange = jest.fn()
       const onActiveIndexChange = jest.fn()
       const onStateChange = jest.fn()
-      const {keyDownOnInput} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           stateReducer,
           onStateChange,
@@ -433,7 +421,7 @@ describe('props', () => {
         },
       })
 
-      keyDownOnInput('ArrowLeft')
+      await keyDownOnInput('{ArrowLeft}')
 
       expect(onActiveIndexChange).toHaveBeenCalledTimes(1)
       expect(onActiveIndexChange).toHaveBeenCalledWith(
@@ -459,16 +447,16 @@ describe('props', () => {
   })
 
   describe('onActiveIndexChange', () => {
-    test('is called at activeIndex change', () => {
+    test('is called at activeIndex change', async () => {
       const onActiveIndexChange = jest.fn()
-      const {clickOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           onActiveIndexChange,
         },
       })
 
-      clickOnSelectedItemAtIndex(1)
+      await clickOnSelectedItemAtIndex(1)
 
       expect(onActiveIndexChange).toHaveBeenCalledTimes(1)
       expect(onActiveIndexChange).toHaveBeenCalledWith(
@@ -478,9 +466,9 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if selectedItem is the same', () => {
+    test('is not called at if selectedItem is the same', async () => {
       const onActiveIndexChange = jest.fn()
-      const {clickOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           onActiveIndexChange,
@@ -488,18 +476,14 @@ describe('props', () => {
         },
       })
 
-      clickOnSelectedItemAtIndex(1)
+      await clickOnSelectedItemAtIndex(1)
 
       expect(onActiveIndexChange).not.toHaveBeenCalled()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let activeIndex = 3
-      const {
-        keyDownOnSelectedItemAtIndex,
-        getSelectedItemAtIndex,
-        rerender,
-      } = renderMultipleCombobox({
+      const {rerender} = renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: items,
           activeIndex,
@@ -509,7 +493,7 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(3, 'ArrowLeft')
+      await keyDownOnSelectedItemAtIndex(3, '{ArrowLeft}')
       rerender({multipleSelectionProps: {activeIndex}})
 
       expect(getSelectedItemAtIndex(2)).toHaveAttribute('tabindex', '0')
@@ -531,9 +515,9 @@ describe('props', () => {
   })
 
   describe('onSelectedItemsChange', () => {
-    test('is called at items change', () => {
+    test('is called at items change', async () => {
       const onSelectedItemsChange = jest.fn()
-      const {keyDownOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           onSelectedItemsChange,
@@ -541,7 +525,7 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(1, 'Delete')
+      await keyDownOnSelectedItemAtIndex(1, '{Delete}')
 
       expect(onSelectedItemsChange).toHaveBeenCalledTimes(1)
       expect(onSelectedItemsChange).toHaveBeenCalledWith(
@@ -551,9 +535,9 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if items is the same', () => {
+    test('is not called at if items is the same', async () => {
       const onSelectedItemsChange = jest.fn()
-      const {clickOnSelectedItemAtIndex} = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1]],
           onSelectedItemsChange,
@@ -561,18 +545,14 @@ describe('props', () => {
         },
       })
 
-      clickOnSelectedItemAtIndex(0)
+      await clickOnSelectedItemAtIndex(0)
 
       expect(onSelectedItemsChange).not.toHaveBeenCalled()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let selectedItems = [items[0], items[1]]
-      const {
-        keyDownOnSelectedItemAtIndex,
-        getSelectedItems,
-        rerender,
-      } = renderMultipleCombobox({
+      const {rerender} = renderMultipleCombobox({
         multipleSelectionProps: {
           selectedItems,
           initialActiveIndex: 0,
@@ -582,7 +562,7 @@ describe('props', () => {
         },
       })
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
       rerender({multipleSelectionProps: {selectedItems}})
 
       expect(getSelectedItems()).toHaveLength(1)
@@ -607,22 +587,16 @@ describe('props', () => {
   })
 
   describe('onStateChange', () => {
-    test('is called at each state property change', () => {
+    test('is called at each state property change', async () => {
       const onStateChange = jest.fn()
-      const {
-        keyDownOnSelectedItemAtIndex,
-        clickOnSelectedItemAtIndex,
-        keyDownOnInput,
-        input,
-      } = renderMultipleCombobox({
+      renderMultipleCombobox({
         multipleSelectionProps: {
           initialSelectedItems: [items[0], items[1], items[2]],
           onStateChange,
         },
       })
 
-      input.focus()
-      keyDownOnInput('Backspace')
+      await keyDownOnInput('{Backspace}')
 
       expect(onStateChange).toHaveBeenCalledTimes(1)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -632,7 +606,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnInput('ArrowLeft')
+      await keyDownOnInput('{ArrowLeft}')
 
       expect(onStateChange).toHaveBeenCalledTimes(2)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -642,7 +616,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(1, 'ArrowLeft')
+      await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
       expect(onStateChange).toHaveBeenCalledTimes(3)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -652,7 +626,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'ArrowRight')
+      await keyDownOnSelectedItemAtIndex(0, '{ArrowRight}')
 
       expect(onStateChange).toHaveBeenCalledTimes(4)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -662,7 +636,7 @@ describe('props', () => {
         }),
       )
 
-      clickOnSelectedItemAtIndex(0)
+      await clickOnSelectedItemAtIndex(0)
 
       expect(onStateChange).toHaveBeenCalledTimes(5)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -672,7 +646,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'Delete')
+      await keyDownOnSelectedItemAtIndex(0, '{Delete}')
 
       expect(onStateChange).toHaveBeenCalledTimes(6)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -682,7 +656,7 @@ describe('props', () => {
         }),
       )
 
-      keyDownOnSelectedItemAtIndex(0, 'Backspace')
+      await keyDownOnSelectedItemAtIndex(0, '{Backspace}')
 
       expect(onStateChange).toHaveBeenCalledTimes(7)
       expect(onStateChange).toHaveBeenLastCalledWith(
@@ -694,35 +668,30 @@ describe('props', () => {
     })
   })
 
-  test('overrides navigation previos and next keys correctly', () => {
-    const {
-      keyDownOnInput,
-      getSelectedItemAtIndex,
-      keyDownOnSelectedItemAtIndex,
-      input,
-    } = renderMultipleCombobox({
+  test('overrides navigation previos and next keys correctly', async () => {
+    renderMultipleCombobox({
       multipleSelectionProps: {
-        keyNavigationPrevious: 'ArrowUp',
-        keyNavigationNext: 'ArrowDown',
+        keyNavigationPrevious: 'ArrowRight',
+        keyNavigationNext: 'ArrowLeft',
         initialSelectedItems: [items[0], items[1]],
       },
     })
 
-    keyDownOnInput('ArrowUp')
+    await keyDownOnInput('{ArrowRight}')
 
     expect(getSelectedItemAtIndex(1)).toHaveFocus()
 
-    keyDownOnSelectedItemAtIndex(1, 'ArrowUp')
+    await keyDownOnSelectedItemAtIndex(1, '{ArrowRight}')
 
     expect(getSelectedItemAtIndex(0)).toHaveFocus()
 
-    keyDownOnSelectedItemAtIndex(0, 'ArrowDown')
+    await keyDownOnSelectedItemAtIndex(0, '{ArrowLeft}')
 
     expect(getSelectedItemAtIndex(1)).toHaveFocus()
 
-    keyDownOnSelectedItemAtIndex(1, 'ArrowDown')
+    await keyDownOnSelectedItemAtIndex(1, '{ArrowLeft}')
 
-    expect(input).toHaveFocus()
+    expect(getInput()).toHaveFocus()
   })
 
   test('can have downshift actions executed', () => {
diff --git a/src/hooks/useMultipleSelection/testUtils.js b/src/hooks/useMultipleSelection/testUtils.js
index 8dd5e2310..ccbb1f331 100644
--- a/src/hooks/useMultipleSelection/testUtils.js
+++ b/src/hooks/useMultipleSelection/testUtils.js
@@ -1,13 +1,16 @@
 import * as React from 'react'
 
-import {render, fireEvent, screen} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import {renderHook} from '@testing-library/react-hooks'
-import userEvent from '@testing-library/user-event'
 import {defaultProps} from '../utils'
-import {items} from '../testUtils'
+import {items, user, dataTestIds} from '../testUtils'
 import useCombobox from '../useCombobox'
+import {getInput, keyDownOnInput} from '../useCombobox/testUtils'
 import useMultipleSelection from '.'
 
+export * from '../testUtils'
+export {getInput, keyDownOnInput}
+
 jest.mock('../../utils', () => {
   const utils = jest.requireActual('../../utils')
 
@@ -30,27 +33,46 @@ jest.mock('../utils', () => {
 beforeEach(jest.resetAllMocks)
 afterAll(jest.restoreAllMocks)
 
-export const dataTestIds = {
-  selectedItemPrefix: 'selected-item-id',
-  selectedItem: index => `selected-item-id-${index}`,
-  input: 'input-id',
+export function getSelectedItemAtIndex(index) {
+  return screen.getByTestId(dataTestIds.selectedItem(index))
+}
+
+export function getSelectedItems() {
+  return screen.queryAllByTestId(new RegExp(dataTestIds.selectedItemPrefix))
+}
+
+export async function clickOnSelectedItemAtIndex(index) {
+  await user.click(getSelectedItemAtIndex(index))
+}
+export async function keyDownOnSelectedItemAtIndex(index, key) {
+  const selectedItem = getSelectedItemAtIndex(index)
+
+  if (document.activeElement !== selectedItem) {
+    selectedItem.focus()
+  }
+
+  await user.keyboard(key)
+}
+
+export function focusSelectedItemAtIndex(index) {
+  getSelectedItemAtIndex(index).focus()
+}
+
+export async function clickOnInput() {
+  await user.click(getInput())
 }
 
 const DropdownMultipleCombobox = ({
   multipleSelectionProps = {},
   comboboxProps = {},
 }) => {
-  const {
-    getSelectedItemProps,
-    getDropdownProps,
-    selectedItems,
-  } = useMultipleSelection(multipleSelectionProps)
+  const {getSelectedItemProps, getDropdownProps, selectedItems} =
+    useMultipleSelection(multipleSelectionProps)
   const {
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
     getInputProps,
-    getComboboxProps,
   } = useCombobox({
     items,
     ...comboboxProps,
@@ -72,7 +94,7 @@ const DropdownMultipleCombobox = ({
             {itemToString(selectedItem)}
           </span>
         ))}
-        <div data-testid={dataTestIds.combobox} {...getComboboxProps()}>
+        <div data-testid={dataTestIds.combobox}>
           <input
             data-testid={dataTestIds.input}
             {...getInputProps(getDropdownProps())}
@@ -87,54 +109,12 @@ const DropdownMultipleCombobox = ({
 
 export const renderMultipleCombobox = props => {
   const utils = render(<DropdownMultipleCombobox {...props} />)
-  const label = screen.getByText(/choose an element/i)
-  const menu = screen.getByRole('listbox')
-  const input = screen.getByTestId(dataTestIds.input)
   const rerender = newProps =>
     utils.rerender(<DropdownMultipleCombobox {...newProps} />)
-  const getSelectedItemAtIndex = index =>
-    screen.getByTestId(dataTestIds.selectedItem(index))
-  const getSelectedItems = () =>
-    screen.queryAllByTestId(new RegExp(dataTestIds.selectedItemPrefix))
-  const clickOnSelectedItemAtIndex = index => {
-    fireEvent.click(getSelectedItemAtIndex(index))
-  }
-  const keyDownOnSelectedItemAtIndex = (index, key, options = {}) => {
-    fireEvent.keyDown(getSelectedItemAtIndex(index), {key, ...options})
-  }
-  const focusSelectedItemAtIndex = index => {
-    getSelectedItemAtIndex(index).focus()
-  }
-  const getA11yStatusContainer = () => screen.queryByRole('status')
-  const focusInput = () => {
-    input.focus()
-  }
-  const keyDownOnInput = (key, options = {}) => {
-    if (document.activeElement !== input) {
-      focusInput()
-    }
-
-    fireEvent.keyDown(input, {key, ...options})
-  }
-  const clickOnInput = () => {
-    userEvent.click(input)
-  }
 
   return {
     ...utils,
-    label,
-    menu,
     rerender,
-    getSelectedItemAtIndex,
-    clickOnSelectedItemAtIndex,
-    keyDownOnSelectedItemAtIndex,
-    focusSelectedItemAtIndex,
-    getSelectedItems,
-    getA11yStatusContainer,
-    input,
-    keyDownOnInput,
-    focusInput,
-    clickOnInput,
   }
 }
 
diff --git a/src/hooks/useSelect/README.md b/src/hooks/useSelect/README.md
index 541c0ac7b..a159bca4a 100644
--- a/src/hooks/useSelect/README.md
+++ b/src/hooks/useSelect/README.md
@@ -23,6 +23,13 @@ implement the corresponding ARIA pattern. Every functionality needed should be
 provided out-of-the-box: menu toggle, item selection and up/down movement
 between them, screen reader support, highlight by character keys etc.
 
+## Migration to v7
+
+`useSelect` received some changes related to its API and how it works in version
+7, as a conequence of adapting it to the ARIA 1.2 select-only combobox pattern.
+If you were using _useSelect_ previous to 7.0.0, check the [migration
+guide][migration-guide-v7] and update if necessary.
+
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -55,15 +62,21 @@ between them, screen reader support, highlight by character keys etc.
   - [toggleButtonId](#togglebuttonid)
   - [getItemId](#getitemid)
   - [environment](#environment)
-  - [circularNavigation](#circularnavigation)
 - [stateChangeTypes](#statechangetypes)
 - [Control Props](#control-props)
 - [Returned props](#returned-props)
   - [prop getters](#prop-getters)
+    - [`getLabelProps`](#getlabelprops)
+    - [`getMenuProps`](#getmenuprops)
+    - [`getItemProps`](#getitemprops)
+    - [`getToggleButtonProps`](#gettogglebuttonprops)
   - [actions](#actions)
   - [state](#state)
 - [Event Handlers](#event-handlers)
   - [Default handlers](#default-handlers)
+    - [Toggle Button](#toggle-button)
+    - [Menu](#menu)
+    - [Item](#item)
   - [Customizing Handlers](#customizing-handlers)
 - [Examples](#examples)
 
@@ -93,9 +106,7 @@ function DropdownSelect() {
   return (
     <div>
       <label {...getLabelProps()}>Choose an element:</label>
-      <button type="button" {...getToggleButtonProps()}>
-        {selectedItem || 'Elements'}
-      </button>
+      <div {...getToggleButtonProps()}>{selectedItem || 'Elements'}</div>
       <ul {...getMenuProps()} style={menuStyles}>
         {isOpen &&
           items.map((item, index) => (
@@ -423,14 +434,6 @@ then you will need to pass in a custom object that is able to provide
 [access to these properties](https://gist.github.com/Rendez/1dd55882e9b850dd3990feefc9d6e177)
 for downshift.
 
-### circularNavigation
-
-> `boolean` | defaults to `false`
-
-Controls the circular keyboard navigation between items. If set to `true`, when
-first item is highlighted, the Arrow Up will move highlight to the last item,
-and viceversa using Arrow Down.
-
 ## stateChangeTypes
 
 There are a few props that expose changes to state
@@ -442,22 +445,21 @@ object you get. This `type` corresponds to a `stateChangeTypes` property.
 The list of all possible values this `type` property can take is defined in
 [this file][state-change-file] and is as follows:
 
-- `useSelect.stateChangeTypes.MenuKeyDownArrowDown`
-- `useSelect.stateChangeTypes.MenuKeyDownArrowUp`
-- `useSelect.stateChangeTypes.MenuKeyDownEscape`
-- `useSelect.stateChangeTypes.MenuKeyDownHome`
-- `useSelect.stateChangeTypes.MenuKeyDownEnd`
-- `useSelect.stateChangeTypes.MenuKeyDownEnter`
-- `useSelect.stateChangeTypes.MenuKeyDownSpaceButton`
-- `useSelect.stateChangeTypes.MenuKeyDownCharacter`
-- `useSelect.stateChangeTypes.MenuBlur`
-- `useSelect.stateChangeTypes.MenuMouseLeave`
-- `useSelect.stateChangeTypes.ItemMouseMove`
-- `useSelect.stateChangeTypes.ItemClick`
-- `useSelect.stateChangeTypes.ToggleButtonKeyDownCharacter`
 - `useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown`
 - `useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownEscape`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownHome`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownEnd`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownPageUp`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownPageDown`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownEnter`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton`
+- `useSelect.stateChangeTypes.ToggleButtonKeyDownCharacter`
+- `useSelect.stateChangeTypes.ToggleButtonBlur`
 - `useSelect.stateChangeTypes.ToggleButtonClick`
+- `useSelect.stateChangeTypes.MenuMouseLeave`
+- `useSelect.stateChangeTypes.ItemMouseMove`
+- `useSelect.stateChangeTypes.ItemClick`
 - `useSelect.stateChangeTypes.FunctionToggleMenu`
 - `useSelect.stateChangeTypes.FunctionOpenMenu`
 - `useSelect.stateChangeTypes.FunctionCloseMenu`
@@ -506,7 +508,7 @@ const {getToggleButtonProps, reset, ...rest} = useSelect({
 
 return (
   <div>
-    <button {...getToggleButtonProps()}>Options</button>
+    <div {...getToggleButtonProps()}>Options</div>
     {/* render the menu and items */}
     {/* render a button that resets the select to defaults */}
     <button
@@ -542,12 +544,12 @@ props being overridden (or overriding the props returned). For example:
 
 <!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
 
-| property               | type           | description                                                                                    |
-| ---------------------- | -------------- | ---------------------------------------------------------------------------------------------- |
-| `getToggleButtonProps` | `function({})` | returns the props you should apply to any menu toggle button element you render.               |
-| `getItemProps`         | `function({})` | returns the props you should apply to any menu item elements you render.                       |
-| `getLabelProps`        | `function({})` | returns the props you should apply to the `label` element that you render.                     |
-| `getMenuProps`         | `function({})` | returns the props you should apply to the `ul` element (or root of your menu) that you render. |
+| property               | type           | description                                                                                                                                     |
+| ---------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `getToggleButtonProps` | `function({})` | returns the props you should apply to the trigger element you render. Since it will receive the role of `combobox`, we chose a `<div>` element. |
+| `getItemProps`         | `function({})` | returns the props you should apply to any menu item elements you render.                                                                        |
+| `getLabelProps`        | `function({})` | returns the props you should apply to the `label` element that you render.                                                                      |
+| `getMenuProps`         | `function({})` | returns the props you should apply to the `ul` element (or root of your menu) that you render.                                                  |
 
 #### `getLabelProps`
 
@@ -678,8 +680,10 @@ Optional properties:
 
 #### `getToggleButtonProps`
 
-Call this and apply the returned props to a `button`. It allows you to toggle
-the `Menu` component.
+Call this and apply the returned props to a `div` element that will act as a
+triggering button. Since ARIA 1.2, the trigger element will reiceve a `combobox`
+role, so a `<button>` is not considered correct markup anymore. It allows you to
+toggle the `Menu` component.
 
 Optional properties:
 
@@ -754,56 +758,53 @@ described below.
 #### Toggle Button
 
 - `Click`: If the menu is not displayed, it will open it. Otherwise it will
-  close it. It will additionally move focus on the menu in order for screen
-  readers to correctly narrate which item is currently highlighted. If there is
-  already an item selected, the menu will be opened with that item already
-  highlighted.
-- `Enter`: Has the same effect as `Click`.
-- `Space`: Has the same effect as `Click`.
-- `CharacterKey`: Selects the option that starts with that key without opening
-  the dropdown list. For instance, typing `C` will select the option that starts
-  with `C`. Typing keys into rapid succession (in less than 500ms each) will
-  select the option starting with that key combination, for instance typing
-  `CAL` will select `californium` if this option exists.
+  close it. If there is already an item selected, the menu will be opened with
+  that item already highlighted.
+- `Enter`: If the menu is closed, opens the menu. If the menu is opened and
+  there is an item highlighted, it will select that item.
+- `Space`: If the menu is closed, opens the menu. If the menu is opened and
+  there is an item highlighted, it will select that item. If the user has typed
+  character keys before pressing `Space`, the space character will concatenate
+  to the search query. This allows search for options such as `Republic of ..`.
+- `CharacterKey`: Opens the menu if closed and highlights the first option that
+  starts with that key. For instance, typing `C` will select the option that
+  starts with `C`. Pressing `C` again will move the highlight to the next item
+  that starts with `C`. Typing keys into rapid succession (in less than 500ms
+  each) will select the option starting with that key combination, for instance
+  typing `CAL` will select `californium` if this option exists.
 - `ArrowDown`: If the menu is closed, it will open it. If there is already an
-  item selected, it will open the menu with the next item (index-wise)
-  highlighted. Otherwise, it will open the menu with the first option
-  highlighted.
+  item selected, it will open the menu with the selected item highlighted.
+  Otherwise, it will open the menu with the first option highlighted. If the
+  menu is already open, it will highlight the next item.
 - `ArrowUp`: If the menu is closed, it will open it. If there is already an item
-  selected, it will open the menu with the previous item (index-wise)
-  highlighted. Otherwise, it will open the menu with the last option
-  highlighted.
+  selected, it will open the menu with the selected item highlighted. Otherwise,
+  it will open the menu with the last option highlighted. If the menu is already
+  open, it will highlight the previous item.
+- `Alt+ArrowDown`: If the menu is closed, it will open it, without highlighting
+  any item.
+- `Alt+ArrowUp`: If the menu is open, it will close it and will select the item
+  that was highlighted.
+- `End`: If the menu is closed, it will open it. It will also highlight the last
+  item in the list.
+- `Home`: If the menu is closed, it will open it. It will also highlight the
+  first item in the list.
+- `PageUp`: If the menu is open, it will move the highlight the item 10
+  positions before the current selection.
+- `PageDown`: If the menu is open, it will move the highlight the item 10
+  positions after the current selection.
+- `Escape`: It will close the menu without selecting anything and keeps focus to
+  the toggle button.
+- `Blur(Tab, Shift+Tab, MouseClick outside)`: It will close the menu will select
+  the highlighted item if any. Focus is handled naturally (next / previous
+  elemenent in the tab order, body element if click outside.).
 
 #### Menu
 
-- `ArrowDown`: Moves `highlightedIndex` one position down. If
-  `circularNavigation` is true, when reaching the last option, `ArrowDown` will
-  move `highlightedIndex` to first position. Otherwise it won't change anything.
-- `ArrowUp`: Moves `highlightedIndex` one position up. If `circularNavigation`
-  is true, when reaching the first option, `ArrowUp` will move
-  `highlightedIndex` to last position. Otherwise it won't change anything.
-- `CharacterKey`: Moves `highlightedIndex` to the option that starts with that
-  key. For instance, typing `C` will move highlight to the option that starts
-  with `C`. Typing keys into rapid succession (in less than 500ms each) will
-  move `highlightedIndex` to the option starting with that key combination, for
-  instance typing `CAL` will move the highlight to `californium` if this option
-  exists.
-- `End`: Moves `highlightedIndex` to last position.
-- `Home`: Moves `highlightedIndex` to first position.
-- `Enter`: If there is a highlighted option, it will select it, close the menu
-  and move focus to the toggle button (unless `defaultIsOpen` is true).
-- `Escape`: It will close the menu without selecting anything and move focus to
-  the toggle button.
-- `Blur(Tab, Shift+Tab, MouseClick outside)`: It will close the menu and move
-  focus either to the toggle button (if `Shift+Tab`), next tabbable element (if
-  `Tab`) or whatever was clicked. It will not select the highlighted item
-  anymore, if any.
 - `MouseLeave`: Will clear the value of the `highlightedIndex` if it was set.
 
 #### Item
 
-- `Click`: It will select the item, close the menu and move focus to the toggle
-  button (unless `defaultIsOpen` is true).
+- `Click`: It will select the item and close the menu.
 - `MouseOver`: It will highlight the item.
 
 ### Customizing Handlers
@@ -877,7 +878,7 @@ docsite examples. If you have such an example, please create an issue with the
 suggestion and the Codesandbox for it, and we will take it from there.
 
 [select-aria]:
-  https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html
+  https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
 [sandbox-example]:
   https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useSelect/basic-usage.js
 [state-change-file]:
@@ -886,3 +887,5 @@ suggestion and the Codesandbox for it, and we will take it from there.
   https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf
 [docsite]: https://downshift-js.com/
 [sandbox-repo]: https://codesandbox.io/s/github/kentcdodds/downshift-examples
+[migration-guide-v7]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md#useselect
diff --git a/src/hooks/useSelect/__tests__/getItemProps.test.js b/src/hooks/useSelect/__tests__/getItemProps.test.js
index b94903323..3814ad05f 100644
--- a/src/hooks/useSelect/__tests__/getItemProps.test.js
+++ b/src/hooks/useSelect/__tests__/getItemProps.test.js
@@ -1,5 +1,15 @@
 import {act} from '@testing-library/react-hooks'
-import {renderUseSelect, renderSelect} from '../testUtils'
+import {
+  renderUseSelect,
+  renderSelect,
+  mouseMoveItemAtIndex,
+  getItemAtIndex,
+  getToggleButton,
+  clickOnItemAtIndex,
+  getItems,
+  keyDownOnToggleButton,
+  clickOnToggleButton,
+} from '../testUtils'
 import {items, defaultIds} from '../../testUtils'
 
 describe('getItemProps', () => {
@@ -33,11 +43,16 @@ describe('getItemProps', () => {
       expect(result.current.getItemProps({index: 0}).id).toEqual(getItemId(0))
     })
 
-    test("assign 'true' to aria-selected if item is highlighted", () => {
-      const {result} = renderUseSelect({highlightedIndex: 2})
-      const itemProps = result.current.getItemProps({index: 2})
+    test("assign 'true' to aria-selected if item is selected", () => {
+      const {result} = renderUseSelect({
+        highlightedIndex: 2,
+        selectedItem: items[3],
+      })
+      const item2Props = result.current.getItemProps({index: 2})
+      const item3Props = result.current.getItemProps({index: 3})
 
-      expect(itemProps['aria-selected']).toEqual('true')
+      expect(item2Props['aria-selected']).toEqual('false')
+      expect(item3Props['aria-selected']).toEqual('true')
     })
 
     test("assign 'false' to aria-selected if item is not highlighted", () => {
@@ -146,114 +161,141 @@ describe('getItemProps', () => {
 
   describe('event handlers', () => {
     describe('on mouse over', () => {
-      test('it highlights the item', () => {
+      test('it highlights the item', async () => {
         const index = 1
-        const {mouseMoveItemAtIndex, menu, getItemAtIndex} = renderSelect({
+
+        renderSelect({
           isOpen: true,
         })
 
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
-        expect(menu).toHaveAttribute(
+        expect(getToggleButton()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
-        expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
       })
 
-      test('it removes highlight from the previously highlighted item', () => {
+      test('it highlights successive items item', async () => {
+        renderSelect({
+          isOpen: true,
+        })
+
+        await mouseMoveItemAtIndex(3)
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(3),
+        )
+
+        await mouseMoveItemAtIndex(2)
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(2),
+        )
+
+        await mouseMoveItemAtIndex(1)
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(1),
+        )
+      })
+
+      test('it removes highlight from the previously highlighted item', async () => {
         const index = 1
         const previousIndex = 2
-        const {mouseMoveItemAtIndex, menu, getItemAtIndex} = renderSelect({
+        renderSelect({
           isOpen: true,
           initialHighlightedIndex: previousIndex,
         })
+        const toggleButton = getToggleButton()
 
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
-        expect(menu).not.toHaveAttribute(
+        expect(toggleButton).not.toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(previousIndex),
         )
-        expect(getItemAtIndex(previousIndex)).toHaveAttribute(
-          'aria-selected',
-          'false',
-        )
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
-        expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
       })
 
-      it('keeps highlight on multiple events', () => {
+      it('keeps highlight on multiple events', async () => {
         const index = 1
-        const {mouseMoveItemAtIndex, menu, getItemAtIndex} = renderSelect({
+        renderSelect({
           isOpen: true,
         })
 
-        mouseMoveItemAtIndex(index)
-        mouseMoveItemAtIndex(index)
-        mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
+        await mouseMoveItemAtIndex(index)
 
-        expect(menu).toHaveAttribute(
+        expect(getToggleButton()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(index),
         )
-        expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
       })
 
-      it('removes highlight from previous item even if current item is disabled', () => {
+      it('removes highlight from previous item even if current item is disabled', async () => {
         const disabledIndex = 1
         const highlightedIndex = 2
         const itemsWithDisabled = [...items].map((item, index) =>
           index === disabledIndex ? {...item, disabled: true} : item,
         )
 
-        const {menu, mouseMoveItemAtIndex} = renderSelect({
+        renderSelect({
           items: itemsWithDisabled,
           isOpen: true,
         })
+        const toggleButton = getToggleButton()
 
-        mouseMoveItemAtIndex(highlightedIndex)
+        await mouseMoveItemAtIndex(highlightedIndex)
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(highlightedIndex),
         )
 
-        mouseMoveItemAtIndex(disabledIndex)
-        expect(menu).not.toHaveAttribute('aria-activedescendant')
+        await mouseMoveItemAtIndex(disabledIndex)
+        expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
       })
     })
 
     describe('on click', () => {
-      test('it selects the item', () => {
+      test('it selects the item', async () => {
         const index = 1
-        const {clickOnItemAtIndex, toggleButton, getItems} = renderSelect({
+        renderSelect({
           initialIsOpen: true,
+          defaultHighlightedIndex: 3,
         })
 
-        clickOnItemAtIndex(index)
+        await clickOnItemAtIndex(index)
 
         expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent(items[index])
+        expect(getToggleButton()).toHaveTextContent(items[index])
+
+        await clickOnToggleButton()
+
+        expect(getItemAtIndex(index)).toHaveAttribute('aria-selected', 'true')
       })
 
-      test('it selects the item and resets to user defined defaults', () => {
+      test('it selects the item and resets to user defined defaults', async () => {
         const index = 1
-        const {clickOnItemAtIndex, menu, toggleButton, getItems} = renderSelect(
-          {
-            defaultIsOpen: true,
-            defaultHighlightedIndex: 2,
-          },
-        )
+        renderSelect({
+          defaultIsOpen: true,
+          defaultHighlightedIndex: 2,
+        })
+        const toggleButton = getToggleButton()
 
-        clickOnItemAtIndex(index)
+        await clickOnItemAtIndex(index)
 
         expect(toggleButton).toHaveTextContent(items[index])
         expect(getItems()).toHaveLength(items.length)
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(2),
         )
@@ -262,14 +304,14 @@ describe('getItemProps', () => {
   })
 
   describe('scrolling', () => {
-    test('is performed by the menu to the item if highlighted and not 100% visible', () => {
+    test('is performed by the menu to the item if highlighted and not 100% visible', async () => {
       const scrollIntoView = jest.fn()
-      const {keyDownOnMenu} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         scrollIntoView,
       })
 
-      keyDownOnMenu('End')
+      await keyDownOnToggleButton('{End}')
 
       expect(scrollIntoView).toHaveBeenCalledTimes(1)
     })
diff --git a/src/hooks/useSelect/__tests__/getMenuProps.test.js b/src/hooks/useSelect/__tests__/getMenuProps.test.js
index 4e74cf253..e23844c7d 100644
--- a/src/hooks/useSelect/__tests__/getMenuProps.test.js
+++ b/src/hooks/useSelect/__tests__/getMenuProps.test.js
@@ -1,17 +1,13 @@
-/* eslint-disable jest/no-disabled-tests */
-import * as React from 'react'
 import {renderHook, act as hooksAct} from '@testing-library/react-hooks'
 import {
-  act as reactAct,
-  fireEvent,
-  screen,
-  createEvent,
-} from '@testing-library/react'
-import {renderUseSelect, renderSelect} from '../testUtils'
+  renderUseSelect,
+  renderSelect,
+  getToggleButton,
+  mouseLeaveItemAtIndex,
+  mouseMoveItemAtIndex,
+} from '../testUtils'
 import {defaultIds, items} from '../../testUtils'
-// eslint-disable-next-line import/default
 import utils from '../../utils'
-import * as stateChangeTypes from '../stateChangeTypes'
 import useSelect from '..'
 
 describe('getMenuProps', () => {
@@ -63,29 +59,6 @@ describe('getMenuProps', () => {
 
       expect(menuProps.tabIndex).toEqual(-1)
     })
-
-    test('assign id of highlighted item to aria-activedescendant if item is highlighted and menu is open', () => {
-      const {result} = renderUseSelect({highlightedIndex: 2, isOpen: true})
-      const menuProps = result.current.getMenuProps()
-
-      expect(menuProps['aria-activedescendant']).toEqual(
-        defaultIds.getItemId(2),
-      )
-    })
-
-    test('do not assign aria-activedescendant if item is highlighted and menu is closed', () => {
-      const {result} = renderUseSelect({highlightedIndex: 2})
-      const menuProps = result.current.getMenuProps()
-
-      expect(menuProps['aria-activedescendant']).toBeUndefined()
-    })
-
-    test('do not assign aria-activedescendant if no item is highlighted', () => {
-      const {result} = renderUseSelect()
-      const menuProps = result.current.getMenuProps()
-
-      expect(menuProps['aria-activedescendant']).toBeUndefined()
-    })
   })
 
   describe('user props', () => {
@@ -170,782 +143,26 @@ describe('getMenuProps', () => {
       expect(userOnMouseLeave).toHaveBeenCalledTimes(1)
       expect(result.current.highlightedIndex).toBe(2)
     })
-
-    test('event handler onKeyDown is called along with downshift handler', () => {
-      const userOnKeyDown = jest.fn()
-      const {result} = renderUseSelect({initialIsOpen: true})
-
-      hooksAct(() => {
-        const {onKeyDown} = result.current.getMenuProps({
-          onKeyDown: userOnKeyDown,
-        })
-
-        onKeyDown({key: 'Escape'})
-      })
-
-      expect(userOnKeyDown).toHaveBeenCalledTimes(1)
-      expect(result.current.isOpen).toBe(false)
-    })
-
-    test("event handler onKeyDown is called without downshift handler if 'preventDownshiftDefault' is passed in user event", () => {
-      const userOnKeyDown = jest.fn(event => {
-        event.preventDownshiftDefault = true
-      })
-      const {result} = renderUseSelect({initialIsOpen: true})
-
-      hooksAct(() => {
-        const {onKeyDown} = result.current.getMenuProps({
-          onKeyDown: userOnKeyDown,
-        })
-
-        onKeyDown({key: 'Escape'})
-      })
-
-      expect(userOnKeyDown).toHaveBeenCalledTimes(1)
-      expect(result.current.isOpen).toBe(true)
-    })
-
-    test('event handler onBlur is called along with downshift handler', () => {
-      const userOnBlur = jest.fn()
-      const {result} = renderUseSelect({initialIsOpen: true})
-
-      hooksAct(() => {
-        const {onBlur} = result.current.getMenuProps({
-          onBlur: userOnBlur,
-        })
-
-        onBlur({})
-      })
-
-      expect(userOnBlur).toHaveBeenCalledTimes(1)
-      expect(result.current.isOpen).toBe(false)
-    })
-
-    test("event handler onBlur is called without downshift handler if 'preventDownshiftDefault' is passed in user event", () => {
-      const userOnBlur = jest.fn(event => {
-        event.preventDownshiftDefault = true
-      })
-      const {result} = renderUseSelect({initialIsOpen: true})
-
-      hooksAct(() => {
-        const {onBlur} = result.current.getMenuProps({
-          onBlur: userOnBlur,
-        })
-
-        onBlur({})
-      })
-
-      expect(userOnBlur).toHaveBeenCalledTimes(1)
-      expect(result.current.isOpen).toBe(true)
-    })
-  })
-
-  describe('initial focus', () => {
-    test('is grabbed when isOpen is passed as true', () => {
-      const {menu} = renderSelect({isOpen: true})
-
-      expect(menu).toHaveFocus()
-    })
-
-    test('is grabbed when initialIsOpen is passed as true', () => {
-      const {menu} = renderSelect({initialIsOpen: true})
-
-      expect(menu).toHaveFocus()
-    })
-
-    test('is grabbed when defaultIsOpen is passed as true', () => {
-      const {menu} = renderSelect({defaultIsOpen: true})
-
-      expect(menu).toHaveFocus()
-    })
-
-    test('is not grabbed when initial open is set to default (false)', () => {
-      const {menu} = renderSelect()
-
-      expect(menu).not.toHaveFocus()
-    })
   })
 
   describe('event handlers', () => {
-    describe('on keydown', () => {
-      describe('character key', () => {
-        beforeEach(jest.useFakeTimers)
-        afterEach(() => {
-          reactAct(() => jest.runAllTimers())
-        })
-        afterAll(jest.useRealTimers)
-
-        const startsWithCharacter = (option, character) => {
-          return option.toLowerCase().startsWith(character.toLowerCase())
-        }
-
-        test('should highlight the first item that starts with that key', () => {
-          const char = 'c'
-          const expectedIndex = defaultIds.getItemId(
-            items.indexOf(items.find(item => startsWithCharacter(item, char))),
-          )
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(char)
-
-          expect(menu).toHaveAttribute('aria-activedescendant', expectedIndex)
-        })
-
-        test('should highlight the second item that starts with that key after typing it twice', () => {
-          const char = 'c'
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(char)
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(3),
-          )
-          reactAct(jest.runOnlyPendingTimers)
-          keyDownOnMenu(char)
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(5),
-          )
-        })
-
-        test('should highlight the first item again if the items are depleated', () => {
-          const char = 'b'
-          const expectedIndex = defaultIds.getItemId(
-            items.indexOf(items.find(item => startsWithCharacter(item, char))),
-          )
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(char)
-          reactAct(jest.runOnlyPendingTimers)
-          keyDownOnMenu(char)
-          reactAct(jest.runOnlyPendingTimers)
-          keyDownOnMenu(char)
-
-          expect(menu).toHaveAttribute('aria-activedescendant', expectedIndex)
-        })
-
-        test('should not highlight anything if no item starts with that key', () => {
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu('x')
-
-          expect(menu).not.toHaveAttribute('aria-activedescendant')
-        })
-
-        test('should highlight the first item that starts with the keys typed in rapid succession', () => {
-          const chars = ['c', 'a']
-          const expectedIndex = defaultIds.getItemId(
-            items.indexOf(
-              items.find(item => startsWithCharacter(item, chars.join(''))),
-            ),
-          )
-
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(chars[0])
-          reactAct(() => jest.advanceTimersByTime(200))
-          keyDownOnMenu(chars[1])
-
-          expect(menu).toHaveAttribute('aria-activedescendant', expectedIndex)
-        })
-
-        test('should become first character after timeout passes', () => {
-          const chars = ['c', 'a', 'l']
-          const expectedIndex = defaultIds.getItemId(
-            items.indexOf(
-              items.find(item => startsWithCharacter(item, chars[2])),
-            ),
-          )
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(chars[0])
-          reactAct(() => jest.advanceTimersByTime(200))
-          keyDownOnMenu(chars[1])
-          reactAct(jest.runOnlyPendingTimers)
-          keyDownOnMenu(chars[2])
-
-          expect(menu).toHaveAttribute('aria-activedescendant', expectedIndex)
-        })
-
-        /* Here we just want to make sure the keys cleanup works. */
-        test('should not go to the second option starting with the key if timeout did not pass', () => {
-          const char = 'c'
-          const expectedIndex = defaultIds.getItemId(
-            items.indexOf(items.find(item => startsWithCharacter(item, char))),
-          )
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu(char)
-          reactAct(() => jest.advanceTimersByTime(200)) // wait some time but not enough to trigger debounce.
-          keyDownOnMenu(char)
-
-          // highlight should stay on the first item starting with 'C'
-          expect(menu).toHaveAttribute('aria-activedescendant', expectedIndex)
-        })
-
-        test('should not attempt update after unmount', () => {
-          const consoleErrorSpy = jest.spyOn(console, 'error')
-          const char = 'c'
-          const {keyDownOnMenu, unmount} = renderSelect({
-            isOpen: true,
-          })
-
-          // Enter key twice to queue up debounced call
-          keyDownOnMenu(char)
-          keyDownOnMenu(char)
-          unmount()
-          jest.runAllTimers()
-
-          expect(consoleErrorSpy).not.toHaveBeenCalled()
-        })
-      })
-
-      describe('arrow up', () => {
-        test('it prevents the default event behavior', () => {
-          const {menu} = renderSelect()
-          const keyDownEvent = createEvent.keyDown(menu, {key: 'ArrowUp'})
-
-          fireEvent(menu, keyDownEvent)
-
-          expect(keyDownEvent.defaultPrevented).toBe(true)
-        })
-
-        test('it does not highlight anything if there are no options', () => {
-          const {keyDownOnMenu, menu, getItems} = renderSelect({
-            isOpen: true,
-            items: [],
-          })
-
-          keyDownOnMenu('ArrowUp')
-
-          expect(menu).not.toHaveAttribute('aria-activedescendant')
-          expect(getItems()).toHaveLength(0)
-        })
-
-        test('it highlights the last option number if none is highlighted', () => {
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu('ArrowUp')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
-          )
-        })
-
-        test('it highlights the previous item', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowUp')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex - 1),
-          )
-        })
-
-        test('with shift it highlights the 5th previous item', () => {
-          const initialHighlightedIndex = 6
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowUp', {shiftKey: true})
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex - 5),
-          )
-        })
-
-        test('with shift it highlights the first item if not enough items remaining', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowUp', {shiftKey: true})
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(0),
-          )
-        })
-
-        test('will stop at 0 if circularNavigatios is falsy', () => {
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex: 0,
-          })
-
-          keyDownOnMenu('ArrowUp')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(0),
-          )
-        })
-
-        test('will continue from 0 to last item if circularNavigatios is truthy', () => {
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex: 0,
-            circularNavigation: true,
-          })
-
-          keyDownOnMenu('ArrowUp')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
-          )
-        })
-      })
-
-      describe('arrow down', () => {
-        test('it prevents the default event behavior', () => {
-          const {menu} = renderSelect()
-          const keyDownEvent = createEvent.keyDown(menu, {key: 'ArrowDown'})
-
-          fireEvent(menu, keyDownEvent)
-
-          expect(keyDownEvent.defaultPrevented).toBe(true)
-        })
-
-        test('it does not highlight anything if there are no options', () => {
-          const {keyDownOnMenu, menu, getItems} = renderSelect({
-            isOpen: true,
-            items: [],
-          })
-
-          keyDownOnMenu('ArrowDown')
-
-          expect(menu).not.toHaveAttribute('aria-activedescendant')
-          expect(getItems()).toHaveLength(0)
-        })
-
-        test("it highlights option number '0' if none is highlighted", () => {
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-          })
-
-          keyDownOnMenu('ArrowDown')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(0),
-          )
-        })
-        test('it highlights the next item', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowDown')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex + 1),
-          )
-        })
-
-        test('with shift it highlights the next 5th item', () => {
-          const initialHighlightedIndex = 2
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowDown', {shiftKey: true})
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(initialHighlightedIndex + 5),
-          )
-        })
-
-        test('with shift it highlights last item if not enough next items remaining', () => {
-          const initialHighlightedIndex = items.length - 2
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowDown', {shiftKey: true})
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
-          )
-        })
-
-        test('will stop at last item if circularNavigatios is falsy', () => {
-          const initialHighlightedIndex = items.length - 1
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-          })
-
-          keyDownOnMenu('ArrowDown')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(items.length - 1),
-          )
-        })
-
-        test('will continue from last item to 0 if circularNavigatios is truthy', () => {
-          const initialHighlightedIndex = items.length - 1
-          const {keyDownOnMenu, menu} = renderSelect({
-            isOpen: true,
-            initialHighlightedIndex,
-            circularNavigation: true,
-          })
-
-          keyDownOnMenu('ArrowDown')
-
-          expect(menu).toHaveAttribute(
-            'aria-activedescendant',
-            defaultIds.getItemId(0),
-          )
-        })
-      })
-
-      test('end it highlights the last option number', () => {
-        const {keyDownOnMenu, menu} = renderSelect({
-          isOpen: true,
-          initialHighlightedIndex: 2,
-        })
-
-        keyDownOnMenu('End')
-
-        expect(menu).toHaveAttribute(
-          'aria-activedescendant',
-          defaultIds.getItemId(items.length - 1),
-        )
-      })
-
-      test('end it prevents the default event behavior', () => {
-        const {menu} = renderSelect()
-        const keyDownEvent = createEvent.keyDown(menu, {key: 'End'})
-
-        fireEvent(menu, keyDownEvent)
-
-        expect(keyDownEvent.defaultPrevented).toBe(true)
-      })
-
-      test('home it highlights the first option number', () => {
-        const {keyDownOnMenu, menu} = renderSelect({
-          isOpen: true,
-          initialHighlightedIndex: 2,
-        })
-
-        keyDownOnMenu('Home')
-
-        expect(menu).toHaveAttribute(
-          'aria-activedescendant',
-          defaultIds.getItemId(0),
-        )
-      })
-
-      test('home it prevents the default event behavior', () => {
-        const {menu} = renderSelect()
-        const keyDownEvent = createEvent.keyDown(menu, {key: 'Home'})
-
-        fireEvent(menu, keyDownEvent)
-
-        expect(keyDownEvent.defaultPrevented).toBe(true)
-      })
-
-      test('escape it has the menu closed', () => {
-        const {keyDownOnMenu, getItems} = renderSelect({
-          initialIsOpen: true,
-        })
-
-        keyDownOnMenu('Escape')
-
-        expect(getItems()).toHaveLength(0)
-      })
-
-      test('escape it has the focus moved to toggleButton', () => {
-        const {keyDownOnMenu, toggleButton} = renderSelect({
-          initialIsOpen: true,
-        })
-
-        keyDownOnMenu('Escape')
-
-        expect(toggleButton).toHaveFocus()
-      })
-
-      test('enter it closes the menu and selects highlighted item', () => {
-        const initialHighlightedIndex = 2
-        const {keyDownOnMenu, getItems, toggleButton} = renderSelect({
-          initialIsOpen: true,
-          initialHighlightedIndex,
-        })
-
-        keyDownOnMenu('Enter')
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent(items[initialHighlightedIndex])
-      })
-
-      test('enter selects highlighted item and resets to user defaults', () => {
-        const defaultHighlightedIndex = 2
-        const {keyDownOnMenu, getItems, menu, toggleButton} = renderSelect({
-          defaultHighlightedIndex,
-          defaultIsOpen: true,
-        })
-
-        keyDownOnMenu('Enter')
-
-        expect(toggleButton).toHaveTextContent(items[defaultHighlightedIndex])
-        expect(getItems()).toHaveLength(items.length)
-        expect(menu).toHaveAttribute(
-          'aria-activedescendant',
-          defaultIds.getItemId(defaultHighlightedIndex),
-        )
-      })
-
-      test('enter it has the focus moved on the toggleButton', () => {
-        const {keyDownOnMenu, toggleButton} = renderSelect({
-          initialIsOpen: true,
-        })
-
-        keyDownOnMenu('Enter')
-
-        expect(toggleButton).toHaveFocus()
-      })
-
-      test('enter it prevents the default event behavior', () => {
-        const {menu} = renderSelect()
-        const keyDownEvent = createEvent.keyDown(menu, {key: 'Enter'})
-
-        fireEvent(menu, keyDownEvent)
-
-        expect(keyDownEvent.defaultPrevented).toBe(true)
-      })
-
-      test('space it closes the menu and selects highlighted item', () => {
-        const initialHighlightedIndex = 2
-        const {keyDownOnMenu, toggleButton, getItems} = renderSelect({
-          initialIsOpen: true,
-          initialHighlightedIndex,
-        })
-
-        keyDownOnMenu(' ')
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent(items[initialHighlightedIndex])
-      })
-
-      test('space it selects highlighted item and resets to user defaults', () => {
-        const defaultHighlightedIndex = 2
-        const {keyDownOnMenu, toggleButton, menu, getItems} = renderSelect({
-          defaultHighlightedIndex,
-          defaultIsOpen: true,
-        })
-
-        keyDownOnMenu(' ')
-
-        expect(toggleButton).toHaveTextContent(items[defaultHighlightedIndex])
-        expect(getItems()).toHaveLength(items.length)
-        expect(menu).toHaveAttribute(
-          'aria-activedescendant',
-          defaultIds.getItemId(defaultHighlightedIndex),
-        )
-      })
-
-      test('space it has the focus moved on the toggleButton', () => {
-        const {keyDownOnMenu, toggleButton} = renderSelect({
-          initialIsOpen: true,
-        })
-
-        keyDownOnMenu(' ')
-
-        expect(toggleButton).toHaveFocus()
-      })
-
-      test('space it prevents the default event behavior', () => {
-        const {menu} = renderSelect()
-        const keyDownEvent = createEvent.keyDown(menu, {key: ' '})
-
-        fireEvent(menu, keyDownEvent)
-
-        expect(keyDownEvent.defaultPrevented).toBe(true)
-      })
-
-      test('tab it closes the menu and does not select highlighted item', () => {
-        const {toggleButton, tab, getItems} = renderSelect(
-          {initialIsOpen: true, initialHighlightedIndex: 2},
-          ui => {
-            return (
-              <>
-                <div tabIndex={0}>First element</div>
-                {ui}
-                <div tabIndex={0}>Second element</div>
-              </>
-            )
-          },
-        )
-
-        tab()
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent('Elements')
-      })
-
-      test('shift+tab it closes the menu', () => {
-        const {toggleButton, tab, getItems} = renderSelect(
-          {initialIsOpen: true, initialHighlightedIndex: 2},
-          ui => {
-            return (
-              <>
-                <div tabIndex={0}>First element</div>
-                {ui}
-                <div tabIndex={0}>Second element</div>
-              </>
-            )
-          },
-        )
-
-        tab(true)
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent('Elements')
-      })
-
-      test("other than the ones supported don't affect anything", () => {
-        const {keyDownOnMenu, toggleButton, getItems, menu} = renderSelect({
-          initialIsOpen: true,
-        })
-
-        keyDownOnMenu('Alt')
-        keyDownOnMenu('Control')
-
-        expect(menu).toHaveFocus()
-        expect(toggleButton).toHaveTextContent('Elements')
-        expect(toggleButton).not.toHaveAttribute('aria-activedescendant')
-        expect(getItems()).toHaveLength(items.length)
-      })
-    })
-
     describe('on mouse leave', () => {
-      test('the highlightedIndex should be reset', () => {
-        const {mouseLeaveMenu, menu} = renderSelect({
+      test('the highlightedIndex should be reset', async () => {
+        renderSelect({
           initialIsOpen: true,
-          initialHighlightedIndex: 2,
-        })
-
-        mouseLeaveMenu()
-
-        expect(menu).not.toHaveAttribute('aria-activedescendant')
-      })
-    })
-
-    describe('blur', () => {
-      test('should not select highlighted item but close the menu', () => {
-        const initialHighlightedIndex = 2
-        const {getItems, blurMenu, toggleButton} = renderSelect({
-          initialIsOpen: true,
-          initialHighlightedIndex,
-        })
-
-        blurMenu()
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent('Element')
-      })
-
-      test('by focusing another element should behave as a normal blur', () => {
-        const {toggleButton, getItems} = renderSelect(
-          {initialIsOpen: true, initialHighlightedIndex: 2},
-          ui => {
-            return (
-              <>
-                {ui}
-                <div tabIndex={0}>Second element</div>
-              </>
-            )
-          },
-        )
-
-        screen.getByText(/Second element/).focus()
-
-        expect(getItems()).toHaveLength(0)
-        expect(toggleButton).toHaveTextContent('Element')
-      })
-
-      test('by mouse is not triggered if target is within downshift', () => {
-        const stateReducer = jest.fn().mockImplementation(s => s)
-        const {toggleButton, container} = renderSelect({
-          isOpen: true,
-          stateReducer,
         })
-        document.body.appendChild(container)
+        const itemIndex = 2
 
-        fireEvent.mouseDown(toggleButton)
-        fireEvent.mouseUp(toggleButton)
+        await mouseMoveItemAtIndex(itemIndex)
 
-        expect(stateReducer).not.toHaveBeenCalled()
-
-        fireEvent.mouseDown(document.body)
-        fireEvent.mouseUp(document.body)
-
-        expect(stateReducer).toHaveBeenCalledTimes(1)
-        expect(stateReducer).toHaveBeenCalledWith(
-          expect.objectContaining({}),
-          expect.objectContaining({type: stateChangeTypes.MenuBlur}),
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(itemIndex),
         )
-      })
 
-      test('by touch is not triggered if target is within downshift', () => {
-        const stateReducer = jest.fn().mockImplementation(s => s)
-        const {container, toggleButton} = renderSelect({
-          isOpen: true,
-          stateReducer,
-        })
-        document.body.appendChild(container)
+        await mouseLeaveItemAtIndex(itemIndex)
 
-        fireEvent.touchStart(toggleButton)
-        fireEvent.touchMove(toggleButton)
-        fireEvent.touchEnd(toggleButton)
-
-        expect(stateReducer).not.toHaveBeenCalled()
-
-        fireEvent.touchStart(document.body)
-        fireEvent.touchEnd(document.body)
-
-        expect(stateReducer).toHaveBeenCalledTimes(1)
-        expect(stateReducer).toHaveBeenCalledWith(
-          expect.objectContaining({}),
-          expect.objectContaining({type: stateChangeTypes.MenuBlur}),
-        )
+        expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
       })
     })
   })
diff --git a/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js b/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js
index 9c99d1fe9..fcf46ae56 100644
--- a/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js
+++ b/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js
@@ -1,12 +1,26 @@
-/* eslint-disable jest/no-disabled-tests */
-import {act as reactAct, createEvent, fireEvent} from '@testing-library/react'
+import * as React from 'react'
+import {
+  act as reactAct,
+  createEvent,
+  fireEvent,
+  screen,
+} from '@testing-library/react'
 import {act as reactHooksAct, renderHook} from '@testing-library/react-hooks'
 import {noop} from '../../../utils'
-import {renderUseSelect, renderSelect} from '../testUtils'
-// eslint-disable-next-line import/default
+import {
+  renderUseSelect,
+  renderSelect,
+  getItemIndexByCharacter,
+  clickOnToggleButton,
+  getItems,
+  getToggleButton,
+  keyDownOnToggleButton,
+  tab,
+} from '../testUtils'
 import utils from '../../utils'
 import {items, defaultIds} from '../../testUtils'
 import useSelect from '..'
+import * as stateChangeTypes from '../stateChangeTypes'
 
 describe('getToggleButtonProps', () => {
   describe('hook props', () => {
@@ -78,9 +92,41 @@ describe('getToggleButtonProps', () => {
 
       expect(toggleButtonProps.onClick).toBeUndefined()
       expect(toggleButtonProps.onKeyDown).toBeUndefined()
-      // eslint-disable-next-line jest-dom/prefer-enabled-disabled
       expect(toggleButtonProps.disabled).toBe(true)
     })
+
+    test('assigns the role of combobox, tabindex 0, aria-haspopup listbox and aria-controls pointing to the menu', () => {
+      const {result} = renderUseSelect()
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps.role).toEqual('combobox')
+      expect(toggleButtonProps.tabIndex).toEqual(0)
+      expect(toggleButtonProps['aria-controls']).toEqual(defaultIds.menuId)
+      expect(toggleButtonProps['aria-haspopup']).toEqual('listbox')
+    })
+
+    test('assign id of highlighted item to aria-activedescendant if item is highlighted and menu is open', () => {
+      const {result} = renderUseSelect({highlightedIndex: 2, isOpen: true})
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-activedescendant']).toEqual(
+        defaultIds.getItemId(2),
+      )
+    })
+
+    test('do not assign aria-activedescendant if item is highlighted and menu is closed', () => {
+      const {result} = renderUseSelect({highlightedIndex: 2})
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-activedescendant']).toEqual('')
+    })
+
+    test('do not assign aria-activedescendant if no item is highlighted', () => {
+      const {result} = renderUseSelect()
+      const toggleButtonProps = result.current.getToggleButtonProps()
+
+      expect(toggleButtonProps['aria-activedescendant']).toEqual('')
+    })
   })
 
   describe('user props', () => {
@@ -163,149 +209,188 @@ describe('getToggleButtonProps', () => {
       expect(userOnKeyDown).toHaveBeenCalledTimes(1)
       expect(result.current.isOpen).toBe(false)
     })
+
+    test('event handler onBlur is called along with downshift handler', () => {
+      const userOnBlur = jest.fn()
+      const {result} = renderUseSelect({initialIsOpen: true})
+
+      reactHooksAct(() => {
+        const {onBlur} = result.current.getToggleButtonProps({
+          onBlur: userOnBlur,
+        })
+
+        onBlur({})
+      })
+
+      expect(userOnBlur).toHaveBeenCalledTimes(1)
+      expect(result.current.isOpen).toBe(false)
+    })
+
+    test("event handler onBlur is called without downshift handler if 'preventDownshiftDefault' is passed in user event", () => {
+      const userOnBlur = jest.fn(event => {
+        event.preventDownshiftDefault = true
+      })
+      const {result} = renderUseSelect({initialIsOpen: true})
+
+      reactHooksAct(() => {
+        const {onBlur} = result.current.getToggleButtonProps({
+          onBlur: userOnBlur,
+        })
+
+        onBlur({})
+      })
+
+      expect(userOnBlur).toHaveBeenCalledTimes(1)
+      expect(result.current.isOpen).toBe(true)
+    })
   })
 
   describe('event handlers', () => {
     describe('on click', () => {
-      test('opens the closed menu', () => {
-        const {clickOnToggleButton, getItems} = renderSelect()
+      test('opens the closed menu', async () => {
+        renderSelect()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
       })
 
-      test('closes the open menu', () => {
-        const {clickOnToggleButton, getItems} = renderSelect({
+      test('closes the open menu', async () => {
+        renderSelect({
           initialIsOpen: true,
         })
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
       })
 
-      test('opens and closes menu at consecutive clicks', () => {
-        const {clickOnToggleButton, getItems} = renderSelect()
+      test('opens and closes menu at consecutive clicks', async () => {
+        renderSelect()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(items.length)
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
         expect(getItems()).toHaveLength(0)
       })
 
-      test('opens the closed menu without any option highlighted', () => {
-        const {clickOnToggleButton, menu} = renderSelect()
+      test('opens the closed menu without any option highlighted', async () => {
+        renderSelect()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).not.toHaveAttribute('aria-activedescendant')
+        expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
       })
 
-      test('opens the closed menu with selected option highlighted', () => {
+      test('opens the closed menu with selected option highlighted', async () => {
         const selectedIndex = 3
-        const {clickOnToggleButton, menu} = renderSelect({
+        renderSelect({
           initialSelectedItem: items[selectedIndex],
         })
+        getToggleButton()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(getToggleButton()).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(selectedIndex),
         )
       })
 
-      test('opens the closed menu at initialHighlightedIndex, but on first click only', () => {
+      test('opens the closed menu at initialHighlightedIndex, but on first click only', async () => {
         const initialHighlightedIndex = 3
-        const {clickOnToggleButton, menu} = renderSelect({
+        renderSelect({
           initialHighlightedIndex,
         })
+        const toggleButton = getToggleButton()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(initialHighlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).not.toHaveAttribute('aria-activedescendant')
+        expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
       })
 
-      test('opens the closed menu at defaultHighlightedIndex, on every click', () => {
+      test('opens the closed menu at defaultHighlightedIndex, on every click', async () => {
         const defaultHighlightedIndex = 3
-        const {clickOnToggleButton, menu} = renderSelect({
+        renderSelect({
           defaultHighlightedIndex,
         })
+        const toggleButton = getToggleButton()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(defaultHighlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(defaultHighlightedIndex),
         )
       })
 
-      test('opens the closed menu at highlightedIndex from props, on every click', () => {
+      test('opens the closed menu at highlightedIndex from props, on every click', async () => {
         const highlightedIndex = 3
-        const {clickOnToggleButton, menu} = renderSelect({
+        renderSelect({
           highlightedIndex,
         })
+        const toggleButton = getToggleButton()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(highlightedIndex),
         )
 
-        clickOnToggleButton()
-        clickOnToggleButton()
+        await clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveAttribute(
+        expect(toggleButton).toHaveAttribute(
           'aria-activedescendant',
           defaultIds.getItemId(highlightedIndex),
         )
       })
 
-      test('opens the closed menu and moves focus on the menu', () => {
-        const {clickOnToggleButton, menu} = renderSelect()
+      test('opens the closed menu and keepns focus on the button', async () => {
+        renderSelect()
+        getToggleButton()
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(menu).toHaveFocus()
+        expect(getToggleButton()).toHaveFocus()
       })
 
-      test('closes the open menu and keeps focus on the toggle button', () => {
-        const {clickOnToggleButton, toggleButton} = renderSelect({
+      test('closes the open menu and keeps focus on the toggle button', async () => {
+        renderSelect({
           initialIsOpen: true,
         })
 
-        clickOnToggleButton()
+        await clickOnToggleButton()
 
-        expect(toggleButton).toHaveFocus()
+        expect(getToggleButton()).toHaveFocus()
       })
     })
 
@@ -317,119 +402,154 @@ describe('getToggleButtonProps', () => {
         })
         afterAll(jest.useRealTimers)
 
-        const startsWithCharacter = (option, character) => {
-          return option.toLowerCase().startsWith(character.toLowerCase())
-        }
-
-        test('should select the first item that starts with that key', () => {
+        test('should highlight the first item that starts with that key', async () => {
           const char = 'c'
-          const expectedItem = items.find(item =>
-            startsWithCharacter(item, char),
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(char),
           )
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('should select the second item that starts with that key after typing it twice', () => {
+        test('should highlight the second item that starts with that key after typing it twice', async () => {
           const char = 'c'
-          const expectedItem = items
-            .slice(
-              items.indexOf(
-                items.find(item => startsWithCharacter(item, char)),
-              ) + 1,
-            )
-            .find(item => startsWithCharacter(item, char))
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
-
-          keyDownOnToggleButton(char)
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(char, getItemIndexByCharacter(char) + 1),
+          )
+
+          renderSelect()
+
+          await keyDownOnToggleButton(char)
           reactAct(jest.runOnlyPendingTimers)
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('should select the first item again if the items are depleated', () => {
+        test('should highlight the first item again if the items are depleated', async () => {
           const char = 'b'
-          const expectedItem = items.find(item =>
-            startsWithCharacter(item, char),
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(char),
           )
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(jest.runOnlyPendingTimers)
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(jest.runOnlyPendingTimers)
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('should not select anything if no item starts with that key', () => {
+        test('should not highlight anything if no item starts with that key', async () => {
           const char = 'x'
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
 
-          expect(toggleButton).toHaveTextContent('Elements')
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('should select the first item that starts with the keys typed in rapid succession', () => {
+        test('should highlight the first item that starts with the keys typed in rapid succession', async () => {
           const chars = ['c', 'a']
-          const expectedItem = items.find(item =>
-            startsWithCharacter(item, chars.join('')),
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(chars.join('')),
           )
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(chars[0])
+          await keyDownOnToggleButton(chars[0])
           reactAct(() => jest.advanceTimersByTime(200))
-          keyDownOnToggleButton(chars[1])
+          await keyDownOnToggleButton(chars[1])
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('should become first character after timeout passes', () => {
+        test('should become first character after timeout passes', async () => {
           const chars = ['c', 'a', 'l']
-          const expectedItem = items.find(item =>
-            startsWithCharacter(item, chars[2]),
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(chars[2]),
           )
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(chars[0])
+          await keyDownOnToggleButton(chars[0])
           reactAct(() => jest.advanceTimersByTime(200))
-          keyDownOnToggleButton(chars[1])
+          await keyDownOnToggleButton(chars[1])
           reactAct(() => jest.runAllTimers())
-          keyDownOnToggleButton(chars[2])
+          await keyDownOnToggleButton(chars[2])
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
         })
 
         /* Here we just want to make sure the keys cleanup works. */
-        test('should not go to the second option starting with the key if timeout did not pass', () => {
+        test('should not go to the second option starting with the key if timeout did not pass', async () => {
           const char = 'l'
-          const expectedItem = items.find(item =>
-            startsWithCharacter(item, char),
+          const expectedItemId = defaultIds.getItemId(
+            getItemIndexByCharacter(char),
           )
-          const {keyDownOnToggleButton, toggleButton} = renderSelect()
+          renderSelect()
 
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(() => jest.advanceTimersByTime(200)) // wait some time but not enough to trigger debounce.
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(() => jest.advanceTimersByTime(200)) // wait some time but not enough to trigger debounce.
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(() => jest.advanceTimersByTime(200)) // wait some time but not enough to trigger debounce.
-          keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
           reactAct(() => jest.advanceTimersByTime(200)) // wait some time but not enough to trigger debounce.
 
-          expect(toggleButton).toHaveTextContent(expectedItem)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            expectedItemId,
+          )
+          expect(getItems()).toHaveLength(items.length)
+        })
+
+        test('should not attempt update after unmount', async () => {
+          const consoleErrorSpy = jest.spyOn(console, 'error')
+          const char = 'c'
+          const {unmount} = renderSelect({
+            isOpen: true,
+          })
+
+          // Enter key twice to queue up debounced call
+          await keyDownOnToggleButton(char)
+          await keyDownOnToggleButton(char)
+          unmount()
+          jest.runAllTimers()
+
+          expect(consoleErrorSpy).not.toHaveBeenCalled()
         })
       })
 
       describe('arrow up', () => {
         test('it prevents the default event behavior', () => {
-          const {toggleButton} = renderSelect()
+          renderSelect()
+          const toggleButton = getToggleButton()
           const keyDownEvent = createEvent.keyDown(toggleButton, {
             key: 'ArrowUp',
           })
@@ -439,107 +559,183 @@ describe('getToggleButtonProps', () => {
           expect(keyDownEvent.defaultPrevented).toBe(true)
         })
 
-        test('it does not open or highlight anything if there are no options', () => {
-          const {keyDownOnToggleButton, menu, getItems} = renderSelect({
+        test('it does not open or highlight anything if there are no options', async () => {
+          renderSelect({
+            items: [],
+          })
+
+          await keyDownOnToggleButton('{ArrowUp}')
+
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
+          expect(getItems()).toHaveLength(0)
+        })
+
+        test('it does not highlight anything if there are no options', async () => {
+          renderSelect({
             items: [],
+            isOpen: true,
           })
 
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).not.toHaveAttribute('aria-activedescendant')
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test('opens the closed menu with last option highlighted', () => {
-          const {keyDownOnToggleButton, menu} = renderSelect()
+        test('it opens the closed menu with last option highlighted', async () => {
+          renderSelect()
 
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(getToggleButton()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(items.length - 1),
           )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('opens the closed menu with selected option - 1 highlighted', () => {
+        test('it opens the closed menu with selected option highlighted', async () => {
           const selectedIndex = 4
-          const {keyDownOnToggleButton, menu} = renderSelect({
+          renderSelect({
             initialSelectedItem: items[selectedIndex],
           })
 
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(getToggleButton()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(selectedIndex - 1),
+            defaultIds.getItemId(selectedIndex),
           )
         })
 
-        test('opens the closed menu at initialHighlightedIndex, but on first arrow up only', () => {
+        test('it opens the closed menu at initialHighlightedIndex, but on first arrow up only', async () => {
           const initialHighlightedIndex = 2
-          const {keyDownOnToggleButton, keyDownOnMenu, menu} = renderSelect({
+          renderSelect({
             initialHighlightedIndex,
           })
 
-          keyDownOnToggleButton('ArrowUp')
+          const toggleButton = getToggleButton()
+
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(initialHighlightedIndex),
           )
 
-          keyDownOnMenu('Escape')
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{Escape}')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(items.length - 1),
           )
         })
 
-        test('arrow up opens the closed menu at defaultHighlightedIndex, on every arrow up', () => {
+        test('it opens the closed menu at defaultHighlightedIndex, on every arrow up', async () => {
           const defaultHighlightedIndex = 3
-          const {keyDownOnToggleButton, menu} = renderSelect({
+          renderSelect({
             defaultHighlightedIndex,
           })
+          const toggleButton = getToggleButton()
 
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(defaultHighlightedIndex),
           )
 
-          keyDownOnToggleButton('Escape')
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{Escape}')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(defaultHighlightedIndex),
           )
         })
 
-        test.skip('prevents event default', () => {
-          const preventDefault = jest.fn()
-          const {keyDownOnToggleButton} = renderSelect()
+        test('it opens the closed menu and keeps focus on the combobox', async () => {
+          renderSelect()
+
+          await keyDownOnToggleButton('{ArrowUp}')
+
+          expect(getToggleButton()).toHaveFocus()
+        })
+
+        test('highlights last option number if none is highlighted', async () => {
+          renderSelect({
+            isOpen: true,
+          })
 
-          keyDownOnToggleButton('ArrowUp', {preventDefault})
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(preventDefault).toHaveBeenCalledTimes(1)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(items.length - 1),
+          )
         })
 
-        test('opens the closed menu and moves focus on the menu', () => {
-          const {keyDownOnToggleButton, menu} = renderSelect()
+        test('highlights the previous item', async () => {
+          const initialHighlightedIndex = 2
+          renderSelect({
+            isOpen: true,
+            initialHighlightedIndex,
+          })
 
-          keyDownOnToggleButton('ArrowUp')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).toHaveFocus()
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(initialHighlightedIndex - 1),
+          )
+        })
+
+        test('will stop at first item', async () => {
+          renderSelect({
+            isOpen: true,
+            initialHighlightedIndex: 0,
+          })
+
+          await keyDownOnToggleButton('{ArrowUp}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(0),
+          )
+        })
+
+        test('with Alt it selects the item and closes the menu', async () => {
+          const initialHighlightedIndex = 2
+          renderSelect({
+            initialIsOpen: true,
+            initialHighlightedIndex,
+          })
+          const toggleButton = getToggleButton()
+
+          await keyDownOnToggleButton('{Alt>}{ArrowUp}{/Alt}')
+
+          expect(getItems()).toHaveLength(0)
+          expect(toggleButton).toHaveTextContent(items[initialHighlightedIndex])
+        })
+
+        test('with Alt it opens the menu without any additional change', async () => {
+          renderSelect()
+
+          await keyDownOnToggleButton('{Alt>}{ArrowUp}{/Alt}')
+
+          expect(getItems()).toHaveLength(items.length)
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(items.length - 1),
+          )
         })
       })
 
       describe('arrow down', () => {
         test('it prevents the default event behavior', () => {
-          const {toggleButton} = renderSelect()
+          renderSelect()
+          const toggleButton = getToggleButton()
           const keyDownEvent = createEvent.keyDown(toggleButton, {
             key: 'ArrowDown',
           })
@@ -549,115 +745,632 @@ describe('getToggleButtonProps', () => {
           expect(keyDownEvent.defaultPrevented).toBe(true)
         })
 
-        test('it does not open or highlight anything if there are no options', () => {
-          const {keyDownOnToggleButton, menu, getItems} = renderSelect({
+        test('it does not open or highlight anything if there are no options', async () => {
+          renderSelect({
+            items: [],
+          })
+
+          await keyDownOnToggleButton('{ArrowDown}')
+
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
+          expect(getItems()).toHaveLength(0)
+        })
+
+        test('it does not highlight anything if there are no options', async () => {
+          renderSelect({
             items: [],
+            isOpen: true,
           })
 
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{ArrowUp}')
 
-          expect(menu).not.toHaveAttribute('aria-activedescendant')
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
           expect(getItems()).toHaveLength(0)
         })
 
-        test('opens the closed menu with first option highlighted', () => {
-          const {keyDownOnToggleButton, menu} = renderSelect()
+        test('opens the closed menu with first option highlighted', async () => {
+          renderSelect()
 
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(getToggleButton()).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(0),
           )
+          expect(getItems()).toHaveLength(items.length)
         })
 
-        test('opens the closed menu with selected option + 1 highlighted', () => {
+        test('opens the closed menu with selected option highlighted', async () => {
           const selectedIndex = 4
-          const {keyDownOnToggleButton, menu} = renderSelect({
+          renderSelect({
             initialSelectedItem: items[selectedIndex],
           })
 
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(getToggleButton()).toHaveAttribute(
             'aria-activedescendant',
-            defaultIds.getItemId(selectedIndex + 1),
+            defaultIds.getItemId(selectedIndex),
           )
         })
 
-        test('opens the closed menu at initialHighlightedIndex, but on first arrow down only', () => {
+        test('opens the closed menu at initialHighlightedIndex, but on first arrow down only', async () => {
           const initialHighlightedIndex = 3
-          const {keyDownOnToggleButton, keyDownOnMenu, menu} = renderSelect({
+          renderSelect({
             initialHighlightedIndex,
           })
+          const toggleButton = getToggleButton()
 
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(initialHighlightedIndex),
           )
 
-          keyDownOnMenu('Escape')
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{Escape}')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(0),
           )
         })
 
-        test('opens the closed menu at defaultHighlightedIndex, on every arrow down', () => {
+        test('opens the closed menu at defaultHighlightedIndex, on every arrow down', async () => {
           const defaultHighlightedIndex = 3
-          const {keyDownOnToggleButton, keyDownOnMenu, menu} = renderSelect({
+          renderSelect({
             defaultHighlightedIndex,
           })
+          const toggleButton = getToggleButton()
 
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(defaultHighlightedIndex),
           )
 
-          keyDownOnMenu('Escape')
-          keyDownOnToggleButton('ArrowDown')
+          await keyDownOnToggleButton('{Escape}')
+          await keyDownOnToggleButton('{ArrowDown}')
 
-          expect(menu).toHaveAttribute(
+          expect(toggleButton).toHaveAttribute(
             'aria-activedescendant',
             defaultIds.getItemId(defaultHighlightedIndex),
           )
         })
 
-        // also add for menu when this test works.
-        test.skip('arrow down prevents event default', () => {
-          const preventDefault = jest.fn()
-          const {keyDownOnToggleButton} = renderSelect()
+        test('opens the closed menu and keeps focus on the button', async () => {
+          renderSelect()
+
+          await keyDownOnToggleButton('{ArrowDown}')
+
+          expect(getToggleButton()).toHaveFocus()
+        })
+
+        test("it highlights option number '0' if none is highlighted", async () => {
+          renderSelect({
+            isOpen: true,
+          })
+
+          await keyDownOnToggleButton('{ArrowDown}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(0),
+          )
+        })
+
+        test('it highlights the next item', async () => {
+          const initialHighlightedIndex = 2
+          renderSelect({
+            isOpen: true,
+            initialHighlightedIndex,
+          })
+
+          await keyDownOnToggleButton('{ArrowDown}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(initialHighlightedIndex + 1),
+          )
+        })
+
+        test('with Alt it opens the menu and highlights no item', async () => {
+          renderSelect()
+
+          await keyDownOnToggleButton('{Alt>}{ArrowDown}{/Alt}')
+
+          expect(getToggleButton()).toHaveAttribute('aria-activedescendant', '')
+        })
+
+        test('with Alt it opens the menu and highlights with selected item highlighted', async () => {
+          const itemIndex = 8
+          renderSelect({selectedItem: items[itemIndex]})
+
+          await keyDownOnToggleButton('{Alt>}{ArrowDown}{/Alt}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(itemIndex),
+          )
+        })
+
+        test('with Alt it highlights the next item without any additional change', async () => {
+          const initialHighlightedIndex = 2
+          renderSelect({initialHighlightedIndex, isOpen: true})
+
+          await keyDownOnToggleButton('{Alt>}{ArrowDown}{/Alt}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(initialHighlightedIndex + 1),
+          )
+        })
+
+        test('will stop at last item', async () => {
+          renderSelect({
+            isOpen: true,
+            initialHighlightedIndex: items.length - 1,
+          })
+
+          await keyDownOnToggleButton('{ArrowDown}')
+
+          expect(getToggleButton()).toHaveAttribute(
+            'aria-activedescendant',
+            defaultIds.getItemId(items.length - 1),
+          )
+        })
+      })
+
+      test('end opens the menu and highlights the last option', async () => {
+        renderSelect()
+
+        await keyDownOnToggleButton('{End}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(items.length - 1),
+        )
+      })
+
+      test('end highlights the last option', async () => {
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex: 2,
+        })
+
+        await keyDownOnToggleButton('{End}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(items.length - 1),
+        )
+      })
+
+      test('end prevents the default event behavior', () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'End'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('home opens the menu and highlights the first option', async () => {
+        renderSelect()
+
+        await keyDownOnToggleButton('{Home}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(0),
+        )
+      })
+
+      test('home highlights the first option', async () => {
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex: 2,
+        })
+
+        await keyDownOnToggleButton('{Home}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(0),
+        )
+      })
+
+      test('home prevents the default event behavior', () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'Home'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('escape has the menu closed and keeps focus on the button', async () => {
+        renderSelect({
+          initialIsOpen: true,
+        })
+
+        await keyDownOnToggleButton('{Escape}')
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).toHaveFocus()
+      })
+
+      test('escape does nothing if menu is already closed', async () => {
+        renderSelect()
+
+        await keyDownOnToggleButton('{Escape}')
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).toHaveFocus()
+      })
+
+      test('enter opens the menu without any item selected', async () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton('{Enter}')
+
+        expect(getItems()).toHaveLength(items.length)
+        expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
+        expect(toggleButton).toHaveFocus()
+      })
+
+      test('enter closes the menu and selects highlighted item', async () => {
+        const initialHighlightedIndex = 2
+        renderSelect({
+          initialIsOpen: true,
+          initialHighlightedIndex,
+        })
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton('{Enter}')
+
+        expect(getItems()).toHaveLength(0)
+        expect(toggleButton).toHaveTextContent(items[initialHighlightedIndex])
+        expect(toggleButton).toHaveFocus()
+      })
+
+      test('enter selects the highlighted item and resets to user defaults', async () => {
+        const defaultHighlightedIndex = 2
+        renderSelect({
+          defaultHighlightedIndex,
+          defaultIsOpen: true,
+        })
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton('{Enter}')
+
+        expect(toggleButton).toHaveTextContent(items[defaultHighlightedIndex])
+        expect(getItems()).toHaveLength(items.length)
+        expect(toggleButton).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(defaultHighlightedIndex),
+        )
+      })
+
+      test('enter prevents the default event behavior with the menu open', () => {
+        renderSelect({isOpen: true})
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'Enter'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
 
-          keyDownOnToggleButton('ArrowDown', {preventDefault})
+      test('space opens the menu without any item selected', async () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton(' ')
+
+        expect(getItems()).toHaveLength(items.length)
+        expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
+        expect(toggleButton).toHaveFocus()
+      })
 
-          expect(preventDefault).toHaveBeenCalledTimes(1)
+      test('space closes the menu and selects highlighted item', async () => {
+        const initialHighlightedIndex = 2
+        renderSelect({
+          initialIsOpen: true,
+          initialHighlightedIndex,
         })
+        const toggleButton = getToggleButton()
 
-        test('opens the closed menu and focuses the list', () => {
-          const {keyDownOnToggleButton, menu} = renderSelect()
+        await keyDownOnToggleButton(' ')
 
-          keyDownOnToggleButton('ArrowDown')
+        expect(getItems()).toHaveLength(0)
+        expect(toggleButton).toHaveTextContent(items[initialHighlightedIndex])
+        expect(toggleButton).toHaveFocus()
+      })
 
-          expect(menu).toHaveFocus()
+      test('space selects the highlighted item and resets to user defaults', async () => {
+        const defaultHighlightedIndex = 2
+        renderSelect({
+          defaultHighlightedIndex,
+          defaultIsOpen: true,
         })
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton(' ')
+
+        expect(toggleButton).toHaveTextContent(items[defaultHighlightedIndex])
+        expect(getItems()).toHaveLength(items.length)
+        expect(toggleButton).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(defaultHighlightedIndex),
+        )
       })
 
-      test("other than te ones supported don't affect anything", () => {
-        const {keyDownOnToggleButton, toggleButton, getItems} = renderSelect()
+      test('space prevents the default event behavior', () => {
+        renderSelect({isOpen: true})
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: ' '})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
 
-        keyDownOnToggleButton('Alt')
-        keyDownOnToggleButton('Control')
+      test('tab closes the menu and selects highlighted item', async () => {
+        const initialHighlightedIndex = 2
+        const firstFocusableItemTestId = 'test-id-1'
+        const secondFocusableItemTestId = 'test-id-2'
+        renderSelect({initialIsOpen: true, initialHighlightedIndex}, ui => {
+          return (
+            <>
+              <div tabIndex={0} data-testid={firstFocusableItemTestId}>
+                First element
+              </div>
+              {ui}
+              <div tabIndex={0} data-testid={secondFocusableItemTestId}>
+                Second element
+              </div>
+            </>
+          )
+        })
+
+        // focus the toggle button in 2 tabs
+        await tab()
+        await tab()
+
+        // now blur
+        await tab()
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).toHaveTextContent(
+          items[initialHighlightedIndex],
+        )
+        expect(screen.getByTestId(secondFocusableItemTestId)).toHaveFocus()
+      })
+
+      test('shift+tab closes the menu and selects highlighted item', async () => {
+        const initialHighlightedIndex = 1
+        const firstFocusableItemTestId = 'test-id-1'
+        const secondFocusableItemTestId = 'test-id-2'
+        renderSelect({initialIsOpen: true, initialHighlightedIndex}, ui => {
+          return (
+            <>
+              <div tabIndex={0} data-testid={firstFocusableItemTestId}>
+                First element
+              </div>
+              {ui}
+              <div tabIndex={0} data-testid={secondFocusableItemTestId}>
+                Second element
+              </div>
+            </>
+          )
+        })
+
+        // focus the toggle button in 2 tabs
+        await tab()
+        await tab()
+
+        // now blur
+        await tab(true)
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).toHaveTextContent(
+          items[initialHighlightedIndex],
+        )
+        expect(screen.getByTestId(firstFocusableItemTestId)).toHaveFocus()
+      })
+
+      test("other than te ones supported don't affect anything", async () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+
+        await keyDownOnToggleButton('{Alt}')
+        await keyDownOnToggleButton('{Control}')
 
         expect(toggleButton).toHaveTextContent('Elements')
-        expect(toggleButton).not.toHaveAttribute('aria-activedescendant')
+        expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
         expect(getItems()).toHaveLength(0)
       })
+
+      test('pageUp jumps highlight up by 10 options', async () => {
+        const initialHighlightedIndex = 12
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnToggleButton('{PageUp}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(initialHighlightedIndex - 10),
+        )
+      })
+
+      test('pageUp jumps highlight the first option if highlightedIndex is 10 or smaller', async () => {
+        const initialHighlightedIndex = 7
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnToggleButton('{PageUp}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(0),
+        )
+      })
+
+      test('pageUp prevents the default event behavior with the menu open', () => {
+        renderSelect({isOpen: true})
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'PageUp'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('pageUp does not prevent the default event behavior with the menu closed', () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {key: 'PageUp'})
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(false)
+      })
+
+      test('pageDown jumps highlight down by 10 options', async () => {
+        const initialHighlightedIndex = 12
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnToggleButton('{PageDown}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(initialHighlightedIndex + 10),
+        )
+      })
+
+      test('pageDown jumps highlight the last option if highlightedIndex is closer than 10 indeces to the end', async () => {
+        const initialHighlightedIndex = items.length - 5
+        renderSelect({
+          isOpen: true,
+          initialHighlightedIndex,
+        })
+
+        await keyDownOnToggleButton('{PageDown}')
+
+        expect(getToggleButton()).toHaveAttribute(
+          'aria-activedescendant',
+          defaultIds.getItemId(items.length - 1),
+        )
+      })
+
+      test('pageDown prevents the default event behavior with the menu open', () => {
+        renderSelect({isOpen: true})
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {
+          key: 'PageDown',
+        })
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(true)
+      })
+
+      test('pageDown does not prevent the default event behavior with the menu closed', () => {
+        renderSelect()
+        const toggleButton = getToggleButton()
+        const keyDownEvent = createEvent.keyDown(toggleButton, {
+          key: 'PageDown',
+        })
+
+        fireEvent(toggleButton, keyDownEvent)
+
+        expect(keyDownEvent.defaultPrevented).toBe(false)
+      })
+    })
+
+    describe('blur', () => {
+      test('by focusing another element should behave as a normal blur', async () => {
+        const initialHighlightedIndex = 2
+        renderSelect({initialIsOpen: true, initialHighlightedIndex}, ui => {
+          return (
+            <>
+              {ui}
+              <div tabIndex={0}>Second element</div>
+            </>
+          )
+        })
+
+        await tab() // focus the button
+        screen.getByText(/Second element/).focus()
+
+        expect(getItems()).toHaveLength(0)
+        expect(getToggleButton()).toHaveTextContent(
+          items[initialHighlightedIndex],
+        )
+      })
+
+      test('by mouse is not triggered if target is within downshift', async () => {
+        const stateReducer = jest.fn().mockImplementation(s => s)
+        const {container} = renderSelect({
+          isOpen: true,
+          stateReducer,
+        })
+        const toggleButton = getToggleButton()
+        document.body.appendChild(container)
+
+        fireEvent.mouseDown(toggleButton)
+        fireEvent.mouseUp(toggleButton)
+
+        expect(stateReducer).not.toHaveBeenCalled()
+
+        fireEvent.mouseDown(document.body)
+        fireEvent.mouseUp(document.body)
+
+        expect(stateReducer).toHaveBeenCalledTimes(1)
+        expect(stateReducer).toHaveBeenCalledWith(
+          expect.objectContaining({}),
+          expect.objectContaining({type: stateChangeTypes.ToggleButtonBlur}),
+        )
+      })
+
+      test('by touch is not triggered if target is within downshift', () => {
+        const stateReducer = jest.fn().mockImplementation(s => s)
+        const {container} = renderSelect({
+          isOpen: true,
+          stateReducer,
+        })
+        const toggleButton = getToggleButton()
+        document.body.appendChild(container)
+
+        fireEvent.touchStart(toggleButton)
+        fireEvent.touchMove(toggleButton)
+        fireEvent.touchEnd(toggleButton)
+
+        expect(stateReducer).not.toHaveBeenCalled()
+
+        fireEvent.touchStart(document.body)
+        fireEvent.touchEnd(document.body)
+
+        expect(stateReducer).toHaveBeenCalledTimes(1)
+        expect(stateReducer).toHaveBeenCalledWith(
+          expect.objectContaining({}),
+          expect.objectContaining({type: stateChangeTypes.ToggleButtonBlur}),
+        )
+      })
     })
   })
 
@@ -676,7 +1389,6 @@ describe('getToggleButtonProps', () => {
         getMenuProps({}, {suppressRefError: true})
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
         `downshift: You forgot to call the getToggleButtonProps getter function on your component / element.`,
       )
@@ -697,7 +1409,6 @@ describe('getToggleButtonProps', () => {
 
       rerender()
 
-      // eslint-disable-next-line no-console
       expect(console.error).not.toHaveBeenCalled()
     })
 
@@ -711,7 +1422,6 @@ describe('getToggleButtonProps', () => {
         getToggleButtonProps()
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error.mock.calls[0][0]).toMatchInlineSnapshot(
         `downshift: The ref prop "ref" from getToggleButtonProps was not applied correctly on your element.`,
       )
@@ -734,7 +1444,6 @@ describe('getToggleButtonProps', () => {
         ref(toggleButtonNode)
       })
 
-      // eslint-disable-next-line no-console
       expect(console.error).not.toHaveBeenCalled()
     })
   })
diff --git a/src/hooks/useSelect/__tests__/memo.test.js b/src/hooks/useSelect/__tests__/memo.test.js
index 62b2d82c3..bdfcd9136 100644
--- a/src/hooks/useSelect/__tests__/memo.test.js
+++ b/src/hooks/useSelect/__tests__/memo.test.js
@@ -1,6 +1,13 @@
 import React from 'react'
-import {renderUseSelect, renderSelect} from '../testUtils'
-import {items, defaultIds, MemoizedItem} from '../../testUtils'
+import {
+  renderUseSelect,
+  renderSelect,
+  keyDownOnToggleButton,
+  getToggleButton,
+  items,
+  defaultIds,
+  MemoizedItem,
+} from '../testUtils'
 
 test('functions are memoized', () => {
   const {result, rerender} = renderUseSelect()
@@ -10,7 +17,7 @@ test('functions are memoized', () => {
   expect(firstRenderResult).toEqual(secondRenderResult)
 })
 
-test('will skip disabled items after component rerenders and items are memoized', () => {
+test('will skip disabled items after component rerenders and items are memoized', async () => {
   function renderItem(props) {
     return (
       <MemoizedItem
@@ -21,16 +28,16 @@ test('will skip disabled items after component rerenders and items are memoized'
     )
   }
 
-  const {keyDownOnMenu, menu, rerender} = renderSelect({
+  const {rerender} = renderSelect({
     isOpen: true,
     initialHighlightedIndex: items.length - 1,
     renderItem,
   })
 
   rerender({renderItem, isOpen: true})
-  keyDownOnMenu('ArrowUp')
+  await keyDownOnToggleButton('{ArrowUp}')
 
-  expect(menu).toHaveAttribute(
+  expect(getToggleButton()).toHaveAttribute(
     'aria-activedescendant',
     defaultIds.getItemId(items.length - 3),
   )
diff --git a/src/hooks/useSelect/__tests__/props.test.js b/src/hooks/useSelect/__tests__/props.test.js
index 00476bae1..cbf7c1477 100644
--- a/src/hooks/useSelect/__tests__/props.test.js
+++ b/src/hooks/useSelect/__tests__/props.test.js
@@ -1,7 +1,19 @@
-/* eslint-disable no-console */
 import {renderHook, act as hooksAct} from '@testing-library/react-hooks'
 import {act} from '@testing-library/react'
-import {renderSelect, renderUseSelect} from '../testUtils'
+import {
+  clickOnItemAtIndex,
+  clickOnToggleButton,
+  getA11yStatusContainer,
+  getItems,
+  getLabel,
+  getMenu,
+  getToggleButton,
+  keyDownOnToggleButton,
+  renderSelect,
+  renderUseSelect,
+  stateChangeTestCases,
+  tab,
+} from '../testUtils'
 import * as stateChangeTypes from '../stateChangeTypes'
 import {
   items,
@@ -20,38 +32,36 @@ describe('props', () => {
     )
   })
 
-  describe('id', () => {
-    test('if passed will override downshift default', () => {
-      const {toggleButton, menu, label} = renderSelect({
-        id: 'my-custom-little-id',
-      })
-      const elements = [toggleButton, menu, label]
+  test('id if passed will override downshift default', () => {
+    renderSelect({
+      id: 'my-custom-little-id',
+    })
+    const elements = [getToggleButton(), getMenu(), getLabel()]
 
-      elements.forEach(element => {
-        expect(element).toHaveAttribute(
-          'id',
-          expect.stringContaining('my-custom-little-id'),
-        )
-      })
+    elements.forEach(element => {
+      expect(element).toHaveAttribute(
+        'id',
+        expect.stringContaining('my-custom-little-id'),
+      )
     })
   })
 
   describe('items', () => {
     test('if passed as empty then menu will not open', () => {
-      const {getItems} = renderSelect({items: [], isOpen: true})
+      renderSelect({items: [], isOpen: true})
 
       expect(getItems()).toHaveLength(0)
     })
 
-    test('passed as objects should work with custom itemToString', () => {
+    test('passed as objects should work with custom itemToString', async () => {
       jest.useFakeTimers()
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderSelect({
+      renderSelect({
         items: [{str: 'aaa'}, {str: 'bbb'}],
         itemToString: item => item.str,
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -60,22 +70,20 @@ describe('props', () => {
     })
   })
 
-  describe('itemToString', () => {
-    test('should provide string version to a11y status message', () => {
-      jest.useFakeTimers()
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderSelect({
-        itemToString: () => 'custom-item',
-        initialIsOpen: true,
-      })
+  test('itemToString should provide string version to a11y status message', async () => {
+    jest.useFakeTimers()
+    renderSelect({
+      itemToString: () => 'custom-item',
+      initialIsOpen: true,
+    })
 
-      clickOnItemAtIndex(0)
-      waitForDebouncedA11yStatusUpdate()
+    await clickOnItemAtIndex(0)
+    waitForDebouncedA11yStatusUpdate()
 
-      expect(getA11yStatusContainer()).toHaveTextContent(
-        'custom-item has been selected.',
-      )
-      jest.useRealTimers()
-    })
+    expect(getA11yStatusContainer()).toHaveTextContent(
+      'custom-item has been selected.',
+    )
+    jest.useRealTimers()
   })
 
   describe('getA11ySelectionMessage', () => {
@@ -83,13 +91,13 @@ describe('props', () => {
     beforeEach(jest.clearAllTimers)
     afterAll(jest.useRealTimers)
 
-    test('reports that an item has been selected', () => {
+    test('reports that an item has been selected', async () => {
       const itemIndex = 0
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(itemIndex)
+      await clickOnItemAtIndex(itemIndex)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -97,12 +105,12 @@ describe('props', () => {
       )
     })
 
-    test('is called with object that contains specific props', () => {
+    test('is called with object that contains specific props', async () => {
       const getA11ySelectionMessage = jest.fn()
       const inputValue = 'a'
       const isOpen = true
       const highlightedIndex = 0
-      const {clickOnItemAtIndex} = renderSelect({
+      renderSelect({
         getA11ySelectionMessage,
         inputValue,
         isOpen,
@@ -110,7 +118,7 @@ describe('props', () => {
         items,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11ySelectionMessage).toHaveBeenCalledTimes(1)
@@ -128,13 +136,13 @@ describe('props', () => {
       )
     })
 
-    test('is replaced with the user provided one', () => {
-      const {clickOnItemAtIndex, getA11yStatusContainer} = renderSelect({
+    test('is replaced with the user provided one', async () => {
+      renderSelect({
         getA11ySelectionMessage: () => 'custom message',
         initialIsOpen: true,
       })
 
-      clickOnItemAtIndex(3)
+      await clickOnItemAtIndex(3)
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent('custom message')
@@ -148,12 +156,12 @@ describe('props', () => {
     })
     afterAll(jest.useRealTimers)
 
-    test('reports that no results are available if items list is empty', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('reports that no results are available if items list is empty', async () => {
+      renderSelect({
         items: [],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -161,12 +169,12 @@ describe('props', () => {
       )
     })
 
-    test('reports that one result is available if one item is shown', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('reports that one result is available if one item is shown', async () => {
+      renderSelect({
         items: ['item1'],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -174,12 +182,12 @@ describe('props', () => {
       )
     })
 
-    test('reports the number of results available if more than one item are shown', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('reports the number of results available if more than one item are shown', async () => {
+      renderSelect({
         items: ['item1', 'item2'],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent(
@@ -187,50 +195,50 @@ describe('props', () => {
       )
     })
 
-    test('is empty on menu close', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('is empty on menu close', async () => {
+      renderSelect({
         items: ['item1', 'item2'],
         initialIsOpen: true,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toBeEmptyDOMElement()
     })
 
-    test('is removed after 500ms as a cleanup', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('is removed after 500ms as a cleanup', async () => {
+      renderSelect({
         items: ['item1', 'item2'],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
       act(() => jest.advanceTimersByTime(500))
 
       expect(getA11yStatusContainer()).toBeEmptyDOMElement()
     })
 
-    test('is replaced with the user provided one', () => {
-      const {clickOnToggleButton, getA11yStatusContainer} = renderSelect({
+    test('is replaced with the user provided one', async () => {
+      renderSelect({
         getA11yStatusMessage: () => 'custom message',
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusContainer()).toHaveTextContent('custom message')
     })
 
-    test('is called with previousResultCount that gets updated correctly', () => {
+    test('is called with previousResultCount that gets updated correctly', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputItems = ['aaa', 'bbb']
-      const {clickOnToggleButton, keyDownOnMenu} = renderSelect({
+      renderSelect({
         getA11yStatusMessage,
         items: inputItems,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)
@@ -242,7 +250,7 @@ describe('props', () => {
       )
 
       inputItems.pop()
-      keyDownOnMenu('ArrowDown')
+      await keyDownOnToggleButton('{ArrowDown}')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(2)
@@ -254,19 +262,19 @@ describe('props', () => {
       )
     })
 
-    test('is called with object that contains specific props at toggle', () => {
+    test('is called with object that contains specific props at toggle', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputValue = 'a'
       const highlightedIndex = 1
       const initialSelectedItem = items[highlightedIndex]
-      const {clickOnToggleButton} = renderSelect({
+      renderSelect({
         getA11yStatusMessage,
         inputValue,
         initialSelectedItem,
         selectedItem: items[highlightedIndex],
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)
@@ -284,7 +292,7 @@ describe('props', () => {
       )
     })
 
-    test('is added to the document provided by the user as prop', () => {
+    test('is added to the document provided by the user as prop', async () => {
       const environment = {
         document: {
           getElementById: jest.fn(() => ({setAttribute: jest.fn(), style: {}})),
@@ -292,18 +300,18 @@ describe('props', () => {
         addEventListener: jest.fn(),
         removeEventListener: jest.fn(),
       }
-      const {clickOnToggleButton} = renderSelect({items: [], environment})
+      renderSelect({items: [], environment})
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(environment.document.getElementById).toHaveBeenCalledTimes(1)
     })
 
-    test('is called when isOpen, highlightedIndex, inputValue or items change', () => {
+    test('is called when isOpen, highlightedIndex, inputValue or items change', async () => {
       const getA11yStatusMessage = jest.fn()
       const inputItems = ['aaa', 'bbb']
-      const {clickOnToggleButton, rerender, keyDownOnMenu} = renderSelect({
+      const {rerender} = renderSelect({
         getA11yStatusMessage,
         items,
       })
@@ -313,7 +321,7 @@ describe('props', () => {
       expect(getA11yStatusMessage).not.toHaveBeenCalled()
 
       // should not be called when any other prop is changed.
-      rerender({getA11yStatusMessage, items, circularNavigation: true})
+      rerender({getA11yStatusMessage, items, id: 'hello'})
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).not.toHaveBeenCalled()
@@ -326,7 +334,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(1)
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -334,7 +342,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(2)
 
-      keyDownOnMenu('b')
+      await keyDownOnToggleButton('b')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -342,7 +350,7 @@ describe('props', () => {
       )
       expect(getA11yStatusMessage).toHaveBeenCalledTimes(3)
 
-      keyDownOnMenu('ArrowUp')
+      await keyDownOnToggleButton('{ArrowUp}')
       waitForDebouncedA11yStatusUpdate()
 
       expect(getA11yStatusMessage).toHaveBeenCalledWith(
@@ -352,140 +360,115 @@ describe('props', () => {
     })
   })
 
-  describe('highlightedIndex', () => {
-    test('controls the state property if passed', () => {
-      const highlightedIndex = 1
-      const {keyDownOnToggleButton, keyDownOnMenu, menu} = renderSelect({
-        isOpen: true,
-        highlightedIndex,
-      })
-
-      expect(menu).toHaveAttribute(
-        'aria-activedescendant',
-        defaultIds.getItemId(highlightedIndex),
-      )
-
-      keyDownOnToggleButton('ArrowDown')
-      expect(menu).toHaveAttribute(
-        'aria-activedescendant',
-        defaultIds.getItemId(highlightedIndex),
-      )
+  test('highlightedIndex controls the state property if passed', async () => {
+    const highlightedIndex = 1
+    renderSelect({
+      isOpen: true,
+      highlightedIndex,
+    })
+    const toggleButton = getToggleButton()
+    const keys = [
+      '{ArrowDown}',
+      '{End}',
+      '{ArrowUp}',
+      '{PageUp}',
+      '{PageDown}',
+      'c',
+    ]
+
+    expect(toggleButton).toHaveAttribute(
+      'aria-activedescendant',
+      defaultIds.getItemId(highlightedIndex),
+    )
 
-      keyDownOnMenu('End')
-      expect(menu).toHaveAttribute(
-        'aria-activedescendant',
-        defaultIds.getItemId(highlightedIndex),
-      )
+    for (const key of keys) {
+      // eslint-disable-next-line no-await-in-loop
+      await keyDownOnToggleButton(key)
 
-      keyDownOnMenu('ArrowUp')
-      expect(menu).toHaveAttribute(
+      expect(toggleButton).toHaveAttribute(
         'aria-activedescendant',
         defaultIds.getItemId(highlightedIndex),
       )
-
-      keyDownOnMenu('c')
-      expect(menu).toHaveAttribute(
-        'aria-activedescendant',
-        defaultIds.getItemId(highlightedIndex),
-      )
-    })
+    }
   })
 
-  describe('isOpen', () => {
-    test('controls the state property if passed', () => {
-      const {
-        clickOnToggleButton,
-        keyDownOnMenu,
-        blurMenu,
-        getItems,
-      } = renderSelect({isOpen: true})
-      expect(getItems()).toHaveLength(items.length)
+  test('controls the state property if passed', async () => {
+    renderSelect({isOpen: true})
+    expect(getItems()).toHaveLength(items.length)
+    await tab() // focus toggle button
 
-      clickOnToggleButton()
-      expect(getItems()).toHaveLength(items.length)
+    await clickOnToggleButton()
+    expect(getItems()).toHaveLength(items.length)
 
-      keyDownOnMenu('Escape')
-      expect(getItems()).toHaveLength(items.length)
+    await keyDownOnToggleButton('{Escape}')
+    expect(getItems()).toHaveLength(items.length)
 
-      blurMenu()
-      expect(getItems()).toHaveLength(items.length)
-    })
+    await tab()
+    expect(getItems()).toHaveLength(items.length)
   })
 
   describe('selectedItem', () => {
-    test('controls the state property if passed', () => {
+    test('controls the state property if passed', async () => {
       const selectedItem = items[2]
-      const {
-        toggleButton,
-        keyDownOnToggleButton,
-        clickOnItemAtIndex,
-      } = renderSelect({selectedItem, isOpen: true})
+      renderSelect({selectedItem, isOpen: true})
+      const toggleButton = getToggleButton()
 
       expect(toggleButton).toHaveTextContent(items[2])
 
-      keyDownOnToggleButton('ArrowDown')
-      keyDownOnToggleButton('Enter')
+      await keyDownOnToggleButton('{ArrowDown}')
+      await keyDownOnToggleButton('{Enter}')
 
       expect(toggleButton).toHaveTextContent(items[2])
 
-      clickOnItemAtIndex(4)
+      await clickOnItemAtIndex(4)
 
       expect(toggleButton).toHaveTextContent(items[2])
     })
 
-    test('highlightedIndex on open gets computed based on the selectedItem prop value', () => {
+    test('highlightedIndex on open gets computed based on the selectedItem prop value', async () => {
       const expectedHighlightedIndex = 2
       const selectedItem = items[expectedHighlightedIndex]
-      const {
-        clickOnToggleButton,
-        clickOnItemAtIndex,
-        keyDownOnToggleButton,
-        toggleButton,
-        menu,
-        keyDownOnMenu,
-      } = renderSelect({selectedItem})
-
-      clickOnToggleButton()
-
-      expect(menu).toHaveAttribute(
+      renderSelect({selectedItem})
+      const toggleButton = getToggleButton()
+
+      expect(toggleButton).toHaveAttribute('aria-activedescendant', '')
+
+      await clickOnToggleButton()
+
+      expect(toggleButton).toHaveAttribute(
         'aria-activedescendant',
         defaultIds.getItemId(expectedHighlightedIndex),
       )
 
-      keyDownOnToggleButton('ArrowDown')
-      keyDownOnMenu('Enter')
+      await keyDownOnToggleButton('{ArrowDown}')
+      await keyDownOnToggleButton('{Enter}')
 
       expect(toggleButton).toHaveTextContent(items[expectedHighlightedIndex])
 
-      clickOnToggleButton()
-      clickOnItemAtIndex(3)
+      await clickOnToggleButton()
+      await clickOnItemAtIndex(3)
 
       expect(toggleButton).toHaveTextContent(items[expectedHighlightedIndex])
     })
 
-    test('highlightedIndex computed based on the selectedItem prop value in initial state as well', () => {
+    test('highlightedIndex computed based on the selectedItem prop value in initial state as well', async () => {
       const expectedHighlightedIndex = 2
       const selectedItem = items[expectedHighlightedIndex]
       // open dropdown in the initial state to check highlighted index.
-      const {
-        clickOnItemAtIndex,
-        clickOnToggleButton,
-        keyDownOnMenu,
-        toggleButton,
-        menu,
-      } = renderSelect({selectedItem, initialIsOpen: true})
-
-      expect(menu).toHaveAttribute(
+      renderSelect({selectedItem, initialIsOpen: true})
+      const toggleButton = getToggleButton()
+
+      expect(toggleButton).toHaveAttribute(
         'aria-activedescendant',
         defaultIds.getItemId(expectedHighlightedIndex),
       )
 
-      keyDownOnMenu('ArrowDown')
-      keyDownOnMenu('Enter')
+      await keyDownOnToggleButton('{ArrowDown}')
+      await keyDownOnToggleButton('{Enter}')
 
       expect(toggleButton).toHaveTextContent(items[expectedHighlightedIndex])
-      clickOnToggleButton()
-      clickOnItemAtIndex(3)
+      await clickOnToggleButton()
+      await clickOnItemAtIndex(3)
 
       expect(toggleButton).toHaveTextContent(items[expectedHighlightedIndex])
     })
@@ -575,216 +558,25 @@ describe('props', () => {
       )
     })
 
-    test('is called at each state change with the appropriate change type', () => {
+    test('is called at each state change with the appropriate change type', async () => {
       const stateReducer = jest.fn((s, a) => a.changes)
-      const {
-        clickOnToggleButton,
-        blurMenu,
-        mouseLeaveMenu,
-        keyDownOnToggleButton,
-        keyDownOnMenu,
-        mouseMoveItemAtIndex,
-        clickOnItemAtIndex,
-      } = renderSelect({stateReducer})
+      renderSelect({stateReducer})
       const initialState = {
         isOpen: false,
         highlightedIndex: -1,
         selectedItem: null,
         inputValue: '',
       }
-      const testCases = [
-        {
-          step: clickOnToggleButton,
-          state: {
-            isOpen: true,
-            highlightedIndex: -1,
-            inputValue: '',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.ToggleButtonClick,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'c',
-          state: {
-            isOpen: true,
-            highlightedIndex: 3,
-            inputValue: 'c',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.MenuKeyDownCharacter,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'ArrowDown',
-          state: {
-            isOpen: true,
-            highlightedIndex: 4,
-            inputValue: 'c',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.MenuKeyDownArrowDown,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'ArrowUp',
-          state: {
-            isOpen: true,
-            highlightedIndex: 3,
-            inputValue: 'c',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.MenuKeyDownArrowUp,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'End',
-          state: {
-            isOpen: true,
-            highlightedIndex: items.length - 1,
-            inputValue: 'c',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.MenuKeyDownEnd,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'Home',
-          state: {
-            isOpen: true,
-            highlightedIndex: 0,
-            inputValue: 'c',
-            selectedItem: null,
-          },
-          type: stateChangeTypes.MenuKeyDownHome,
-        },
-        {
-          step: keyDownOnMenu,
-          args: 'Enter',
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: 'c',
-            selectedItem: items[0],
-          },
-          type: stateChangeTypes.MenuKeyDownEnter,
-        },
-        {
-          step: keyDownOnToggleButton,
-          args: 'o',
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: 'co',
-            selectedItem: items[19],
-          },
-          type: stateChangeTypes.ToggleButtonKeyDownCharacter,
-        },
-        {
-          step: keyDownOnToggleButton,
-          args: 'ArrowDown',
-          state: {
-            isOpen: true,
-            highlightedIndex: 20,
-            inputValue: 'co',
-            selectedItem: items[19],
-          },
-          type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
-        },
-        {
-          step: clickOnItemAtIndex,
-          args: 10,
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.ItemClick,
-        },
-        {
-          step: keyDownOnToggleButton,
-          args: 'ArrowUp',
-          state: {
-            isOpen: true,
-            highlightedIndex: 9,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.ToggleButtonKeyDownArrowUp,
-        },
-        {
-          step: mouseMoveItemAtIndex,
-          args: 6,
-          state: {
-            isOpen: true,
-            highlightedIndex: 6,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.ItemMouseMove,
-        },
-        {
-          step: mouseLeaveMenu,
-          state: {
-            isOpen: true,
-            highlightedIndex: -1,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.MenuMouseLeave,
-        },
-        {
-          step: blurMenu,
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.MenuBlur,
-        },
-        {
-          step: keyDownOnToggleButton,
-          args: 'ArrowUp',
-          state: {
-            isOpen: true,
-            highlightedIndex: 9,
-            inputValue: 'co',
-            selectedItem: items[10],
-          },
-          type: stateChangeTypes.ToggleButtonKeyDownArrowUp,
-        },
-        {
-          step: keyDownOnMenu,
-          args: ' ',
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: 'co',
-            selectedItem: items[9],
-          },
-          type: stateChangeTypes.MenuKeyDownSpaceButton,
-        },
-        {
-          step: () => act(() => jest.runAllTimers()),
-          state: {
-            isOpen: false,
-            highlightedIndex: -1,
-            inputValue: '',
-            selectedItem: items[9],
-          },
-          type: stateChangeTypes.FunctionSetInputValue,
-        },
-      ]
 
       expect(stateReducer).not.toHaveBeenCalled()
 
-      for (let index = 0; index < testCases.length; index++) {
-        const {step, state, args, type} = testCases[index]
-        const previousState = testCases[index - 1]?.state ?? initialState
+      for (let index = 0; index < stateChangeTestCases.length; index++) {
+        const {step, state, arg, type} = stateChangeTestCases[index]
+        const previousState =
+          stateChangeTestCases[index - 1]?.state ?? initialState
 
-        step(args)
+        // eslint-disable-next-line no-await-in-loop
+        await step(arg)
 
         expect(stateReducer).toHaveBeenCalledTimes(index + 1)
         expect(stateReducer).toHaveBeenLastCalledWith(
@@ -794,7 +586,7 @@ describe('props', () => {
       }
     })
 
-    test('receives state, changes and type', () => {
+    test('receives state, changes and type', async () => {
       const stateReducer = jest.fn((s, a) => {
         expect(a.type).not.toBeUndefined()
         expect(a.type).not.toBeNull()
@@ -807,39 +599,40 @@ describe('props', () => {
 
         return a.changes
       })
-      const {clickOnToggleButton} = renderSelect({stateReducer})
+      renderSelect({stateReducer})
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
     })
 
     // should check that no blur state change occurs after item selection.
     // https://github.com/downshift-js/downshift/issues/965
-    test('is called only once on item selection', () => {
+    test('is called only once on item selection', async () => {
       const stateReducer = jest.fn((s, a) => a.changes)
-      const {
-        clickOnToggleButton,
-        keyDownOnMenu,
-        clickOnItemAtIndex,
-      } = renderSelect({stateReducer, initialIsOpen: true})
 
-      clickOnItemAtIndex(0)
+      renderSelect({
+        stateReducer,
+        initialIsOpen: true,
+        initialHighlightedIndex: 0,
+      })
+
+      await clickOnItemAtIndex(0)
 
       expect(stateReducer).toHaveBeenCalledTimes(1)
 
-      clickOnToggleButton()
-      keyDownOnMenu('ArrowDown')
-      keyDownOnMenu('Enter')
+      await clickOnToggleButton()
+      await keyDownOnToggleButton('{ArrowDown}')
+      await keyDownOnToggleButton('{Enter}')
 
       expect(stateReducer).toHaveBeenCalledTimes(4)
 
-      clickOnToggleButton()
-      keyDownOnMenu('ArrowDown')
-      keyDownOnMenu(' ')
+      await clickOnToggleButton()
+      await keyDownOnToggleButton('{ArrowDown}')
+      await keyDownOnToggleButton(' ')
 
       expect(stateReducer).toHaveBeenCalledTimes(7)
     })
 
-    test('changes are visible in onChange handlers', () => {
+    test('changes are visible in onChange handlers', async () => {
       const highlightedIndex = 2
       const selectedItem = {foo: 'bar'}
       const isOpen = true
@@ -852,7 +645,7 @@ describe('props', () => {
       const onHighlightedIndexChange = jest.fn()
       const onIsOpenChange = jest.fn()
       const onStateChange = jest.fn()
-      const {clickOnToggleButton} = renderSelect({
+      renderSelect({
         stateReducer,
         onStateChange,
         onSelectedItemChange,
@@ -860,7 +653,7 @@ describe('props', () => {
         onIsOpenChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -891,15 +684,15 @@ describe('props', () => {
   })
 
   describe('onSelectedItemChange', () => {
-    test('is called at selectedItem change', () => {
+    test('is called at selectedItem change', async () => {
       const onSelectedItemChange = jest.fn()
       const index = 2
-      const {clickOnItemAtIndex} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         onSelectedItemChange,
       })
 
-      clickOnItemAtIndex(index)
+      await clickOnItemAtIndex(index)
 
       expect(onSelectedItemChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -909,24 +702,24 @@ describe('props', () => {
       )
     })
 
-    test('is not called at if selectedItem is the same', () => {
+    test('is not called at if selectedItem is the same', async () => {
       const index = 1
       const onSelectedItemChange = jest.fn()
-      const {clickOnItemAtIndex} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         initialSelectedItem: items[index],
         onSelectedItemChange,
       })
 
-      clickOnItemAtIndex(index)
+      await clickOnItemAtIndex(index)
 
       expect(onSelectedItemChange).not.toHaveBeenCalled()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let selectedItem = items[2]
       const selectionIndex = 3
-      const {clickOnItemAtIndex, toggleButton, rerender} = renderSelect({
+      const {rerender} = renderSelect({
         initialIsOpen: true,
         selectedItem,
         onSelectedItemChange: changes => {
@@ -934,10 +727,10 @@ describe('props', () => {
         },
       })
 
-      clickOnItemAtIndex(selectionIndex)
+      await clickOnItemAtIndex(selectionIndex)
       rerender({selectedItem})
 
-      expect(toggleButton).toHaveTextContent(items[selectionIndex])
+      expect(getToggleButton()).toHaveTextContent(items[selectionIndex])
     })
 
     test('can have downshift actions executed', () => {
@@ -957,14 +750,14 @@ describe('props', () => {
   })
 
   describe('onHighlightedIndexChange', () => {
-    test('is called at each highlightedIndex change', () => {
+    test('is called at each highlightedIndex change', async () => {
       const onHighlightedIndexChange = jest.fn()
-      const {keyDownOnToggleButton} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         onHighlightedIndexChange,
       })
 
-      keyDownOnToggleButton('ArrowDown')
+      await keyDownOnToggleButton('{ArrowDown}')
 
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -974,32 +767,32 @@ describe('props', () => {
       )
     })
 
-    test('is not called if highlightedIndex is the same', () => {
+    test('is not called if highlightedIndex is the same', async () => {
       const onHighlightedIndexChange = jest.fn()
-      const {keyDownOnMenu} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         initialHighlightedIndex: 0,
         onHighlightedIndexChange,
       })
 
-      keyDownOnMenu('ArrowUp')
+      await keyDownOnToggleButton('{ArrowUp}')
 
       expect(onHighlightedIndexChange).not.toHaveBeenCalled()
 
-      keyDownOnMenu('Home')
+      await keyDownOnToggleButton('{Home}')
 
       expect(onHighlightedIndexChange).not.toHaveBeenCalled()
     })
 
-    test('is called on first open when initialSelectedItem is set', () => {
+    test('is called on first open when initialSelectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderSelect({
+      renderSelect({
         initialSelectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1009,15 +802,15 @@ describe('props', () => {
       )
     })
 
-    test('is called on first open when selectedItem is set', () => {
+    test('is called on first open when selectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderSelect({
+      renderSelect({
         selectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1027,15 +820,15 @@ describe('props', () => {
       )
     })
 
-    test('is called on first open when defaultSelectedItem is set', () => {
+    test('is called on first open when defaultSelectedItem is set', async () => {
       const index = 2
       const onHighlightedIndexChange = jest.fn()
-      const {clickOnToggleButton} = renderSelect({
+      renderSelect({
         defaultSelectedItem: items[index],
         onHighlightedIndexChange,
       })
 
-      clickOnToggleButton()
+      await clickOnToggleButton()
 
       expect(onHighlightedIndexChange).toHaveBeenCalledTimes(1)
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
@@ -1045,9 +838,9 @@ describe('props', () => {
       )
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let highlightedIndex = 2
-      const {keyDownOnMenu, menu, rerender} = renderSelect({
+      const {rerender} = renderSelect({
         isOpen: true,
         highlightedIndex,
         onHighlightedIndexChange: changes => {
@@ -1055,10 +848,10 @@ describe('props', () => {
         },
       })
 
-      keyDownOnMenu('ArrowDown')
+      await keyDownOnToggleButton('{ArrowDown}')
       rerender({isOpen: true, highlightedIndex})
 
-      expect(menu).toHaveAttribute(
+      expect(getToggleButton()).toHaveAttribute(
         'aria-activedescendant',
         defaultIds.getItemId(3),
       )
@@ -1084,45 +877,45 @@ describe('props', () => {
   })
 
   describe('onIsOpenChange', () => {
-    test('is called at each isOpen change', () => {
+    test('is called at each isOpen change', async () => {
       const onIsOpenChange = jest.fn()
-      const {keyDownOnMenu} = renderSelect({
+      renderSelect({
         initialIsOpen: true,
         onIsOpenChange,
       })
 
-      keyDownOnMenu('Escape')
+      await keyDownOnToggleButton('{Escape}')
 
       expect(onIsOpenChange).toHaveBeenCalledWith(
         expect.objectContaining({
           isOpen: false,
-          type: stateChangeTypes.MenuKeyDownEscape,
+          type: stateChangeTypes.ToggleButtonKeyDownEscape,
         }),
       )
     })
 
-    test('is not called at if isOpen is the same', () => {
+    test('is not called at if isOpen is the same', async () => {
       const onIsOpenChange = jest.fn()
-      const {clickOnItemAtIndex} = renderSelect({
+      renderSelect({
         defaultIsOpen: true,
         onIsOpenChange,
       })
 
-      clickOnItemAtIndex(0)
+      await clickOnItemAtIndex(0)
 
       expect(onIsOpenChange).not.toHaveBeenCalledWith()
     })
 
-    test('works correctly with the corresponding control prop', () => {
+    test('works correctly with the corresponding control prop', async () => {
       let isOpen = true
-      const {keyDownOnMenu, getItems, rerender} = renderSelect({
+      const {rerender} = renderSelect({
         isOpen,
         onIsOpenChange: changes => {
           isOpen = changes.isOpen
         },
       })
 
-      keyDownOnMenu('Escape')
+      await keyDownOnToggleButton('{Escape}')
       rerender({isOpen})
 
       expect(getItems()).toHaveLength(0)
@@ -1145,185 +938,47 @@ describe('props', () => {
   })
 
   describe('onStateChange', () => {
-    // eslint-disable-next-line max-statements
-    test('is called at each state property change but only with changed props', () => {
+    beforeEach(jest.useFakeTimers)
+    beforeEach(jest.clearAllTimers)
+    afterAll(jest.useRealTimers)
+    test('is called at each state property change but only with changed props', async () => {
+      jest.useFakeTimers()
       const onStateChange = jest.fn()
-      const {
-        clickOnToggleButton,
-        tab,
-        mouseLeaveMenu,
-        keyDownOnToggleButton,
-        keyDownOnMenu,
-        mouseMoveItemAtIndex,
-        clickOnItemAtIndex,
-      } = renderSelect({onStateChange, isOpen: true})
-
-      clickOnToggleButton()
-
-      expect(onStateChange).toHaveBeenCalledTimes(1)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          isOpen: false,
-          type: stateChangeTypes.ToggleButtonClick,
-        }),
-      )
-
-      keyDownOnMenu('c')
-
-      expect(onStateChange).toHaveBeenCalledTimes(2)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          inputValue: 'c',
-          highlightedIndex: 3, // 4th item starts with C.
-          type: stateChangeTypes.MenuKeyDownCharacter,
-        }),
-      )
-
-      keyDownOnMenu('ArrowDown')
-
-      expect(onStateChange).toHaveBeenCalledTimes(3)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 4,
-          type: stateChangeTypes.MenuKeyDownArrowDown,
-        }),
-      )
-
-      keyDownOnMenu('ArrowUp')
-
-      expect(onStateChange).toHaveBeenCalledTimes(4)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 3,
-          type: stateChangeTypes.MenuKeyDownArrowUp,
-        }),
-      )
-
-      keyDownOnMenu('End')
-
-      expect(onStateChange).toHaveBeenCalledTimes(5)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: items.length - 1,
-          type: stateChangeTypes.MenuKeyDownEnd,
-        }),
-      )
-
-      keyDownOnMenu('Home')
-
-      expect(onStateChange).toHaveBeenCalledTimes(6)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 0,
-          type: stateChangeTypes.MenuKeyDownHome,
-        }),
-      )
-
-      keyDownOnMenu('Enter')
-
-      expect(onStateChange).toHaveBeenCalledTimes(7)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          isOpen: false,
-          selectedItem: items[0],
-          type: stateChangeTypes.MenuKeyDownEnter,
-        }),
-      )
-
-      mouseMoveItemAtIndex(3)
-
-      expect(onStateChange).toHaveBeenCalledTimes(8)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 3,
-          type: stateChangeTypes.ItemMouseMove,
-        }),
-      )
-
-      mouseLeaveMenu()
-
-      expect(onStateChange).toHaveBeenCalledTimes(9)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: -1,
-          type: stateChangeTypes.MenuMouseLeave,
-        }),
-      )
-
-      keyDownOnMenu('Escape')
-
-      expect(onStateChange).toHaveBeenCalledTimes(10)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          isOpen: false,
-          type: stateChangeTypes.MenuKeyDownEscape,
-        }),
-      )
-
-      keyDownOnToggleButton('ArrowDown')
-
-      expect(onStateChange).toHaveBeenCalledTimes(11)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 1,
-          type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
-        }),
-      )
-
-      keyDownOnMenu(' ')
-
-      expect(onStateChange).toHaveBeenCalledTimes(12)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: -1,
-          selectedItem: items[1],
-          isOpen: false,
-          type: stateChangeTypes.MenuKeyDownSpaceButton,
-        }),
-      )
-
-      keyDownOnToggleButton('ArrowDown')
-
-      expect(onStateChange).toHaveBeenCalledTimes(13)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          highlightedIndex: 2,
-          type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
-        }),
-      )
-
-      clickOnItemAtIndex(3)
-
-      expect(onStateChange).toHaveBeenCalledTimes(14)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          selectedItem: items[3],
-          isOpen: false,
-          highlightedIndex: -1,
-          type: stateChangeTypes.ItemClick,
-        }),
-      )
-
-      keyDownOnToggleButton('a')
+      const initialState = {
+        isOpen: false,
+        highlightedIndex: -1,
+        selectedItem: null,
+        inputValue: '',
+      }
 
-      expect(onStateChange).toHaveBeenCalledTimes(15)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          inputValue: 'ca',
-          selectedItem: items[5], // 5 item starts with CA.
-          type: stateChangeTypes.ToggleButtonKeyDownCharacter,
-        }),
-      )
+      renderSelect({onStateChange})
+
+      for (let index = 0; index < stateChangeTestCases.length; index++) {
+        const {step, state, arg, type} = stateChangeTestCases[index]
+        const previousState =
+          stateChangeTestCases[index - 1]?.state ?? initialState
+        const newState = Object.keys(state).reduce(
+          (acc, key) =>
+            state[key] === previousState[key]
+              ? acc
+              : {...acc, [key]: state[key]},
+          {},
+        )
 
-      tab()
+        // eslint-disable-next-line no-await-in-loop
+        await step(arg)
 
-      expect(onStateChange).toHaveBeenCalledTimes(16)
-      expect(onStateChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          isOpen: false,
-          type: stateChangeTypes.MenuBlur,
-        }),
-      )
+        expect(onStateChange).toHaveBeenCalledTimes(index + 1)
+        expect(onStateChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            ...newState,
+            type,
+          }),
+        )
+      }
+      
+      jest.runAllTimers()
+      jest.useRealTimers()
     })
 
     test('can have downshift actions executed', () => {
@@ -1342,7 +997,7 @@ describe('props', () => {
     })
   })
 
-  it('that are uncontrolled should not become controlled', () => {
+  test('that are uncontrolled should not become controlled', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {})
     const {rerender} = renderSelect()
 
@@ -1353,7 +1008,7 @@ describe('props', () => {
     )
   })
 
-  it('that are controlled should not become uncontrolled', () => {
+  test('that are controlled should not become uncontrolled', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {})
     const {rerender} = renderSelect({highlightedIndex: 3})
 
diff --git a/src/hooks/useSelect/index.js b/src/hooks/useSelect/index.js
index d488a6507..25cc14b63 100644
--- a/src/hooks/useSelect/index.js
+++ b/src/hooks/useSelect/index.js
@@ -1,17 +1,16 @@
-/* eslint-disable max-statements */
 import {useRef, useEffect, useCallback, useMemo} from 'react'
 import {
   getItemIndex,
   isAcceptedCharacterKey,
   useControlledReducer,
   getInitialState,
-  useMouseAndTouchTracker,
   useGetterPropsCalledChecker,
   useLatestRef,
   useA11yMessageSetter,
   useScrollIntoView,
   useControlPropsValidator,
   useElementIds,
+  useMouseAndTouchTracker,
 } from '../utils'
 import {
   callAllEventHandlers,
@@ -36,8 +35,6 @@ function useSelect(userProps = {}) {
     items,
     scrollIntoView,
     environment,
-    initialIsOpen,
-    defaultIsOpen,
     itemToString,
     getA11ySelectionMessage,
     getA11yStatusMessage,
@@ -55,8 +52,6 @@ function useSelect(userProps = {}) {
   const toggleButtonRef = useRef(null)
   const menuRef = useRef(null)
   const itemRefs = useRef({})
-  // used not to trigger menu blur action in some scenarios.
-  const shouldBlurRef = useRef(true)
   // used to keep the inputValue clearTimeout object between renders.
   const clearTimeoutRef = useRef(null)
   // prevent id re-generation between renders.
@@ -139,34 +134,6 @@ function useSelect(userProps = {}) {
     props,
     state,
   })
-  /* Controls the focus on the menu or the toggle button. */
-  useEffect(() => {
-    // Don't focus menu on first render.
-    if (isInitialMountRef.current) {
-      // Unless it was initialised as open.
-      if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
-        menuRef.current.focus()
-      }
-      return
-    }
-    // Focus menu on open.
-    if (isOpen) {
-      // istanbul ignore else
-      if (menuRef.current) {
-        menuRef.current.focus()
-      }
-      return
-    }
-    // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
-    if (environment.document.activeElement === menuRef.current) {
-      // istanbul ignore else
-      if (toggleButtonRef.current) {
-        shouldBlurRef.current = false
-        toggleButtonRef.current.focus()
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen])
   useEffect(() => {
     if (isInitialMountRef.current) {
       return
@@ -181,7 +148,7 @@ function useSelect(userProps = {}) {
     environment,
     () => {
       dispatch({
-        type: stateChangeTypes.MenuBlur,
+        type: stateChangeTypes.ToggleButtonBlur,
       })
     },
   )
@@ -209,7 +176,7 @@ function useSelect(userProps = {}) {
         dispatch({
           type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
           getItemNodeFromIndex,
-          shiftKey: event.shiftKey,
+          altKey: event.altKey,
         })
       },
       ArrowUp(event) {
@@ -218,37 +185,14 @@ function useSelect(userProps = {}) {
         dispatch({
           type: stateChangeTypes.ToggleButtonKeyDownArrowUp,
           getItemNodeFromIndex,
-          shiftKey: event.shiftKey,
-        })
-      },
-    }),
-    [dispatch, getItemNodeFromIndex],
-  )
-  const menuKeyDownHandlers = useMemo(
-    () => ({
-      ArrowDown(event) {
-        event.preventDefault()
-
-        dispatch({
-          type: stateChangeTypes.MenuKeyDownArrowDown,
-          getItemNodeFromIndex,
-          shiftKey: event.shiftKey,
-        })
-      },
-      ArrowUp(event) {
-        event.preventDefault()
-
-        dispatch({
-          type: stateChangeTypes.MenuKeyDownArrowUp,
-          getItemNodeFromIndex,
-          shiftKey: event.shiftKey,
+          altKey: event.altKey,
         })
       },
       Home(event) {
         event.preventDefault()
 
         dispatch({
-          type: stateChangeTypes.MenuKeyDownHome,
+          type: stateChangeTypes.ToggleButtonKeyDownHome,
           getItemNodeFromIndex,
         })
       },
@@ -256,31 +200,57 @@ function useSelect(userProps = {}) {
         event.preventDefault()
 
         dispatch({
-          type: stateChangeTypes.MenuKeyDownEnd,
+          type: stateChangeTypes.ToggleButtonKeyDownEnd,
           getItemNodeFromIndex,
         })
       },
       Escape() {
-        dispatch({
-          type: stateChangeTypes.MenuKeyDownEscape,
-        })
+        if (latest.current.state.isOpen) {
+          dispatch({
+            type: stateChangeTypes.ToggleButtonKeyDownEscape,
+          })
+        }
       },
       Enter(event) {
-        event.preventDefault()
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
 
-        dispatch({
-          type: stateChangeTypes.MenuKeyDownEnter,
-        })
+          dispatch({
+            type: stateChangeTypes.ToggleButtonKeyDownEnter,
+          })
+        }
+      },
+      PageUp(event) {
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
+
+          dispatch({
+            type: stateChangeTypes.ToggleButtonKeyDownPageUp,
+            getItemNodeFromIndex,
+          })
+        }
+      },
+      PageDown(event) {
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
+
+          dispatch({
+            type: stateChangeTypes.ToggleButtonKeyDownPageDown,
+            getItemNodeFromIndex,
+          })
+        }
       },
       ' '(event) {
-        event.preventDefault()
+        if (latest.current.state.isOpen) {
+          event.preventDefault()
 
-        dispatch({
-          type: stateChangeTypes.MenuKeyDownSpaceButton,
-        })
+          dispatch({
+            type: stateChangeTypes.ToggleButtonKeyDownSpaceButton,
+          })
+        }
       },
     }),
-    [dispatch, getItemNodeFromIndex],
+    [dispatch, getItemNodeFromIndex, latest],
   )
 
   // Action functions.
@@ -345,32 +315,6 @@ function useSelect(userProps = {}) {
       {onMouseLeave, refKey = 'ref', onKeyDown, onBlur, ref, ...rest} = {},
       {suppressRefError = false} = {},
     ) => {
-      const latestState = latest.current.state
-      const menuHandleKeyDown = event => {
-        const key = normalizeArrowKey(event)
-        if (key && menuKeyDownHandlers[key]) {
-          menuKeyDownHandlers[key](event)
-        } else if (isAcceptedCharacterKey(key)) {
-          dispatch({
-            type: stateChangeTypes.MenuKeyDownCharacter,
-            key,
-            getItemNodeFromIndex,
-          })
-        }
-      }
-      const menuHandleBlur = () => {
-        // if the blur was a result of selection, we don't trigger this action.
-        if (shouldBlurRef.current === false) {
-          shouldBlurRef.current = true
-          return
-        }
-
-        const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown
-        /* istanbul ignore else */
-        if (shouldBlur) {
-          dispatch({type: stateChangeTypes.MenuBlur})
-        }
-      }
       const menuHandleMouseLeave = () => {
         dispatch({
           type: stateChangeTypes.MenuMouseLeave,
@@ -387,38 +331,33 @@ function useSelect(userProps = {}) {
         role: 'listbox',
         'aria-labelledby': elementIds.labelId,
         tabIndex: -1,
-        ...(latestState.isOpen &&
-          latestState.highlightedIndex > -1 && {
-            'aria-activedescendant': elementIds.getItemId(
-              latestState.highlightedIndex,
-            ),
-          }),
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
-        onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
-        onBlur: callAllEventHandlers(onBlur, menuHandleBlur),
         ...rest,
       }
     },
-    [
-      dispatch,
-      latest,
-      menuKeyDownHandlers,
-      mouseAndTouchTrackersRef,
-      setGetterPropCallInfo,
-      elementIds,
-      getItemNodeFromIndex,
-    ],
+    [dispatch, setGetterPropCallInfo, elementIds],
   )
   const getToggleButtonProps = useCallback(
     (
-      {onClick, onKeyDown, refKey = 'ref', ref, ...rest} = {},
+      {onBlur, onClick, onKeyDown, refKey = 'ref', ref, ...rest} = {},
       {suppressRefError = false} = {},
     ) => {
+      const latestState = latest.current.state
       const toggleButtonHandleClick = () => {
         dispatch({
           type: stateChangeTypes.ToggleButtonClick,
         })
       }
+      const toggleButtonHandleBlur = () => {
+        if (
+          latestState.isOpen &&
+          !mouseAndTouchTrackersRef.current.isMouseDown
+        ) {
+          dispatch({
+            type: stateChangeTypes.ToggleButtonBlur,
+          })
+        }
+      }
       const toggleButtonHandleKeyDown = event => {
         const key = normalizeArrowKey(event)
         if (key && toggleButtonKeyDownHandlers[key]) {
@@ -435,10 +374,18 @@ function useSelect(userProps = {}) {
         [refKey]: handleRefs(ref, toggleButtonNode => {
           toggleButtonRef.current = toggleButtonNode
         }),
-        id: elementIds.toggleButtonId,
-        'aria-haspopup': 'listbox',
+        'aria-activedescendant':
+          latestState.isOpen && latestState.highlightedIndex > -1
+            ? elementIds.getItemId(latestState.highlightedIndex)
+            : '',
+        'aria-controls': elementIds.menuId,
         'aria-expanded': latest.current.state.isOpen,
+        'aria-haspopup': 'listbox',
         'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
+        id: elementIds.toggleButtonId,
+        role: 'combobox',
+        tabIndex: 0,
+        onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
         ...rest,
       }
 
@@ -463,18 +410,19 @@ function useSelect(userProps = {}) {
       return toggleProps
     },
     [
-      dispatch,
       latest,
-      toggleButtonKeyDownHandlers,
-      setGetterPropCallInfo,
       elementIds,
+      setGetterPropCallInfo,
+      dispatch,
+      mouseAndTouchTrackersRef,
+      toggleButtonKeyDownHandlers,
       getItemNodeFromIndex,
     ],
   )
   const getItemProps = useCallback(
     ({
-      item,
-      index,
+      item: itemProp,
+      index: indexProp,
       onMouseMove,
       onClick,
       refKey = 'ref',
@@ -483,6 +431,9 @@ function useSelect(userProps = {}) {
       ...rest
     } = {}) => {
       const {state: latestState, props: latestProps} = latest.current
+      const item = itemProp ?? items[indexProp]
+      const index = getItemIndex(indexProp, item, latestProps.items)
+
       const itemHandleMouseMove = () => {
         if (index === latestState.highlightedIndex) {
           return
@@ -508,7 +459,7 @@ function useSelect(userProps = {}) {
       const itemProps = {
         disabled,
         role: 'option',
-        'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
+        'aria-selected': `${item === selectedItem}`,
         id: elementIds.getItemId(itemIndex),
         [refKey]: handleRefs(ref, itemNode => {
           if (itemNode) {
@@ -529,7 +480,7 @@ function useSelect(userProps = {}) {
 
       return itemProps
     },
-    [dispatch, latest, shouldScrollRef, elementIds],
+    [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch],
   )
 
   return {
diff --git a/src/hooks/useSelect/reducer.js b/src/hooks/useSelect/reducer.js
index 4fd0da3b4..261f2ad5c 100644
--- a/src/hooks/useSelect/reducer.js
+++ b/src/hooks/useSelect/reducer.js
@@ -6,7 +6,7 @@ import * as stateChangeTypes from './stateChangeTypes'
 
 /* eslint-disable complexity */
 export default function downshiftSelectReducer(state, action) {
-  const {type, props, shiftKey} = action
+  const {type, props, altKey} = action
   let changes
 
   switch (type) {
@@ -22,11 +22,13 @@ export default function downshiftSelectReducer(state, action) {
       {
         const lowercasedKey = action.key
         const inputValue = `${state.inputValue}${lowercasedKey}`
-        const itemIndex = getItemIndexByCharacterKey({
-          keysSoFar: inputValue,
-          highlightedIndex: state.selectedItem
+        const prevHighlightedIndex =
+          !state.isOpen && state.selectedItem
             ? props.items.indexOf(state.selectedItem)
-            : -1,
+            : state.highlightedIndex
+        const highlightedIndex = getItemIndexByCharacterKey({
+          keysSoFar: inputValue,
+          highlightedIndex: prevHighlightedIndex,
           items: props.items,
           itemToString: props.itemToString,
           getItemNodeFromIndex: action.getItemNodeFromIndex,
@@ -34,39 +36,61 @@ export default function downshiftSelectReducer(state, action) {
 
         changes = {
           inputValue,
-          ...(itemIndex >= 0 && {
-            selectedItem: props.items[itemIndex],
-          }),
+          highlightedIndex,
+          isOpen: true,
         }
       }
 
       break
     case stateChangeTypes.ToggleButtonKeyDownArrowDown:
-      changes = {
-        highlightedIndex: getHighlightedIndexOnOpen(
-          props,
-          state,
-          1,
-          action.getItemNodeFromIndex,
-        ),
-        isOpen: true,
+      {
+        const highlightedIndex = state.isOpen
+          ? getNextWrappingIndex(
+              1,
+              state.highlightedIndex,
+              props.items.length,
+              action.getItemNodeFromIndex,
+              false,
+            )
+          : altKey && state.selectedItem == null
+          ? -1
+          : getHighlightedIndexOnOpen(props, state, 1)
+        changes = {
+          highlightedIndex,
+          isOpen: true,
+        }
       }
 
       break
     case stateChangeTypes.ToggleButtonKeyDownArrowUp:
-      changes = {
-        highlightedIndex: getHighlightedIndexOnOpen(
-          props,
-          state,
-          -1,
-          action.getItemNodeFromIndex,
-        ),
-        isOpen: true,
+      if (state.isOpen && altKey) {
+        changes = {
+          isOpen: getDefaultValue(props, 'isOpen'),
+          highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
+          ...(state.highlightedIndex >= 0 && {
+            selectedItem: props.items[state.highlightedIndex],
+          }),
+        }
+      } else {
+        const highlightedIndex = state.isOpen
+          ? getNextWrappingIndex(
+              -1,
+              state.highlightedIndex,
+              props.items.length,
+              action.getItemNodeFromIndex,
+              false,
+            )
+          : getHighlightedIndexOnOpen(props, state, -1)
+        changes = {
+          highlightedIndex,
+          isOpen: true,
+        }
       }
 
       break
-    case stateChangeTypes.MenuKeyDownEnter:
-    case stateChangeTypes.MenuKeyDownSpaceButton:
+    // only triggered when menu is open.
+    case stateChangeTypes.ToggleButtonKeyDownEnter:
+    case stateChangeTypes.ToggleButtonKeyDownSpaceButton:
       changes = {
         isOpen: getDefaultValue(props, 'isOpen'),
         highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
@@ -76,7 +100,7 @@ export default function downshiftSelectReducer(state, action) {
       }
 
       break
-    case stateChangeTypes.MenuKeyDownHome:
+    case stateChangeTypes.ToggleButtonKeyDownHome:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(
           1,
@@ -85,10 +109,11 @@ export default function downshiftSelectReducer(state, action) {
           action.getItemNodeFromIndex,
           false,
         ),
+        isOpen: true,
       }
 
       break
-    case stateChangeTypes.MenuKeyDownEnd:
+    case stateChangeTypes.ToggleButtonKeyDownEnd:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(
           -1,
@@ -97,67 +122,49 @@ export default function downshiftSelectReducer(state, action) {
           action.getItemNodeFromIndex,
           false,
         ),
+        isOpen: true,
       }
 
       break
-    case stateChangeTypes.MenuKeyDownEscape:
-      changes = {
-        isOpen: false,
-        highlightedIndex: -1,
-      }
-
-      break
-    case stateChangeTypes.MenuBlur:
-      changes = {
-        isOpen: false,
-        highlightedIndex: -1,
-      }
-
-      break
-    case stateChangeTypes.MenuKeyDownCharacter:
-      {
-        const lowercasedKey = action.key
-        const inputValue = `${state.inputValue}${lowercasedKey}`
-        const highlightedIndex = getItemIndexByCharacterKey({
-          keysSoFar: inputValue,
-          highlightedIndex: state.highlightedIndex,
-          items: props.items,
-          itemToString: props.itemToString,
-          getItemNodeFromIndex: action.getItemNodeFromIndex,
-        })
-
-        changes = {
-          inputValue,
-          ...(highlightedIndex >= 0 && {
-            highlightedIndex,
-          }),
-        }
-      }
-      break
-    case stateChangeTypes.MenuKeyDownArrowDown:
+    case stateChangeTypes.ToggleButtonKeyDownPageUp:
       changes = {
         highlightedIndex: getNextWrappingIndex(
-          shiftKey ? 5 : 1,
+          -10,
           state.highlightedIndex,
           props.items.length,
           action.getItemNodeFromIndex,
-          props.circularNavigation,
+          false,
         ),
       }
-
       break
-    case stateChangeTypes.MenuKeyDownArrowUp:
+    case stateChangeTypes.ToggleButtonKeyDownPageDown:
       changes = {
         highlightedIndex: getNextWrappingIndex(
-          shiftKey ? -5 : -1,
+          10,
           state.highlightedIndex,
           props.items.length,
           action.getItemNodeFromIndex,
-          props.circularNavigation,
+          false,
         ),
       }
       break
+    case stateChangeTypes.ToggleButtonKeyDownEscape:
+      changes = {
+        isOpen: false,
+        highlightedIndex: -1,
+      }
 
+      break
+    case stateChangeTypes.ToggleButtonBlur:
+      changes = {
+        isOpen: false,
+        highlightedIndex: -1,
+        ...(state.highlightedIndex >= 0 && {
+          selectedItem: props.items[state.highlightedIndex],
+        }),
+      }
+
+      break
     case stateChangeTypes.FunctionSelectItem:
       changes = {
         selectedItem: action.selectedItem,
diff --git a/src/hooks/useSelect/stateChangeTypes.js b/src/hooks/useSelect/stateChangeTypes.js
index 8183d950a..b2e81958d 100644
--- a/src/hooks/useSelect/stateChangeTypes.js
+++ b/src/hooks/useSelect/stateChangeTypes.js
@@ -1,23 +1,5 @@
 import productionEnum from '../../productionEnum.macro'
 
-export const MenuKeyDownArrowDown = productionEnum(
-  '__menu_keydown_arrow_down__',
-)
-export const MenuKeyDownArrowUp = productionEnum('__menu_keydown_arrow_up__')
-export const MenuKeyDownEscape = productionEnum('__menu_keydown_escape__')
-export const MenuKeyDownHome = productionEnum('__menu_keydown_home__')
-export const MenuKeyDownEnd = productionEnum('__menu_keydown_end__')
-export const MenuKeyDownEnter = productionEnum('__menu_keydown_enter__')
-export const MenuKeyDownSpaceButton = productionEnum(
-  '__menu_keydown_space_button__',
-)
-export const MenuKeyDownCharacter = productionEnum('__menu_keydown_character__')
-export const MenuBlur = productionEnum('__menu_blur__')
-export const MenuMouseLeave = productionEnum('__menu_mouse_leave__')
-
-export const ItemMouseMove = productionEnum('__item_mouse_move__')
-export const ItemClick = productionEnum('__item_click__')
-
 export const ToggleButtonClick = productionEnum('__togglebutton_click__')
 export const ToggleButtonKeyDownArrowDown = productionEnum(
   '__togglebutton_keydown_arrow_down__',
@@ -28,6 +10,33 @@ export const ToggleButtonKeyDownArrowUp = productionEnum(
 export const ToggleButtonKeyDownCharacter = productionEnum(
   '__togglebutton_keydown_character__',
 )
+export const ToggleButtonKeyDownEscape = productionEnum(
+  '__togglebutton_keydown_escape__',
+)
+export const ToggleButtonKeyDownHome = productionEnum(
+  '__togglebutton_keydown_home__',
+)
+export const ToggleButtonKeyDownEnd = productionEnum(
+  '__togglebutton_keydown_end__',
+)
+export const ToggleButtonKeyDownEnter = productionEnum(
+  '__togglebutton_keydown_enter__',
+)
+export const ToggleButtonKeyDownSpaceButton = productionEnum(
+  '__togglebutton_keydown_space_button__',
+)
+export const ToggleButtonKeyDownPageUp = productionEnum(
+  '__togglebutton_keydown_page_up__',
+)
+export const ToggleButtonKeyDownPageDown = productionEnum(
+  '__togglebutton_keydown_page_down__',
+)
+export const ToggleButtonBlur = productionEnum('__togglebutton_blur__')
+
+export const MenuMouseLeave = productionEnum('__menu_mouse_leave__')
+
+export const ItemMouseMove = productionEnum('__item_mouse_move__')
+export const ItemClick = productionEnum('__item_click__')
 
 export const FunctionToggleMenu = productionEnum('__function_toggle_menu__')
 export const FunctionOpenMenu = productionEnum('__function_open_menu__')
diff --git a/src/hooks/useSelect/testUtils.js b/src/hooks/useSelect/testUtils.js
index 05bec934c..b7b76de49 100644
--- a/src/hooks/useSelect/testUtils.js
+++ b/src/hooks/useSelect/testUtils.js
@@ -1,11 +1,22 @@
 import * as React from 'react'
-import {render, fireEvent, screen} from '@testing-library/react'
+import {render, act} from '@testing-library/react'
 import {renderHook} from '@testing-library/react-hooks'
-import userEvent from '@testing-library/user-event'
 import {defaultProps} from '../utils'
-import {items} from '../testUtils'
+import {
+  clickOnItemAtIndex,
+  clickOnToggleButton,
+  dataTestIds,
+  items,
+  keyDownOnToggleButton,
+  mouseLeaveItemAtIndex,
+  mouseMoveItemAtIndex,
+  tab,
+} from '../testUtils'
+import * as stateChangeTypes from './stateChangeTypes'
 import useSelect from '.'
 
+export * from '../testUtils'
+
 jest.mock('../../utils', () => {
   const utils = jest.requireActual('../../utils')
 
@@ -28,75 +39,24 @@ jest.mock('../utils', () => {
 beforeEach(jest.resetAllMocks)
 afterAll(jest.restoreAllMocks)
 
-const dataTestIds = {
-  toggleButton: 'toggle-button-id',
-  menu: 'menu-id',
-  item: index => `item-id-${index}`,
-}
-
-const renderUseSelect = props => {
+export function renderUseSelect(props) {
   return renderHook(() => useSelect({items, ...props}))
 }
-
-const renderSelect = (props, uiCallback) => {
+export function renderSelect(props, uiCallback) {
   const renderSpy = jest.fn()
   const ui = <DropdownSelect renderSpy={renderSpy} {...props} />
   const utils = render(uiCallback ? uiCallback(ui) : ui)
   const rerender = p =>
     utils.rerender(<DropdownSelect renderSpy={renderSpy} {...p} />)
-  const label = screen.getByText(/choose an element/i)
-  const menu = screen.getByRole('listbox')
-  const toggleButton = screen.getByTestId(dataTestIds.toggleButton)
-  const getItemAtIndex = index => screen.getByTestId(dataTestIds.item(index))
-  const getItems = () => screen.queryAllByRole('option')
-  const clickOnItemAtIndex = index => {
-    fireEvent.click(getItemAtIndex(index))
-  }
-  const clickOnToggleButton = () => {
-    fireEvent.click(toggleButton)
-  }
-  const mouseMoveItemAtIndex = index => {
-    fireEvent.mouseMove(getItemAtIndex(index))
-  }
-  const keyDownOnToggleButton = (key, options = {}) => {
-    fireEvent.keyDown(toggleButton, {key, ...options})
-  }
-  const keyDownOnMenu = (key, options = {}) => {
-    fireEvent.keyDown(menu, {key, ...options})
-  }
-  const blurMenu = () => {
-    fireEvent.blur(menu)
-  }
-  const getA11yStatusContainer = () => screen.queryByRole('status')
-  const mouseLeaveMenu = () => {
-    userEvent.unhover(menu)
-  }
-  const tab = (shiftKey = false) => {
-    userEvent.tab({shift: shiftKey})
-  }
 
   return {
     ...utils,
     renderSpy,
     rerender,
-    label,
-    menu,
-    toggleButton,
-    getItemAtIndex,
-    clickOnItemAtIndex,
-    mouseMoveItemAtIndex,
-    getItems,
-    keyDownOnToggleButton,
-    clickOnToggleButton,
-    blurMenu,
-    getA11yStatusContainer,
-    mouseLeaveMenu,
-    keyDownOnMenu,
-    tab,
   }
 }
 
-const DropdownSelect = ({renderSpy, renderItem, ...props}) => {
+export function DropdownSelect({renderSpy, renderItem, ...props}) {
   const {
     isOpen,
     selectedItem,
@@ -105,7 +65,7 @@ const DropdownSelect = ({renderSpy, renderItem, ...props}) => {
     getMenuProps,
     getItemProps,
   } = useSelect({items, ...props})
-  const {itemToString} = props.itemToString ? props : defaultProps
+  const itemToString = props?.itemToString ?? defaultProps.itemToString
 
   renderSpy()
 
@@ -126,7 +86,7 @@ const DropdownSelect = ({renderSpy, renderItem, ...props}) => {
             const stringItem =
               item instanceof Object ? itemToString(item) : item
             return renderItem ? (
-              renderItem({index, item, getItemProps, dataTestIds, stringItem})
+              renderItem({index, item, getItemProps, stringItem})
             ) : (
               <li
                 data-testid={dataTestIds.item(index)}
@@ -142,4 +102,210 @@ const DropdownSelect = ({renderSpy, renderItem, ...props}) => {
   )
 }
 
-export {items, renderUseSelect, renderSelect, DropdownSelect}
+/**
+ * Return the id of the item that strats with the caracter.
+ * @param {string} character The start of the item string.
+ * @param {number} startIndex The index to start searching.
+ * @returns number The index of the item.
+ */
+export function getItemIndexByCharacter(character, startIndex = 0) {
+  return (
+    items.slice(startIndex).findIndex(item => {
+      // console.log(item.toLowerCase(), character.toLowerCase(), item.toLowerCase().startsWith(character.toLowerCase()))
+
+      return item.toLowerCase().startsWith(character.toLowerCase())
+    }) + startIndex
+  )
+}
+
+export const stateChangeTestCases = [
+  {
+    step: keyDownOnToggleButton,
+    arg: '{ArrowDown}',
+    state: {
+      isOpen: true,
+      highlightedIndex: 0,
+      inputValue: '',
+      selectedItem: null,
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{Enter}',
+    state: {
+      isOpen: false,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[0],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownEnter,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{End}',
+    state: {
+      isOpen: true,
+      highlightedIndex: items.length - 1,
+      inputValue: '',
+      selectedItem: items[0],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownEnd,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: ' ',
+    state: {
+      isOpen: false,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownSpaceButton,
+  },
+  {
+    step: clickOnToggleButton,
+    state: {
+      isOpen: true,
+      highlightedIndex: items.length - 1,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ToggleButtonClick,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{PageUp}',
+    state: {
+      isOpen: true,
+      highlightedIndex: items.length - 11,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownPageUp,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{PageDown}',
+    state: {
+      isOpen: true,
+      highlightedIndex: items.length - 1,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownPageDown,
+  },
+  {
+    step: mouseMoveItemAtIndex,
+    arg: items.length - 2,
+    state: {
+      isOpen: true,
+      highlightedIndex: items.length - 2,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ItemMouseMove,
+  },
+  {
+    step: mouseLeaveItemAtIndex,
+    arg: items.length - 2,
+    state: {
+      isOpen: true,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.MenuMouseLeave,
+  },
+  {
+    step: mouseMoveItemAtIndex,
+    arg: 2,
+    state: {
+      isOpen: true,
+      highlightedIndex: 2,
+      inputValue: '',
+      selectedItem: items[items.length - 1],
+    },
+    type: stateChangeTypes.ItemMouseMove,
+  },
+  {
+    step: clickOnItemAtIndex,
+    arg: 2,
+    state: {
+      isOpen: false,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[2],
+    },
+    type: stateChangeTypes.ItemClick,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{Alt>}{ArrowDown}{/Alt}',
+    state: {
+      isOpen: true,
+      highlightedIndex: 2,
+      inputValue: '',
+      selectedItem: items[2],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{Alt>}{ArrowDown}{/Alt}',
+    state: {
+      isOpen: true,
+      highlightedIndex: 3,
+      inputValue: '',
+      selectedItem: items[2],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: '{Alt>}{ArrowUp}{/Alt}',
+    state: {
+      isOpen: false,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[3],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownArrowUp,
+  },
+  {
+    step: keyDownOnToggleButton,
+    arg: 'c',
+    state: {
+      isOpen: true,
+      highlightedIndex: 5,
+      inputValue: 'c',
+      selectedItem: items[3],
+    },
+    type: stateChangeTypes.ToggleButtonKeyDownCharacter,
+  },
+  {
+    step: () =>
+      // just to have all steps async.
+      new Promise(resolve => {
+        act(() => jest.runAllTimers())
+        resolve()
+      }),
+    state: {
+      isOpen: true,
+      highlightedIndex: 5,
+      inputValue: '',
+      selectedItem: items[3],
+    },
+    type: stateChangeTypes.FunctionSetInputValue,
+  },
+  {
+    step: tab,
+    state: {
+      isOpen: false,
+      highlightedIndex: -1,
+      inputValue: '',
+      selectedItem: items[5],
+    },
+    type: stateChangeTypes.ToggleButtonBlur,
+  },
+]
diff --git a/src/hooks/useSelect/utils.ts b/src/hooks/useSelect/utils.ts
index 937334a2c..865d56fbf 100644
--- a/src/hooks/useSelect/utils.ts
+++ b/src/hooks/useSelect/utils.ts
@@ -39,7 +39,6 @@ const propTypes = {
   itemToString: PropTypes.func,
   getA11yStatusMessage: PropTypes.func,
   getA11ySelectionMessage: PropTypes.func,
-  circularNavigation: PropTypes.bool,
   highlightedIndex: PropTypes.number,
   defaultHighlightedIndex: PropTypes.number,
   initialHighlightedIndex: PropTypes.number,
diff --git a/src/hooks/utils.js b/src/hooks/utils.js
index aa9e2c85a..dbef42e6c 100644
--- a/src/hooks/utils.js
+++ b/src/hooks/utils.js
@@ -8,13 +8,12 @@ import {
 import {isReactNative} from '../is.macro'
 import {
   scrollIntoView,
-  getNextWrappingIndex,
   getState,
   generateId,
   debounce,
-  targetWithinDownshift,
   validateControlledUnchanged,
   noop,
+  targetWithinDownshift,
 } from '../utils'
 import setStatus from '../set-a11y-status'
 
@@ -214,7 +213,6 @@ const defaultProps = {
   stateReducer,
   getA11ySelectionMessage,
   scrollIntoView,
-  circularNavigation: false,
   environment:
     /* istanbul ignore next (ssr) */
     typeof window === 'undefined' ? {} : window,
@@ -271,7 +269,7 @@ function getInitialState(props) {
   }
 }
 
-function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
+function getHighlightedIndexOnOpen(props, state, offset) {
   const {items, initialHighlightedIndex, defaultHighlightedIndex} = props
   const {selectedItem, highlightedIndex} = state
 
@@ -290,16 +288,7 @@ function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
     return defaultHighlightedIndex
   }
   if (selectedItem) {
-    if (offset === 0) {
-      return items.indexOf(selectedItem)
-    }
-    return getNextWrappingIndex(
-      offset,
-      items.indexOf(selectedItem),
-      items.length,
-      getItemNodeFromIndex,
-      false,
-    )
+    return items.indexOf(selectedItem)
   }
   if (offset === 0) {
     return -1
@@ -316,7 +305,7 @@ function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
  * @param {Function} handleBlur Handler on blur from mouse or touch.
  * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
  */
-function useMouseAndTouchTracker(
+ function useMouseAndTouchTracker(
   isOpen,
   downshiftElementRefs,
   environment,
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 6c334ccb1..57195a90f 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -170,7 +170,7 @@ export interface Actions<Item> {
     cb?: Callback,
   ) => void
   selectItem: (
-    item: Item,
+    item: Item | null,
     otherStateToSet?: Partial<StateChangeOptions<Item>>,
     cb?: Callback,
   ) => void
@@ -242,22 +242,21 @@ export interface UseSelectState<Item> {
 }
 
 export enum UseSelectStateChangeTypes {
-  MenuKeyDownArrowDown = '__menu_keydown_arrow_down__',
-  MenuKeyDownArrowUp = '__menu_keydown_arrow_up__',
-  MenuKeyDownEscape = '__menu_keydown_escape__',
-  MenuKeyDownHome = '__menu_keydown_home__',
-  MenuKeyDownEnd = '__menu_keydown_end__',
-  MenuKeyDownEnter = '__menu_keydown_enter__',
-  MenuKeyDownSpaceButton = '__menu_keydown_space_button__',
-  MenuKeyDownCharacter = '__menu_keydown_character__',
-  MenuBlur = '__menu_blur__',
+  ToggleButtonClick = '__togglebutton_click__',
+  ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__',
+  ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__',
+  ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__',
+  ToggleButtonKeyDownEscape = '__togglebutton_keydown_escape__',
+  ToggleButtonKeyDownHome = '__togglebutton_keydown_home__',
+  ToggleButtonKeyDownEnd = '__togglebutton_keydown_end__',
+  ToggleButtonKeyDownEnter = '__togglebutton_keydown_enter__',
+  ToggleButtonKeyDownSpaceButton = '__togglebutton_keydown_space_button__',
+  ToggleButtonKeyDownPageUp = '__togglebutton_keydown_page_up__',
+  ToggleButtonKeyDownPageDown = '__togglebutton_keydown_page_down__',
+  ToggleButtonBlur = '__togglebutton_blur__',
   MenuMouseLeave = '__menu_mouse_leave__',
   ItemMouseMove = '__item_mouse_move__',
   ItemClick = '__item_click__',
-  ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__',
-  ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__',
-  ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__',
-  ToggleButtonClick = '__togglebutton_click__',
   FunctionToggleMenu = '__function_toggle_menu__',
   FunctionOpenMenu = '__function_open_menu__',
   FunctionCloseMenu = '__function_close_menu__',
@@ -272,7 +271,6 @@ export interface UseSelectProps<Item> {
   itemToString?: (item: Item | null) => string
   getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
   getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
-  circularNavigation?: boolean
   highlightedIndex?: number
   initialHighlightedIndex?: number
   defaultHighlightedIndex?: number
@@ -307,7 +305,7 @@ export interface UseSelectStateChangeOptions<Item>
 export interface UseSelectDispatchAction<Item> {
   type: UseSelectStateChangeTypes
   getItemNodeFromIndex?: (index: number) => HTMLElement
-  shiftKey?: boolean
+  altKey?: boolean
   key?: string
   index?: number
   highlightedIndex?: number
@@ -352,7 +350,7 @@ export interface UseSelectActions<Item> {
   openMenu: () => void
   closeMenu: () => void
   toggleMenu: () => void
-  selectItem: (item: Item) => void
+  selectItem: (item: Item | null) => void
   setHighlightedIndex: (index: number) => void
 }
 
@@ -363,22 +361,21 @@ export type UseSelectReturnValue<Item> = UseSelectState<Item> &
 export interface UseSelectInterface {
   <Item>(props: UseSelectProps<Item>): UseSelectReturnValue<Item>
   stateChangeTypes: {
-    MenuKeyDownArrowDown: UseSelectStateChangeTypes.MenuKeyDownArrowDown
-    MenuKeyDownArrowUp: UseSelectStateChangeTypes.MenuKeyDownArrowUp
-    MenuKeyDownEscape: UseSelectStateChangeTypes.MenuKeyDownEscape
-    MenuKeyDownHome: UseSelectStateChangeTypes.MenuKeyDownHome
-    MenuKeyDownEnd: UseSelectStateChangeTypes.MenuKeyDownEnd
-    MenuKeyDownEnter: UseSelectStateChangeTypes.MenuKeyDownEnter
-    MenuKeyDownSpaceButton: UseSelectStateChangeTypes.MenuKeyDownSpaceButton
-    MenuKeyDownCharacter: UseSelectStateChangeTypes.MenuKeyDownCharacter
-    MenuBlur: UseSelectStateChangeTypes.MenuBlur
-    MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave
-    ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove
-    ItemClick: UseSelectStateChangeTypes.ItemClick
     ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick
-    ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter
     ToggleButtonKeyDownArrowDown: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowDown
     ToggleButtonKeyDownArrowUp: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowUp
+    ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter
+    ToggleButtonKeyDownEscape: UseSelectStateChangeTypes.ToggleButtonKeyDownEscape
+    ToggleButtonKeyDownHome: UseSelectStateChangeTypes.ToggleButtonKeyDownHome
+    ToggleButtonKeyDownEnd: UseSelectStateChangeTypes.ToggleButtonKeyDownEnd
+    ToggleButtonKeyDownEnter: UseSelectStateChangeTypes.ToggleButtonKeyDownEnter
+    ToggleButtonKeyDownSpaceButton: UseSelectStateChangeTypes.ToggleButtonKeyDownSpaceButton
+    ToggleButtonKeyDownPageUp: UseSelectStateChangeTypes.ToggleButtonKeyDownPageUp
+    ToggleButtonKeyDownPageDown: UseSelectStateChangeTypes.ToggleButtonKeyDownPageDown
+    ToggleButtonBlur: UseSelectStateChangeTypes.ToggleButtonBlur
+    MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave
+    ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove
+    ItemClick: UseSelectStateChangeTypes.ItemClick
     FunctionToggleMenu: UseSelectStateChangeTypes.FunctionToggleMenu
     FunctionOpenMenu: UseSelectStateChangeTypes.FunctionOpenMenu
     FunctionCloseMenu: UseSelectStateChangeTypes.FunctionCloseMenu
@@ -406,9 +403,12 @@ export enum UseComboboxStateChangeTypes {
   InputKeyDownEscape = '__input_keydown_escape__',
   InputKeyDownHome = '__input_keydown_home__',
   InputKeyDownEnd = '__input_keydown_end__',
+  InputKeyDownPageUp = '__input_keydown_page_up__',
+  InputKeyDownPageDown = '__input_keydown_page_down__',
   InputKeyDownEnter = '__input_keydown_enter__',
   InputChange = '__input_change__',
   InputBlur = '__input_blur__',
+  InputFocus = '__input_focus__',
   MenuMouseLeave = '__menu_mouse_leave__',
   ItemMouseMove = '__item_mouse_move__',
   ItemClick = '__item_click__',
@@ -428,7 +428,6 @@ export interface UseComboboxProps<Item> {
   itemToString?: (item: Item | null) => string
   getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
   getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
-  circularNavigation?: boolean
   highlightedIndex?: number
   initialHighlightedIndex?: number
   defaultHighlightedIndex?: number
@@ -467,7 +466,7 @@ export interface UseComboboxStateChangeOptions<Item>
 
 export interface UseComboboxDispatchAction<Item> {
   type: UseComboboxStateChangeTypes
-  shiftKey?: boolean
+  altKey?: boolean
   getItemNodeFromIndex?: (index: number) => HTMLElement
   inputValue?: string
   index?: number
@@ -499,9 +498,6 @@ export interface UseComboboxGetInputPropsOptions
   extends GetInputPropsOptions,
     GetPropsWithRefKey {}
 
-export interface UseComboboxGetComboboxPropsOptions
-  extends React.HTMLProps<HTMLDivElement> {}
-
 export interface UseComboboxPropGetters<Item> {
   getToggleButtonProps: (
     options?: UseComboboxGetToggleButtonPropsOptions,
@@ -516,10 +512,6 @@ export interface UseComboboxPropGetters<Item> {
     options?: UseComboboxGetInputPropsOptions,
     otherOptions?: GetPropsCommonOptions,
   ) => any
-  getComboboxProps: (
-    options?: UseComboboxGetComboboxPropsOptions,
-    otherOptions?: GetPropsCommonOptions,
-  ) => any
 }
 
 export interface UseComboboxActions<Item> {
@@ -527,7 +519,7 @@ export interface UseComboboxActions<Item> {
   openMenu: () => void
   closeMenu: () => void
   toggleMenu: () => void
-  selectItem: (item: Item) => void
+  selectItem: (item: Item | null) => void
   setHighlightedIndex: (index: number) => void
   setInputValue: (inputValue: string) => void
 }
@@ -544,9 +536,12 @@ export interface UseComboboxInterface {
     InputKeyDownEscape: UseComboboxStateChangeTypes.InputKeyDownEscape
     InputKeyDownHome: UseComboboxStateChangeTypes.InputKeyDownHome
     InputKeyDownEnd: UseComboboxStateChangeTypes.InputKeyDownEnd
+    InputKeyDownPageDown: UseComboboxStateChangeTypes.InputKeyDownPageDown
+    InputKeyDownPageUp: UseComboboxStateChangeTypes.InputKeyDownPageUp
     InputKeyDownEnter: UseComboboxStateChangeTypes.InputKeyDownEnter
     InputChange: UseComboboxStateChangeTypes.InputChange
     InputBlur: UseComboboxStateChangeTypes.InputBlur
+    InputFocus: UseComboboxStateChangeTypes.InputFocus
     MenuMouseLeave: UseComboboxStateChangeTypes.MenuMouseLeave
     ItemMouseMove: UseComboboxStateChangeTypes.ItemMouseMove
     ItemClick: UseComboboxStateChangeTypes.ItemClick
@@ -677,11 +672,10 @@ export interface UseMultipleSelectionActions<Item> {
   setActiveIndex: (index: number) => void
 }
 
-export type UseMultipleSelectionReturnValue<Item> = UseMultipleSelectionState<
-  Item
-> &
-  UseMultipleSelectionPropGetters<Item> &
-  UseMultipleSelectionActions<Item>
+export type UseMultipleSelectionReturnValue<Item> =
+  UseMultipleSelectionState<Item> &
+    UseMultipleSelectionPropGetters<Item> &
+    UseMultipleSelectionActions<Item>
 
 export interface UseMultipleSelectionInterface {
   <Item>(