From 7e18269f06a4e73964af8dcfa90d4496387dc4b3 Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <aonnikov@hardcoreeng.com>
Date: Wed, 19 Feb 2025 14:29:18 +0700
Subject: [PATCH] UBERF-9491 Filter out default undefined values from component
 props (#8052)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 packages/ui/src/components/Component.svelte | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Component.svelte b/packages/ui/src/components/Component.svelte
index 26f10aec6b..e83560e83e 100644
--- a/packages/ui/src/components/Component.svelte
+++ b/packages/ui/src/components/Component.svelte
@@ -33,11 +33,23 @@
   let _is: AnyComponent | AnySvelteComponent = is
   let _props: any = props
 
+  // See https://github.com/sveltejs/svelte/issues/4068
+  // When passing undefined prop value, then Svelte uses default value only first time when
+  // component is instantiated. On the next update the value will be set to undefined.
+  // Here we filter out undefined values from props on updates to ensure we don't overwrite them.
+  const filterDefaultUndefined = (pnew: any, pold: any): any =>
+    pnew != null
+      ? Object.fromEntries(Object.entries(pnew).filter(([k, v]) => v !== undefined || pold?.[k] !== undefined))
+      : pnew
+
   $: if (!deepEqual(_is, is)) {
     _is = is
   }
-  $: if (!deepEqual(_props, props)) {
-    _props = props
+  $: {
+    const p = filterDefaultUndefined(props, _props)
+    if (!deepEqual(_props, p)) {
+      _props = p
+    }
   }
 
   let Ctor: any
@@ -61,6 +73,7 @@
           .then((res) => {
             if (current === counter) {
               Ctor = res
+              _props = props
               loading = false
             }
           })
@@ -72,9 +85,11 @@
       } else {
         loading = false
         Ctor = component
+        _props = props
       }
     } else {
       Ctor = _is
+      _props = props
     }
   }