@wordpress/components 24.0.0 → 25.0.0

package/src/dropdown-menu-v2/test/index.tsx

@@ -0,0 +1,816 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+	default as userEvent,
+	PointerEventsCheckLevel,
+} from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownSubMenu,
+	DropdownSubMenuTrigger,
+} from '..';
+
+const delay = ( delayInMs: number ) => {
+	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
+};
+
+describe( 'DropdownMenu', () => {
+	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+	it( 'should follow the WAI-ARIA spec', async () => {
+		// Radio and Checkbox items'
+		const user = userEvent.setup();
+
+		render(
+			<DropdownMenu trigger={ <button>Open dropdown</button> }>
+				<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownSubMenu
+					trigger={
+						<DropdownSubMenuTrigger>
+							Dropdown submenu
+						</DropdownSubMenuTrigger>
+					}
+				>
+					<DropdownMenuItem>Dropdown submenu item 1</DropdownMenuItem>
+					<DropdownMenuItem>Dropdown submenu item 2</DropdownMenuItem>
+				</DropdownSubMenu>
+			</DropdownMenu>
+		);
+
+		const toggleButton = screen.getByRole( 'button', {
+			name: 'Open dropdown',
+		} );
+
+		expect( toggleButton ).toHaveAttribute( 'aria-haspopup', 'menu' );
+		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		await user.click( toggleButton );
+
+		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
+			'aria-orientation',
+			'horizontal'
+		);
+		expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 2 );
+
+		const submenuTrigger = screen.getByRole( 'menuitem', {
+			name: 'Dropdown submenu',
+		} );
+		expect( submenuTrigger ).toHaveAttribute( 'aria-haspopup', 'menu' );
+		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		await user.hover( submenuTrigger );
+
+		// Wait for the open animation after hovering
+		await waitFor( () =>
+			expect( screen.getAllByRole( 'menu' ) ).toHaveLength( 2 )
+		);
+
+		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'true' );
+		expect( submenuTrigger ).toHaveAttribute(
+			'aria-controls',
+			screen.getAllByRole( 'menu' )[ 1 ].id
+		);
+	} );
+
+	describe( 'pointer and keyboard interactions', () => {
+		it( 'should open when clicking the trigger', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// DropdownMenu closed, the content is not displayed
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+			// Click to open the menu
+			await user.click( toggleButton );
+
+			// DropdownMenu open, the content is displayed
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'menuitem' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should open when pressing the arrow down key on the trigger', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// Move focus on the toggle
+			await user.keyboard( '{Tab}' );
+
+			expect( toggleButton ).toHaveFocus();
+
+			// DropdownMenu closed, the content is not displayed
+			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '{ArrowDown}' );
+
+			// DropdownMenu open, the content is displayed
+			expect( screen.getByRole( 'menuitem' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should close when pressing the escape key', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// The menu is focused automatically when `defaultOpen` is set.
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Pressing esc will close the menu and move focus to the toggle
+			await user.keyboard( '{Escape}' );
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should close when clicking outside of the content', async () => {
+			const user = userEvent.setup( {
+				// Disabling this check otherwise testing-library would complain
+				// when clicking on document.body to close the dropdown menu.
+				pointerEventsCheck: PointerEventsCheckLevel.Never,
+			} );
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Click on the body (ie. outside of the dropdown menu)
+			await user.click( document.body );
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should close when clicking on a menu item', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Clicking a menu item will close the menu
+			await user.click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not close when clicking on a disabled menu item', async () => {
+			const user = userEvent.setup( {
+				// Disabling this check otherwise testing-library would complain
+				// when clicking on a disabled element with pointer-events: none
+				pointerEventsCheck: PointerEventsCheckLevel.Never,
+			} );
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem disabled>
+						Dropdown menu item
+					</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Clicking a disabled menu item won't close the menu
+			await user.click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
+					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
+					<DropdownSubMenu
+						trigger={
+							<DropdownSubMenuTrigger>
+								Dropdown submenu
+							</DropdownSubMenuTrigger>
+						}
+					>
+						<DropdownMenuItem>
+							Dropdown submenu item 1
+						</DropdownMenuItem>
+						<DropdownMenuItem>
+							Dropdown submenu item 2
+						</DropdownMenuItem>
+					</DropdownSubMenu>
+					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// Before hover, submenu items are not rendered
+			expect(
+				screen.queryByRole( 'menuitem', {
+					name: 'Dropdown submenu item 1',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.hover(
+				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+			);
+
+			// After hover, submenu items are rendered
+			// Reason for `findByRole`: due to the animation, we've got to wait
+			// a short amount of time for the submenu to appear
+			await screen.findByRole( 'menuitem', {
+				name: 'Dropdown submenu item 1',
+			} );
+		} );
+
+		it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
+					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
+					<DropdownSubMenu
+						trigger={
+							<DropdownSubMenuTrigger>
+								Dropdown submenu
+							</DropdownSubMenuTrigger>
+						}
+					>
+						<DropdownMenuItem>
+							Dropdown submenu item 1
+						</DropdownMenuItem>
+						<DropdownMenuItem>
+							Dropdown submenu item 2
+						</DropdownMenuItem>
+					</DropdownSubMenu>
+					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// The menu is focused automatically when `defaultOpen` is set.
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Arrow up/down selects menu items
+			// The selection wraps around from last to first and viceversa
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 2' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowUp}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowUp}' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
+			).toHaveFocus();
+
+			// Arrow right/left can be used to enter/leave submenus
+			await user.keyboard( '{ArrowRight}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu item 2',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu',
+				} )
+			).toHaveFocus();
+
+			// Spacebar or enter key can also be used to enter a submenu
+			await user.keyboard( '{Enter}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{Spacebar}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown submenu',
+				} )
+			).toHaveFocus();
+		} );
+
+		it( 'should check menu radio items', async () => {
+			const user = userEvent.setup();
+
+			const onRadioValueChangeSpy = jest.fn();
+
+			const ControlledRadioGroup = () => {
+				const [ radioValue, setRadioValue ] = useState< string >();
+				return (
+					<DropdownMenu trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuRadioGroup
+							value={ radioValue }
+							onValueChange={ ( value ) => {
+								onRadioValueChangeSpy( value );
+								setRadioValue( value );
+							} }
+						>
+							<DropdownMenuLabel>
+								Radio group label
+							</DropdownMenuLabel>
+							<DropdownMenuRadioItem value="radio-one">
+								Radio item one
+							</DropdownMenuRadioItem>
+							<DropdownMenuRadioItem value="radio-two">
+								Radio item two
+							</DropdownMenuRadioItem>
+						</DropdownMenuRadioGroup>
+					</DropdownMenu>
+				);
+			};
+
+			render( <ControlledRadioGroup /> );
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// No radios should be checked at this point
+			expect( screen.getAllByRole( 'menuitemradio' ) ).toHaveLength( 2 );
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click first radio item, make sure that the callback fires
+			await user.click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-one'
+			);
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Make sure that first radio is checked
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click second radio item, make sure that the callback fires
+			await user.click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-two'
+			);
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Make sure that second radio is selected
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+		} );
+
+		it( 'should check menu checkbox items', async () => {
+			const user = userEvent.setup();
+
+			const onCheckboxValueChangeSpy = jest.fn();
+
+			const ControlledRadioGroup = () => {
+				const [ itemOneChecked, setItemOneChecked ] =
+					useState< boolean >();
+				const [ itemTwoChecked, setItemTwoChecked ] =
+					useState< boolean >();
+				return (
+					<DropdownMenu trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuLabel>
+							Checkbox group label
+						</DropdownMenuLabel>
+						<DropdownMenuCheckboxItem
+							checked={ itemOneChecked }
+							onCheckedChange={ ( checked ) => {
+								setItemOneChecked( checked );
+								onCheckboxValueChangeSpy( 'item-one', checked );
+							} }
+						>
+							Checkbox item one
+						</DropdownMenuCheckboxItem>
+
+						<DropdownMenuCheckboxItem
+							checked={ itemTwoChecked }
+							onCheckedChange={ ( checked ) => {
+								setItemTwoChecked( checked );
+								onCheckboxValueChangeSpy( 'item-two', checked );
+							} }
+						>
+							Checkbox item two
+						</DropdownMenuCheckboxItem>
+					</DropdownMenu>
+				);
+			};
+
+			render( <ControlledRadioGroup /> );
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// No checkboxes should be checked at this point
+			expect( screen.getAllByRole( 'menuitemcheckbox' ) ).toHaveLength(
+				2
+			);
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+
+			// Click first checkbox item, make sure that the callback fires
+			await user.click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-one',
+				true
+			);
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Make sure that first checkbox is checked
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await user.click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				true
+			);
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Make sure that second checkbox is selected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await user.click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				false
+			);
+
+			// Open dropdown
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Make sure that second checkbox is unselected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+		} );
+	} );
+
+	describe( 'items prefix and suffix', () => {
+		it( 'should display a prefix on regular items', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem prefix={ <>Item prefix</> }>
+						Dropdown menu item
+					</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the prefix are rendered before the item's children
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Item prefix Dropdown menu item',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on regular items', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem suffix={ <>Item suffix</> }>
+						Dropdown menu item
+					</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Dropdown menu item Item suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on radio items', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuRadioGroup>
+						<DropdownMenuRadioItem
+							value="radio-one"
+							suffix="Radio suffix"
+						>
+							Radio item one
+						</DropdownMenuRadioItem>
+					</DropdownMenuRadioGroup>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitemradio', {
+					name: 'Radio item one Radio suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on checkbox items', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuCheckboxItem suffix={ 'Checkbox suffix' }>
+						Checkbox item one
+					</DropdownMenuCheckboxItem>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one Checkbox suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'typeahead', () => {
+		it( 'should highlight matching item', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem>One</DropdownMenuItem>
+					<DropdownMenuItem>Two</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Type "tw", it should match and focus the item with content "Two"
+			await user.keyboard( 'tw' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Two' } )
+			).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 1000 );
+
+			// Type "on", it should match and focus the item with content "One"
+			await user.keyboard( 'on' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should use the textValue prop if specificied', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem>One</DropdownMenuItem>
+					<DropdownMenuItem textValue="Four">Two</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			// Click to open the menu
+			await user.click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Type "tw", it should not match the item with content "Two" because it
+			// that item specifies the "textValue" prop. Therefore, the menu container
+			// retains focus.
+			await user.keyboard( 'tw' );
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 1000 );
+
+			// Type "fo", it should match and focus the item with textValue "Four"
+			await user.keyboard( 'fo' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Two' } )
+			).toHaveFocus();
+		} );
+	} );
+} );