From c03f6d94755a3a5e6768055c203f1e808e47d170 Mon Sep 17 00:00:00 2001
From: "david.kroek" <david.kroek@gbst.com>
Date: Wed, 5 Apr 2023 10:37:02 +1000
Subject: [PATCH 1/2] fire focusIn to better interop with userEvent

---
 package.json                        |  1 +
 src/__tests__/select-event.test.tsx | 23 +++++++++++++++++++++++
 src/index.ts                        |  1 +
 3 files changed, 25 insertions(+)

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..7f32366 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,28 @@ describe("The openMenu event helper", () => {
     await selectEvent.select(input, "Strawberry");
     expect(form).toHaveFormValues({ food: "strawberry" });
   });
+
+    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", () => {
diff --git a/src/index.ts b/src/index.ts
index 5a91cca..e6408e8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
  */
 export const openMenu = (input: HTMLElement) => {
+  fireEvent.focusIn(input);
   fireEvent.focus(input);
   fireEvent.keyDown(input, {
     key: "ArrowDown",

From 8e554dee984c049c014c3f8583ebef7c6901e1cf Mon Sep 17 00:00:00 2001
From: "david.kroek" <david.kroek@gbst.com>
Date: Wed, 5 Apr 2023 10:43:47 +1000
Subject: [PATCH 2/2] use input.focus() to allow firing onFocus

---
 src/__tests__/select-event.test.tsx | 9 ++++++++-
 src/index.ts                        | 3 +--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx
index 7f32366..9c3f635 100644
--- a/src/__tests__/select-event.test.tsx
+++ b/src/__tests__/select-event.test.tsx
@@ -79,7 +79,14 @@ describe("The openMenu event helper", () => {
     expect(form).toHaveFormValues({ food: "strawberry" });
   });
 
-    it("allows closing by clicking elsewhere", async () => {
+  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();
diff --git a/src/index.ts b/src/index.ts
index e6408e8..8cceccd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,8 +21,7 @@ function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
  * @param {HTMLElement} input The input field (eg. `getByLabelText('The label')`)
  */
 export const openMenu = (input: HTMLElement) => {
-  fireEvent.focusIn(input);
-  fireEvent.focus(input);
+  input.focus();
   fireEvent.keyDown(input, {
     key: "ArrowDown",
     keyCode: 40,