fix: prevent click event on non-focusable control (#1130)

Author: a0js

CONTRIBUTING.md

@@ -48,7 +48,7 @@ Also, please watch the repo and respond to questions/bug reports/feature
 requests! Thanks!
 
 <!-- prettier-ignore-start -->
-[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
+[egghead]: https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github
 [all-contributors]: https://github.com/all-contributors/all-contributors
 [issues]: https://github.com/testing-library/user-event/issues
 <!-- prettier-ignore-end -->

src/event/behavior/click.ts

@@ -9,8 +9,8 @@ behavior.click = (event, target, instance) => {
     return () => {
       if (isFocusable(control)) {
         focusElement(control)
+        instance.dispatchEvent(control, cloneEvent(event))
       }
-      instance.dispatchEvent(control, cloneEvent(event))
     }
   } else if (isElementType(target, 'input', {type: 'file'})) {
     return () => {

tests/pointer/click.ts

@@ -235,6 +235,24 @@ describe('label', () => {
 
     expect(getEvents('click')).toHaveLength(2)
   })
+
+  test('do not click associated non-focusable control per label', async () => {
+    const {element, getEvents, user} = setup(
+      `<label for="in">foo</label><input disabled id="in"/>`,
+    )
+
+    await user.pointer({keys: '[MouseLeft]', target: element})
+
+    expect(getEvents('click')).toHaveLength(1)
+  })
+
+  test('do not click nested non-focusable control per label', async () => {
+    const {element, getEvents, user} = setup(`<label><input disabled/></label>`)
+
+    await user.pointer({keys: '[MouseLeft]', target: element})
+
+    expect(getEvents('click')).toHaveLength(1)
+  })
 })
 
 describe('check/uncheck control per click', () => {
@@ -282,6 +300,19 @@ describe('check/uncheck control per click', () => {
 
     expect(input).not.toBeChecked()
   })
+
+  test('clicking label does not change non-focusable checkable input', async () => {
+    const {
+      elements: [input, label],
+      user,
+    } = setup(`<input type="checkbox" disabled id="a"/><label for="a"></label>`)
+
+    expect(input).not.toBeChecked()
+
+    await user.pointer({keys: '[MouseLeft]', target: label})
+
+    expect(input).not.toBeChecked()
+  })
 })
 
 describe('submit form per click', () => {