App 18473 investigate date input bug on i os for absence integration (#…

…447)

.changeset/lazy-rocks-remember.md

@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Fixed losing focus in `swirl-popover` in WKWebView.

packages/swirl-components/src/components/swirl-modal/swirl-modal.stories.ts

@@ -44,32 +44,30 @@ const Template = (args) => {
   trigger.addEventListener("click", () => element.open());
 
   element.innerHTML = `
-    <swirl-box padding-block-start="16">
-      <swirl-text>
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-        sit amet.
-      </swirl-text>
-    </swirl-box>
-
-    <swirl-box cover slot="secondary-content">
-      <swirl-card elevated="false" height="100%" intent="default-subdued" is-borderless>
-        <swirl-text slot="content">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-          eirmod tempor invidunt.
-        </swirl-text>
-      </swirl-card>
-    </swirl-box>
-
-    <swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
-      <swirl-search auto-focus label="Search"></swirl-search>
-    </div>
+  <swirl-box padding-block-start="16">
+  <swirl-text>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </swirl-text>
+</swirl-box>
+<swirl-box cover slot="secondary-content">
+  <swirl-card elevated="false" height="100%" intent="default-subdued" is-borderless>
+    <swirl-text slot="content">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt.
+    </swirl-text>
+  </swirl-card>
+</swirl-box>
+<swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
+  <swirl-search auto-focus label="Search"></swirl-search>
+</div>
   `;
 
   container.append(trigger, element);

packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx

@@ -87,21 +87,29 @@ export class SwirlPopover {
     }
 
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const isWKWebView = "webkit" in window;
+    const isSafariOrWKWebView = isSafari || isWKWebView;
+
     const target = event.target as HTMLElement;
     const relatedTarget = event.relatedTarget as HTMLElement;
     const activeElement = getActiveElement();
 
-    const popoverLostFocus =
-      !this.el.contains(target) &&
-      !this.el.contains(activeElement) &&
-      target !== this.triggerEl &&
-      !this.triggerEl?.contains(target) &&
-      (!isSafari ||
-        (isSafari &&
-          !this.el.contains(relatedTarget || target) &&
-          relatedTarget !== this.el));
-
-    if (popoverLostFocus) {
+    // Check if the focus has moved outside the popover or its trigger.
+    const focusIsOutsidePopover =
+      !this.el.contains(target) && !this.el.contains(activeElement);
+    const focusIsNotOnTrigger =
+      target !== this.triggerEl && !this.triggerEl?.contains(target);
+    const extraCheckForSafariOrWKWebView =
+      isSafariOrWKWebView &&
+      !this.el.contains(relatedTarget || target) &&
+      relatedTarget !== this.el;
+
+    // Close the popover if the focus is outside and additional checks for Safari or WKWebView pass.
+    if (
+      focusIsOutsidePopover &&
+      focusIsNotOnTrigger &&
+      (!isSafariOrWKWebView || extraCheckForSafariOrWKWebView)
+    ) {
       this.close();
     }
   }
@@ -165,6 +173,7 @@ export class SwirlPopover {
    */
   @Method()
   public async open(triggerEl?: HTMLElement) {
+    console.log("open", triggerEl);
     this.triggerEl = triggerEl || this.triggerEl;
 
     if (this.active || !Boolean(this.triggerEl)) {

packages/swirl-tokens/dart/lib/styles.dark.dart

@@ -4,7 +4,7 @@
 //
 
 // Do not edit directly
-// Generated on Tue, 24 Oct 2023 09:04:48 GMT
+// Generated on Thu, 09 Nov 2023 09:57:54 GMT
 
 
 

packages/swirl-tokens/dart/lib/styles.light.dart

@@ -4,7 +4,7 @@
 //
 
 // Do not edit directly
-// Generated on Tue, 24 Oct 2023 09:04:48 GMT
+// Generated on Thu, 09 Nov 2023 09:57:54 GMT