Corrected display of Popups and Tooltips

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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)
     )
   }
 

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

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,