fix(click): click no longer blurs when focus changes during onClick e…

…vent (#208)
testing-library · Jan 23, 2020 · 4bcab8c · 4bcab8c
1 parent df282f9
commit 4bcab8c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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 = {}) {