fix: emit update:interaction only when the built content changes

Entering edit mode no longer emits. The workingInteraction watcher compares
by value, so reopening an editor or retyping identical text is not an update.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: rtibblesbot

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionEditor.vue

@@ -337,6 +337,7 @@
 
   import { computed, ref, watch } from 'vue';
   import flatten from 'lodash/flatten';
+  import isEqual from 'lodash/isEqual';
   import shuffle from 'lodash/shuffle';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
@@ -539,13 +540,15 @@
           } else if (state.value.pairs.length > 0) {
             openPairItem(0, 0);
           }
-          emit('update:interaction', workingInteraction.value);
         },
         { immediate: true },
       );
 
-      watch(workingInteraction, newVal => {
-        if (props.mode === 'edit') emit('update:interaction', newVal);
+      // Rebuilding yields a fresh object on every state change, so compare by
+      // value — reopening an editor or retyping the same text is not a change.
+      watch(workingInteraction, (newVal, oldVal) => {
+        if (props.mode !== 'edit' || isEqual(newVal, oldVal)) return;
+        emit('update:interaction', newVal);
       });
 
       const errorCodes = computed(() => errors.value.map(e => e.code));

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionEditor.spec.js

@@ -58,7 +58,8 @@ const renderEditor = (props = {}) =>
     routes: new VueRouter(),
   });
 
-const latestBodyXml = emitted => emitted()['update:interaction'].at(-1)[0].bodyXml;
+const updates = emitted => emitted()['update:interaction'] || [];
+const latestBodyXml = emitted => updates(emitted).at(-1)[0].bodyXml;
 
 describe('AssociateInteractionEditor', () => {
   describe('edit mode rendering', () => {
@@ -191,14 +192,14 @@ describe('AssociateInteractionEditor', () => {
       const { emitted } = renderEditor();
       await user.click(button(tr.$tr('addDistractorBtn')));
       await user.type(openTextarea(), 'Demetrius');
-      const before = emitted()['update:interaction'].length;
+      const before = updates(emitted).length;
       // Editing something else closes the editor, which is what commits it.
       await user.click(button(editPairItem(1, 1)));
 
       const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
       expect(within(pool).getByText('Demetrius')).toBeInTheDocument();
       expect(latestBodyXml(emitted)).toContain('Demetrius');
-      expect(emitted()['update:interaction'].length).toBeGreaterThan(before);
+      expect(updates(emitted).length).toBeGreaterThan(before);
     });
 
     it('commits the written distractor when the add button is clicked again', async () => {
@@ -333,24 +334,32 @@ describe('AssociateInteractionEditor', () => {
   });
 
   describe('emits', () => {
-    it('emits update:interaction on mount in edit mode', () => {
+    it('does not emit update:interaction on mount in edit mode', () => {
       const { emitted } = renderEditor();
-      const payload = emitted()['update:interaction'][0][0];
+      expect(updates(emitted)).toHaveLength(0);
+    });
+
+    it('emits update:interaction after adding a pair', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('addPairBtn')));
+      const payload = updates(emitted).at(-1)[0];
       expect(typeof payload.bodyXml).toBe('string');
       expect(Array.isArray(payload.responseDeclarations)).toBe(true);
     });
 
-    it('emits update:interaction again after adding a pair', async () => {
+    it('does not emit update:interaction when moving between editors changes nothing', async () => {
       const user = userEvent.setup();
       const { emitted } = renderEditor();
-      const before = emitted()['update:interaction'].length;
-      await user.click(button(tr.$tr('addPairBtn')));
-      expect(emitted()['update:interaction'].length).toBeGreaterThan(before);
+      // Pair 1 item 1 opens on mount; moving the open editor is not a content change.
+      await user.click(button(editPairItem(1, 2)));
+      await user.click(button(editPairItem(2, 1)));
+      expect(updates(emitted)).toHaveLength(0);
     });
 
     it('does not emit update:interaction in view mode', () => {
       const { emitted } = renderEditor({ mode: 'view', showAnswers: true });
-      expect(emitted()['update:interaction']).toBeFalsy();
+      expect(updates(emitted)).toHaveLength(0);
     });
   });