Refresh combo boxes button

src/lib/widgets/ComboWidget.svelte

@@ -7,7 +7,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: any
 
  export let debug: boolean = false;
@@ -15,8 +15,14 @@
  $: widget && setNodeValue(widget);
 
  $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
-     $nodeValue = option
-     setOption($nodeValue)
+     if (node.properties.values.indexOf(option.value) === -1) {
+         setOption($nodeValue)
+         $nodeValue = option
+     }
+     else {
+         $nodeValue = option
+         setOption($nodeValue)
+     }
      setNodeValue(widget)
      node.properties = node.properties
  }
@@ -46,37 +52,65 @@
          return "???";
      return links[0].data
  }
+
+ let lastPropsChanged: number = 0;
+ let werePropsChanged: boolean = false;
+
+ $: if ($propsChanged !== lastPropsChanged) {
+     werePropsChanged = true;
+     lastPropsChanged = $propsChanged;
+     setTimeout(() => (werePropsChanged = false), 2000);
+ }
 </script>
 
-<div class="wrapper gr-combo">
-    {#if node !== null && nodeValue !== null}
-        <label>
-            <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
-            <Select
-                bind:value={option}
-                bind:items={node.properties.values}
-                disabled={node.properties.values.length === 0}
-                clearable={false}
-                on:change
-                on:select
-                on:filter
-                on:blur
-            />
-            {#if debug}
-                <div>Value: {option?.value}</div>
-                <div>NodeValue: {$nodeValue}</div>
-                <div>LinkValue: {getLinkValue()}</div>
-            {/if}
-        </label>
-    {/if}
+<div class="wrapper gr-combo" class:updated={werePropsChanged}>
+    {#key $propsChanged}
+        {#if node !== null && nodeValue !== null}
+            <label>
+                <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
+                <Select
+                    bind:value={option}
+                    bind:items={node.properties.values}
+                    disabled={node.properties.values.length === 0}
+                    clearable={false}
+                    on:change
+                    on:select
+                    on:filter
+                    on:blur
+                />
+                {#if debug}
+                    <div>Value: {option?.value}</div>
+                    <div>Items: {node.properties.values}</div>
+                    <div>NodeValue: {$nodeValue}</div>
+                    <div>LinkValue: {getLinkValue()}</div>
+                {/if}
+            </label>
+        {/if}
+    {/key}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
  }
 
+ @keyframes -global-light-up {
+     from {
+         background-color: var(--color-yellow-400);
+     }
+     to {
+         background-color: none;
+     }
+ }
+
+ .updated {
+     animation: light-up 1s ease-out;
+     :global(.svelte-select) {
+         animation: light-up 1s ease-out;
+     }
+ }
+
  :global(.svelte-select-list) {
      z-index: var(--layer-top) !important;
  }