From 5e4ef0e2a9cc9bfb98adc73fc0c952776fcbd79f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20K=C3=BC=C3=A7=C3=BCk?=
 <156313362+fatihkucuktry@users.noreply.github.com>
Date: Mon, 3 Jun 2024 11:59:19 +0300
Subject: [PATCH] fix(drawer): fix drawer delay bug for removing from dom
 (#875)

Closes #536
---
 src/components/drawer/bl-drawer.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/drawer/bl-drawer.ts b/src/components/drawer/bl-drawer.ts
index 4905693c..32a04348 100644
--- a/src/components/drawer/bl-drawer.ts
+++ b/src/components/drawer/bl-drawer.ts
@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { event, EventDispatcher } from "../../utilities/event";
 import { styleToPixelConverter } from "../../utilities/style-to-px.converter";
 import "../button/bl-button";
@@ -59,6 +59,9 @@ export default class BlDrawer extends LitElement {
    */
   @event("bl-drawer-close") private onClose: EventDispatcher<string>;
 
+  @query("#drawer-iframe")
+  _drawerIframe: HTMLIFrameElement;
+
   connectedCallback() {
     super.connectedCallback();
     window?.addEventListener("bl-drawer-open", event => {
@@ -107,8 +110,12 @@ export default class BlDrawer extends LitElement {
       if (this.domExistenceSchedule) {
         clearTimeout(this.domExistenceSchedule);
       }
-
       this.domExistence = true;
+      window.setTimeout(() => {
+        if (this.embedUrl && this._drawerIframe) {
+          this._drawerIframe.src = this.embedUrl;
+        }
+      });
       // FIXME: Allow events without payload
       this.onOpen("");
     } else {
@@ -130,7 +137,7 @@ export default class BlDrawer extends LitElement {
 
   private renderContent() {
     const content = this.embedUrl
-      ? html`<iframe src=${this.embedUrl}></iframe>`
+      ? html`<iframe id="drawer-iframe" src=${this.embedUrl}></iframe>`
       : html`<slot></slot>`;
 
     return html`<section class=${this.embedUrl ? "iframe-content" : "content"}>