Merge pull request 'Fix(settings): selection reactivity' (#184) from fix/selection-setting-reactivity into main

Reviewed-on: #184
Reviewed-by: Jakob Gregory

src/features/settings/components/Selection.vue

@@ -54,10 +54,9 @@ const props = defineProps({
 const store = useSettingsStore();
 
 const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio');
-const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default));
-
-watch(selected, (newValue) => {
-    store.set(props.path, newValue);
+const selected = computed({
+    get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
+    set: (value) => store.set(props.path, value)
 });
 
 const labelId = useId();

src/features/settings/components/__tests__/Selection.test.js

@@ -90,6 +90,32 @@ describe('Selection', () => {
         expect(inputsChecked).toStrictEqual([false, true, false]);
     });
 
+    test('reacts on store change', async () => {
+        const wrapper = getWrapper({
+            options: exampleOptions,
+            piniaOptions: {
+                setupStores: () => {
+                    const store = useSettingsStore();
+                    store.set('selection', 'o1');
+                }
+            }
+        });
+        const settings = useSettingsStore();
+
+        {
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, true, false]);
+        }
+        {
+            settings.set('selection', 'o2');
+            await nextTick();
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, false, true]);
+        }
+    });
+
     test('shows multiple values from store', () => {
         const wrapper = getWrapper({
             options: exampleOptions,