Fix bug where a click on a wrapped inline element would miss (#7344)

packages/driver/src/dom/coordinates.js

@@ -24,12 +24,15 @@ const getElementPositioning = ($el) => {
   // elements that span multiple lines. Which would cause us to click
   // click in the center and thus miss...
   //
+  // sometimes the first client rect has no height or width, which also causes a miss
+  // so a simple loop is used to find the first with non-zero dimensions
+  //
   // however we have a fallback to getBoundingClientRect() such as
   // when the element is hidden or detached from the DOM. getClientRects()
   // returns a zero length DOMRectList in that case, which becomes undefined.
   // so we fallback to getBoundingClientRect() so that we get an actual DOMRect
   // with all properties 0'd out
-  const rect = el.getClientRects()[0] || el.getBoundingClientRect()
+  const rect = [...el.getClientRects()].find((e) => e.width && e.height) || el.getBoundingClientRect()
 
   // we want to return the coordinates from the autWindow to the element
   // which handles a situation in which the element is inside of a nested

packages/driver/test/cypress/fixtures/dom.html

@@ -601,6 +601,13 @@
       </p>
       </div>
 
+      <div style="width: 30px; line-height: 2;">
+        <a href="#" id="overflow-link-width">
+          <i style="display: inline-block;"></i>
+          foofoofoofoofoo bar
+        </a>
+      </div>
+
 
       <div id="massively-long-div" style="height: 500px; width: 200px; background-color: gray;"></div>
       <div id="form-header-region">

packages/driver/test/cypress/integration/commands/actions/click_spec.js

@@ -965,6 +965,11 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('#overflow-link').find('.wrapped').click()
       })
 
+      // https://github.com/cypress-io/cypress/issues/7343
+      it('can click on inline elements that wrap lines where the first rect has no width', () => {
+        cy.get('#overflow-link-width').click()
+      })
+
       // readonly should only limit typing, not clicking
       it('can click on readonly inputs', () => {
         cy.get('#readonly-attr').click()