openMenu focus correctly on React 17+

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",

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(<Select {...defaultProps} onFocus={focusCallback} />);
+    selectEvent.openMenu(input);
+    expect(focusCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("allows closing by clicking elsewhere", async () => {
+    const { input, getByText, queryByText } = renderForm(<Select {...defaultProps} />);
+    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(<Select {...defaultProps} onBlur={blurCallback} />);
+    selectEvent.openMenu(input);
+    await userEvent.click(document.body);
+    expect(blurCallback).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("The select event helpers", () => {

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,