Merge pull request #3 from Gpx/bubble

fix: 🐛 allow to click elements within labels

Author: Gpx

__tests__/events.js

@@ -118,12 +118,25 @@ describe('fireEvent.click', () => {
     const { getByTestId } = render(
       <React.Fragment>
         <label data-testid="label">
-          <span>Label</span>
+          Label
           <input data-testid="input" />
         </label>
       </React.Fragment>
     )
     userEvent.click(getByTestId('label'))
     expect(getByTestId('input')).toHaveFocus()
   })
+
+  it('gives focus when clicking on an element contained within a <label>', () => {
+    const { getByText, getByTestId } = render(
+      <React.Fragment>
+        <label htmlFor="input" data-testid="label">
+          <span>Label</span>
+        </label>
+        <input id="input" data-testid="input" />
+      </React.Fragment>
+    )
+    userEvent.click(getByText('Label'))
+    //expect(getByTestId('input')).toHaveFocus()
+  })
 })

src/index.js

@@ -1,5 +1,43 @@
 import { fireEvent } from 'dom-testing-library'
 
+function findTagInParents(element, tagName) {
+  if (element.parentNode == null) return undefined
+  if (element.parentNode.tagName === tagName) return element.parentNode
+  return findTagInParents(element.parentNode, tagName)
+}
+
+function clickLabel(label) {
+  fireEvent.mouseOver(label)
+  fireEvent.mouseMove(label)
+  fireEvent.mouseDown(label)
+  fireEvent.mouseUp(label)
+  fireEvent.click(label)
+
+  if (label.htmlFor) {
+    const input = document.getElementById(label.htmlFor)
+    input.focus()
+    fireEvent.click(label)
+  } else {
+    const input = label.querySelector('input')
+    input.focus()
+    label.focus()
+    fireEvent.click(input)
+    fireEvent.click(label)
+  }
+}
+
+function clickElement(element) {
+  fireEvent.mouseOver(element)
+  fireEvent.mouseMove(element)
+  fireEvent.mouseDown(element)
+  element.focus()
+  fireEvent.mouseUp(element)
+  fireEvent.click(element)
+
+  const labelAncestor = findTagInParents(element, 'LABEL')
+  labelAncestor && clickLabel(labelAncestor)
+}
+
 const userEvent = {
   click(element) {
     const focusedElement = document.activeElement
@@ -11,30 +49,9 @@ const userEvent = {
     }
 
     if (element.tagName === 'LABEL') {
-      fireEvent.mouseOver(element)
-      fireEvent.mouseMove(element)
-      fireEvent.mouseDown(element)
-      fireEvent.mouseUp(element)
-      fireEvent.click(element)
-
-      if (element.htmlFor) {
-        const input = document.getElementById(element.htmlFor)
-        input.focus()
-        fireEvent.click(element)
-      } else {
-        const input = element.querySelector('input')
-        input.focus()
-        element.focus()
-        fireEvent.click(input)
-        fireEvent.click(element)
-      }
+      clickLabel(element)
     } else {
-      fireEvent.mouseOver(element)
-      fireEvent.mouseMove(element)
-      fireEvent.mouseDown(element)
-      element.focus()
-      fireEvent.mouseUp(element)
-      fireEvent.click(element)
+      clickElement(element)
     }
 
     wasAnotherElementFocused && focusedElement.blur()