diff --git a/package.json b/package.json
index 28d28f2..658f6c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-accessible-dropdown-menu-hook",
- "version": "3.2.0",
+ "version": "4.0.0",
"description": "A simple Hook for creating fully accessible dropdown menus in React",
"main": "dist/use-dropdown-menu.js",
"types": "dist/use-dropdown-menu.d.ts",
diff --git a/src/use-dropdown-menu.test.tsx b/src/use-dropdown-menu.test.tsx
index 02bf7c5..19aaee7 100644
--- a/src/use-dropdown-menu.test.tsx
+++ b/src/use-dropdown-menu.test.tsx
@@ -95,16 +95,16 @@ it('Moves the focus to the first menu item after pressing space while focused on
expect(screen.getByText('1 Item')).toHaveFocus();
});
-it('Moves the focus to the first menu item after clicking the menu to open it', async () => {
- const { user } = setup();
+it('Moves the focus to the first menu item after clicking the menu to open it, if `focusFirstItemOnClick` is specified', async () => {
+ const { user } = setup();
await user.click(screen.getByText('Primary'));
expect(screen.getByText('1 Item')).toHaveFocus();
});
-it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => {
- const { user } = setup();
+it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button', async () => {
+ const { user } = setup();
await user.click(screen.getByText('Primary'));
@@ -115,8 +115,8 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
expect(screen.getByText('1 Item')).toHaveFocus();
});
-it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => {
- const { user } = setup();
+it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button', async () => {
+ const { user } = setup();
await user.click(screen.getByText('Primary'));
@@ -308,6 +308,8 @@ it('Can navigate to a dynamically-added item', async () => {
await user.click(screen.getByText('Primary'));
+ await user.keyboard('{ArrowDown}');
+
for (let i = 0; i < 4; i += 1) {
await user.keyboard('{ArrowDown}');
}
diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts
index 3f1b409..31c0281 100644
--- a/src/use-dropdown-menu.ts
+++ b/src/use-dropdown-menu.ts
@@ -12,7 +12,7 @@ interface ButtonProps
// A custom Hook that abstracts away the listeners/controls for dropdown menus
export interface DropdownMenuOptions {
- disableFocusFirstItemOnClick?: boolean;
+ focusFirstItemOnClick?: boolean;
}
interface DropdownMenuResponse {
@@ -64,7 +64,7 @@ export default function useDropdownMenu {
await expect(page.title()).resolves.toMatch('Browser');
});
-it('Focuses the first menu item when menu button is clicked', async () => {
+it('Maintains focus when menu button is clicked', async () => {
await page.click('#menu-button');
await menuOpen();
- expect(await currentFocusID()).toBe('menu-item-1');
+ expect(await currentFocusID()).toBe('menu-button');
});
it('Focuses on the menu button after pressing escape', async () => {
diff --git a/website/docs/design/options.md b/website/docs/design/options.md
index 1dea6c8..ce37911 100644
--- a/website/docs/design/options.md
+++ b/website/docs/design/options.md
@@ -6,14 +6,14 @@ You can customize the behavior with options, passed as the second argument.
Option | Default | Possible values
:--- | :--- | :---
-`disableFocusFirstItemOnClick` | `false` | `boolean`
+`focusFirstItemOnClick` | `false` | `boolean`
Option | Explanation
:--- | :---
-`disableFocusFirstItemOnClick` | If specified as `true` the default behavior of focusing the first menu item on click will be disabled. The menu button will instead retain focus.
+`focusFirstItemOnClick` | If specified as `true`, the first menu item will be focused when the menu is opened via a click (in addition to via a keyboard interaction).
```js
useDropdownMenu(numberOfItems, {
- disableFocusFirstItemOnClick: true,
+ focusFirstItemOnClick: true,
});
```
\ No newline at end of file