diff --git a/package.json b/package.json
index f6ff54a..937821d 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
"@babel/preset-typescript": "^7.3.3",
"@testing-library/jest-dom": "^5.0.1",
"@testing-library/react": "^12.1.5",
+ "@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.1.2",
"@types/react": "^17.0.47",
"@types/react-select": "^5.0.1",
diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx
index bf9d78c..9c3f635 100644
--- a/src/__tests__/select-event.test.tsx
+++ b/src/__tests__/select-event.test.tsx
@@ -1,6 +1,7 @@
import "@testing-library/jest-dom/extend-expect";
import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import React from "react";
import Select from "react-select";
@@ -77,6 +78,35 @@ describe("The openMenu event helper", () => {
await selectEvent.select(input, "Strawberry");
expect(form).toHaveFormValues({ food: "strawberry" });
});
+
+ it("fires focus event", async () => {
+ const focusCallback = jest.fn();
+ const { input } = renderForm();
+ selectEvent.openMenu(input);
+ expect(focusCallback).toHaveBeenCalledTimes(1);
+ });
+
+ it("allows closing by clicking elsewhere", async () => {
+ const { input, getByText, queryByText } = renderForm();
+ selectEvent.openMenu(input);
+ expect(getByText("Chocolate")).toBeInTheDocument();
+ expect(getByText("Vanilla")).toBeInTheDocument();
+ expect(getByText("Strawberry")).toBeInTheDocument();
+ expect(getByText("Mango")).toBeInTheDocument();
+ await userEvent.click(document.body);
+ expect(queryByText("Chocolate")).not.toBeInTheDocument();
+ expect(queryByText("Vanilla")).not.toBeInTheDocument();
+ expect(queryByText("Strawberry")).not.toBeInTheDocument();
+ expect(queryByText("Mango")).not.toBeInTheDocument();
+ });
+
+ it("allows blur event to fire when clicking elsewhere", async () => {
+ const blurCallback = jest.fn();
+ const { input } = renderForm();
+ selectEvent.openMenu(input);
+ await userEvent.click(document.body);
+ expect(blurCallback).toHaveBeenCalledTimes(1);
+ });
});
describe("The select event helpers", () => {
diff --git a/src/index.ts b/src/index.ts
index 5a91cca..8cceccd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,7 +21,7 @@ function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
* @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
*/
export const openMenu = (input: HTMLElement) => {
- fireEvent.focus(input);
+ input.focus();
fireEvent.keyDown(input, {
key: "ArrowDown",
keyCode: 40,