fix(frontend): follow-up of #17033 (#17047)

* wip

* fix

* ref -> reactive

* tweak throttle threshold

* tweak throttle threshold

* rss設定にはmanualSaveを使用するように

* Update MkWidgetSettingsDialog.vue

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 16 insertions, 11 deletions

diff --git a/packages/frontend/src/widgets/widget.ts b/packages/frontend/src/widgets/widget.ts
index 6c5ff36b16..d4209f6251 100644
--- a/packages/frontend/src/widgets/widget.ts
+++ b/packages/frontend/src/widgets/widget.ts
@@ -4,8 +4,9 @@
  */
 
 import { defineAsyncComponent, reactive, watch } from 'vue';
-import type { Reactive } from 'vue';
 import { throttle } from 'throttle-debounce';
+import { getDefaultFormValues } from '@/utility/form.js';
+import type { Reactive } from 'vue';
 import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
 import * as os from '@/os.js';
 import { deepClone } from '@/utility/clone.js';
@@ -39,19 +40,23 @@ export const useWidgetPropsManager = <F extends FormWithDefault>(
 	save: () => void;
 	configure: () => void;
 } => {
-	const widgetProps = reactive<GetFormResultType<F>>((props.widget ? deepClone(props.widget.data) : {}) as GetFormResultType<F>);
-
-	const mergeProps = () => {
-		for (const prop of Object.keys(propsDef)) {
-			if (typeof widgetProps[prop] === 'undefined') {
-				widgetProps[prop] = propsDef[prop].default;
+	const widgetProps = reactive((() => {
+		const np = getDefaultFormValues(propsDef);
+		if (props.widget?.data != null) {
+			for (const key of Object.keys(props.widget.data) as (keyof F)[]) {
+				np[key] = props.widget.data[key] as GetFormResultType<F>[typeof key];
 			}
 		}
-	};
+		return np;
+	})());
 
-	watch(widgetProps, () => {
-		mergeProps();
-	}, { deep: true, immediate: true });
+	watch(() => props.widget?.data, (to) => {
+		if (to != null) {
+			for (const key of Object.keys(propsDef)) {
+				widgetProps[key] = to[key];
+			}
+		}
+	}, { deep: true });
 
 	const save = throttle(3000, () => {
 		emit('updateProps', widgetProps as GetFormResultType<F>);