fix: userEvent.click() ignores hidden elements (testing-library#1145)

Author: sethbarton

.gitignore

@@ -7,3 +7,6 @@ dist
 # when working with contributors
 package-lock.json
 yarn.lock
+
+# don't commit JetBrains IDE configs
+.idea

src/convenience/click.ts

@@ -1,7 +1,10 @@
 import {type PointerInput} from '../pointer'
 import {type Instance} from '../setup'
+import {CLICKABLE_SELECTOR} from '../utils/click/selector'
 
 export async function click(this: Instance, element: Element): Promise<void> {
+  if (!isClickableElement(element)) return
+
   const pointerIn: PointerInput = []
   if (!this.config.skipHover) {
     pointerIn.push({target: element})
@@ -15,12 +18,18 @@ export async function dblClick(
   this: Instance,
   element: Element,
 ): Promise<void> {
+  if (!isClickableElement(element)) return
   return this.pointer([{target: element}, '[MouseLeft][MouseLeft]'])
 }
 
 export async function tripleClick(
   this: Instance,
   element: Element,
 ): Promise<void> {
+  if (!isClickableElement(element)) return
   return this.pointer([{target: element}, '[MouseLeft][MouseLeft][MouseLeft]'])
 }
+
+export function isClickableElement(element: Element) {
+  return element.matches(CLICKABLE_SELECTOR)
+}

src/utils/click/selector.ts

@@ -0,0 +1 @@
+export const CLICKABLE_SELECTOR = ['*:not([style*="hidden"])'].join(', ')

tests/convenience/click.ts

@@ -38,6 +38,23 @@ describe.each([
     expect(getEvents('click')).toHaveLength(clickCount)
   })
 
+  test('can not click hidden elements', async () => {
+    const {element, getEvents, user} = setup(
+      ` <button
+      style="visibility: hidden"
+    >
+      Click me!
+    </button>`,
+      {
+        pointerEventsCheck: PointerEventsCheckLevel.Never,
+      },
+    )
+
+    await user[method](element)
+
+    expect(getEvents('click')).toHaveLength(0)
+  })
+
   if (method === 'click') {
     test('skip hover', async () => {
       const {element, getEvents, user} = setup(`<div></div>`, {