From 0027dc285818836047f3662a0472286ebea76297 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Thu, 29 May 2025 02:25:28 +0700
Subject: [PATCH] Corrected display of Popups and Tooltips

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/ui/src/components/Popup.svelte       | 25 ++++++++++++++++---
 .../ui/src/components/TooltipInstance.svelte  | 23 ++++++++++++++---
 packages/ui/src/popups.ts                     |  4 +++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte
index fe8d5eb529..6f1db96fbd 100644
--- a/packages/ui/src/components/Popup.svelte
+++ b/packages/ui/src/components/Popup.svelte
@@ -12,11 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+<script context="module" lang="ts">
+  let fullScreenMode: boolean = false
+
+  export function getFullScreenMode (): boolean {
+    return fullScreenMode
+  }
+  function setFullScreenMode (value: boolean): void {
+    fullScreenMode = value
+  }
+</script>
+
 <script lang="ts">
   import { popupstore as popups } from '../popups'
   import { modalStore as modals } from '../modals'
 
   import PopupInstance from './PopupInstance.svelte'
+  import { onDestroy, onMount } from 'svelte'
 
   export let contentPanel: HTMLElement | undefined = undefined
   export let fullScreen: boolean = false
@@ -27,11 +39,18 @@
     instances.forEach((p) => p.fitPopupInstance())
   }
 
+  onMount(() => {
+    if (fullScreen) setFullScreenMode(true)
+  })
+  onDestroy(() => {
+    if (fullScreen) setFullScreenMode(false)
+  })
+
   const shouldDisplayPopup = (popup: any): boolean => {
     return (
-      (fullScreen && document.fullscreenElement != null && popup.element !== 'full-centered') ||
-      (!fullScreen && document.fullscreenElement != null && popup.element === 'full-centered') ||
-      (!fullScreen && document.fullscreenElement == null)
+      (fullScreen && fullScreenMode && popup.element !== 'full-centered') ||
+      (!fullScreen && fullScreenMode && popup.element === 'full-centered') ||
+      (!fullScreen && !fullScreenMode)
     )
   }
 
diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
index f12f3df094..5274a41d1f 100644
--- a/packages/ui/src/components/TooltipInstance.svelte
+++ b/packages/ui/src/components/TooltipInstance.svelte
@@ -12,8 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+<script context="module" lang="ts">
+  let fullScreenMode: boolean = false
+
+  export function getFullScreenMode (): boolean {
+    return fullScreenMode
+  }
+  function setFullScreenMode (value: boolean): void {
+    fullScreenMode = value
+  }
+</script>
+
 <script lang="ts">
-  import { afterUpdate, onDestroy } from 'svelte'
+  import { afterUpdate, onDestroy, onMount } from 'svelte'
   import { resizeObserver } from '../resize'
   import { closeTooltip, tooltipstore as tooltip } from '../tooltips'
   import { modalStore as modals } from '../modals'
@@ -66,8 +77,14 @@
     visibility: 'hidden',
     classList: ''
   }
-  const shouldHideTooltip = (): boolean =>
-    (fullScreen && document.fullscreenElement == null) || (!fullScreen && document.fullscreenElement != null)
+
+  onMount(() => {
+    if (fullScreen) setFullScreenMode(true)
+  })
+  onDestroy(() => {
+    if (fullScreen) setFullScreenMode(false)
+  })
+  const shouldHideTooltip = (): boolean => (fullScreen && !fullScreenMode) || (!fullScreen && fullScreenMode)
 
   const clearStyles = (): void => {
     shown = false
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 54bd1f2059..705befff00 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -109,6 +109,10 @@ export function showPopup (
     })
   }
   closePopupOp()
+  const anchor = document.activeElement as HTMLElement
+  const editable = anchor?.isContentEditable || anchor?.tagName === 'INPUT' || anchor?.tagName === 'TEXTAREA'
+  if (anchor != null && !editable) anchor.blur()
+
   const _element = element instanceof HTMLElement ? getPopupPositionElement(element) : element
   const data: Omit<CompAndProps, 'is'> = {
     id,