From 3fd861f6c1869839281e91543d9528815c584c20 Mon Sep 17 00:00:00 2001 From: Adam Silber-Gniady Date: Thu, 9 Nov 2023 14:30:04 +0100 Subject: [PATCH] App 18473 investigate date input bug on i os for absence integration (#447) --- .changeset/lazy-rocks-remember.md | 7 +++ .../swirl-modal/swirl-modal.stories.ts | 50 +++++++++--------- .../swirl-popover/swirl-popover.tsx | 31 +++++++---- .../dart/lib/fonts/flip-legacy-icons.ttf | Bin 14716 -> 14716 bytes .../dart/lib/fonts/swirl-icons.ttf | Bin 76356 -> 76356 bytes .../swirl-tokens/dart/lib/styles.dark.dart | 2 +- .../swirl-tokens/dart/lib/styles.light.dart | 2 +- 7 files changed, 53 insertions(+), 39 deletions(-) create mode 100644 .changeset/lazy-rocks-remember.md diff --git a/.changeset/lazy-rocks-remember.md b/.changeset/lazy-rocks-remember.md new file mode 100644 index 000000000..3497adcd8 --- /dev/null +++ b/.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. diff --git a/packages/swirl-components/src/components/swirl-modal/swirl-modal.stories.ts b/packages/swirl-components/src/components/swirl-modal/swirl-modal.stories.ts index 14d4faf77..8dc38886d 100644 --- a/packages/swirl-components/src/components/swirl-modal/swirl-modal.stories.ts +++ b/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 = ` - - - 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. - - - - - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt. - - - - - - - + + + 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. + + + + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt. + + + + + + `; container.append(trigger, element); diff --git a/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx b/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx index 1c012550c..54d210404 100644 --- a/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx +++ b/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)) { diff --git a/packages/swirl-icons/dart/lib/fonts/flip-legacy-icons.ttf b/packages/swirl-icons/dart/lib/fonts/flip-legacy-icons.ttf index bfb1757a7f1925e668ec6999dd992d71eda73df8..596caf05f50e81998eecd0174c5126dd3bcefab5 100644 GIT binary patch delta 47 vcmexU^rvV-AoFVm!HFSLWL!RQzlrC!`O3h}{DJ`p9u~zeg3+5<7%MCQ$Wsv> delta 47 vcmexU^rvV-AoGFkx)VdD$hf-9-4f4l^Ob>{`2_{2Z}XLboB0I;5Iii3T?nI_Ss1soFfux50s!il B5L^HN delta 52 zcmX?dh2_W44EojX>dNC-{va=H}eYyAb1#SsSl%@Ss1soFfux50ssm2 B5L^HN diff --git a/packages/swirl-tokens/dart/lib/styles.dark.dart b/packages/swirl-tokens/dart/lib/styles.dark.dart index faf77e87a..14df8792f 100644 --- a/packages/swirl-tokens/dart/lib/styles.dark.dart +++ b/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 diff --git a/packages/swirl-tokens/dart/lib/styles.light.dart b/packages/swirl-tokens/dart/lib/styles.light.dart index ff1c9df71..0f3852643 100644 --- a/packages/swirl-tokens/dart/lib/styles.light.dart +++ b/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