From 4bcab8c18d6f20c742821ce325cd753089c7ee94 Mon Sep 17 00:00:00 2001
From: Jeff McRiffey <jmcriffey@users.noreply.github.com>
Date: Wed, 22 Jan 2020 23:55:12 -0500
Subject: [PATCH] fix(click): click no longer blurs when focus changes during
 onClick event (#208)

---
 __tests__/react/click.js | 26 ++++++++++++++++++++++++++
 src/index.js             | 15 ++++++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/__tests__/react/click.js b/__tests__/react/click.js
index 7d8d6d51..a7a7edf9 100644
--- a/__tests__/react/click.js
+++ b/__tests__/react/click.js
@@ -198,6 +198,32 @@ describe("userEvent.click", () => {
     expect(b).toHaveFocus();
   });
 
+  it("does not lose focus when click updates focus", () => {
+    const FocusComponent = () => {
+      const inputRef = React.useRef();
+      const focusInput = () => inputRef.current.focus();
+
+      return (
+        <React.Fragment>
+          <input data-testid="input" ref={inputRef} />
+          <button onClick={focusInput}>Update Focus</button>
+        </React.Fragment>
+      );
+    };
+    const { getByTestId, getByText } = render(<FocusComponent />);
+
+    const input = getByTestId("input");
+    const button = getByText("Update Focus");
+
+    expect(input).not.toHaveFocus();
+
+    userEvent.click(button);
+    expect(input).toHaveFocus();
+
+    userEvent.click(button);
+    expect(input).toHaveFocus();
+  });
+
   it.each(["input", "textarea"])(
     "gives focus to <%s> when clicking a <label> with htmlFor",
     type => {
diff --git a/src/index.js b/src/index.js
index ba53d28c..487bd347 100644
--- a/src/index.js
+++ b/src/index.js
@@ -99,6 +99,15 @@ function fireChangeEvent(event) {
   event.target.removeEventListener("blur", fireChangeEvent);
 }
 
+function blurFocusedElement(element, focusedElement, wasAnotherElementFocused) {
+  if (
+    wasAnotherElementFocused &&
+    element.ownerDocument.activeElement === element
+  ) {
+    focusedElement.blur();
+  }
+}
+
 const userEvent = {
   click(element) {
     const focusedElement = element.ownerDocument.activeElement;
@@ -123,7 +132,7 @@ const userEvent = {
         clickElement(element);
     }
 
-    wasAnotherElementFocused && focusedElement.blur();
+    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
 
   dblClick(element) {
@@ -145,7 +154,7 @@ const userEvent = {
         dblClickElement(element);
     }
 
-    wasAnotherElementFocused && focusedElement.blur();
+    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
 
   selectOptions(element, values) {
@@ -172,7 +181,7 @@ const userEvent = {
       }
     }
 
-    wasAnotherElementFocused && focusedElement.blur();
+    blurFocusedElement(element, focusedElement, wasAnotherElementFocused);
   },
 
   async type(element, text, userOpts = {}) {