fix(overlays): no hide on label click

packages/overlays/src/OverlayController.js

@@ -808,17 +808,28 @@ export class OverlayController {
 
     if (phase === 'show') {
       let wasClickInside = false;
-      // handle on capture phase and remember till the next task that there was an inside click
+      let wasIndirectSynchronousClick = false;
+      // Handle on capture phase and remember till the next task that there was an inside click
       this.__preventCloseOutsideClick = () => {
+        if (wasClickInside) {
+          // This occurs when a synchronous new click is triggered from a previous click.
+          // For instance, when we have a label pointing to an input, the platform triggers
+          // a new click on the input. Not taking this click into account, will hide the overlay
+          // in `__onCaptureHtmlClick`
+          wasIndirectSynchronousClick = true;
+        }
         wasClickInside = true;
         setTimeout(() => {
           wasClickInside = false;
+          setTimeout(() => {
+            wasIndirectSynchronousClick = false;
+          });
         });
       };
       // handle on capture phase and schedule the hide if needed
       this.__onCaptureHtmlClick = () => {
         setTimeout(() => {
-          if (wasClickInside === false) {
+          if (wasClickInside === false && !wasIndirectSynchronousClick) {
             this.hide();
           }
         });

packages/overlays/test/OverlayController.test.js

@@ -68,10 +68,11 @@ describe('OverlayController', () => {
         }
         if (mode === 'inline') {
           contentNode = await fixture(html`
-            <div style="z-index: xxxxxxxxxxxx ;">
+            <div>
               I should be on top
             </div>
           `);
+          contentNode.style.zIndex = zIndexVal;
         }
         return contentNode;
       }
@@ -430,6 +431,7 @@ describe('OverlayController', () => {
         // Don't hide on inside (content) click
         ctrl.contentNode.click();
         await aTimeout();
+
         expect(ctrl.isShown).to.be.true;
 
         // Important to check if it can be still shown after, because we do some hacks inside
@@ -566,6 +568,28 @@ describe('OverlayController', () => {
         await ctrl.show();
         expect(ctrl.isShown).to.equal(true);
       });
+
+      it('doesn\'t hide on "inside label" click', async () => {
+        const contentNode = await fixture(`
+          <div>
+            <label for="test">test</label>
+            <input id="test">
+            Content
+          </div>`);
+        const labelNode = contentNode.querySelector('label[for=test]');
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          hidesOnOutsideClick: true,
+          contentNode,
+        });
+        await ctrl.show();
+
+        // Don't hide on label click
+        labelNode.click();
+        await aTimeout();
+
+        expect(ctrl.isShown).to.be.true;
+      });
     });
 
     describe('elementToFocusAfterHide', () => {