fix: connect-button inside container with backdrop-filter (#257)

Fixes issue #249
radixdlt · Sep 20, 2024 · aa56ef6 · aa56ef6
1 parent b0afda3
commit aa56ef6
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/examples/simple-dapp/index.html b/examples/simple-dapp/index.html
@@ -6,7 +6,12 @@
     <title>Simple dApp</title>
   </head>
   <body>
-    <header><radix-connect-button /></header>
+    <style>
+      .header {
+        backdrop-filter: blur(10px);
+      }
+    </style>
+    <header class="header"><radix-connect-button /></header>
     <div id="app"></div>
 
     <script type="module" src="/src/main.ts"></script>

diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts
@@ -96,6 +96,8 @@ export class ConnectButton extends LitElement {
 
   pristine = true
   initialBodyOverflow: string
+  initialBackdropFilter: string
+  parentElementWithBackdropFilter: HTMLElement | null
 
   windowClickEventHandler: (event: MouseEvent) => void
 
@@ -117,6 +119,8 @@ export class ConnectButton extends LitElement {
   constructor() {
     super()
     this.initialBodyOverflow = document.body.style.overflow
+    this.initialBackdropFilter = ''
+    this.parentElementWithBackdropFilter = null
     this.injectFontCSS()
     this.windowClickEventHandler = (event) => {
       if (!this.showPopoverMenu) return
@@ -170,6 +174,7 @@ export class ConnectButton extends LitElement {
     this.pristine = false
     this.showPopoverMenu = !this.showPopoverMenu
     this.toggleBodyOverflow()
+    this.toggleParentBackdropFilter()
     if (this.showPopoverMenu) {
       this.dispatchEvent(
         new CustomEvent('onShowPopover', {
@@ -188,6 +193,48 @@ export class ConnectButton extends LitElement {
         : this.initialBodyOverflow
   }
 
+  private toggleParentBackdropFilter() {
+    const OPACITY_TRANSITION_DURATION = 180
+    if (!this.isMobile) return
+
+    if (!this.showPopoverMenu && this.parentElementWithBackdropFilter) {
+      setTimeout(() => {
+        this.parentElementWithBackdropFilter?.style.setProperty(
+          'backdrop-filter',
+          this.initialBackdropFilter,
+        )
+        this.initialBackdropFilter = ''
+        this.parentElementWithBackdropFilter = null
+      }, OPACITY_TRANSITION_DURATION)
+
+      return
+    } else {
+      const parent = this.findParentWithBackdropFilter(this)
+      if (parent === null) {
+        return
+      }
+      this.initialBackdropFilter = parent.backdropFilter
+      this.parentElementWithBackdropFilter = parent.element
+
+      parent.element.style.backdropFilter = 'none'
+    }
+  }
+
+  private findParentWithBackdropFilter(
+    element: HTMLElement | null,
+  ): { element: HTMLElement; backdropFilter: string } | null {
+    if (!element) {
+      return null
+    }
+    const style = window.getComputedStyle(element)
+    const backdropFilter = style.getPropertyValue('backdrop-filter')
+    if (backdropFilter !== 'none') {
+      return { element, backdropFilter }
+    } else {
+      return this.findParentWithBackdropFilter(element.parentElement)
+    }
+  }
+
   private connectButtonTemplate() {
     const buttonText = this.connected ? this.personaLabel : 'Connect'