Fix expanding threads when reference link clicked

app/assets/javascripts/notes/components/notes_app.vue

@@ -122,6 +122,8 @@ export default {
         this.toggleAward({ awardName, noteId });
       });
     }
+
+    window.addEventListener('hashchange', this.handleHashChanged);
   },
   updated() {
     this.$nextTick(() => {
@@ -131,6 +133,7 @@ export default {
   },
   beforeDestroy() {
     this.stopPolling();
+    window.removeEventListener('hashchange', this.handleHashChanged);
   },
   methods: {
     ...mapActions([
@@ -138,7 +141,6 @@ export default {
       'fetchDiscussions',
       'poll',
       'toggleAward',
-      'scrollToNoteIfNeeded',
       'setNotesData',
       'setNoteableData',
       'setUserData',
@@ -151,6 +153,13 @@ export default {
       'convertToDiscussion',
       'stopPolling',
     ]),
+    handleHashChanged() {
+      const noteId = this.checkLocationHash();
+
+      if (noteId) {
+        this.setTargetNoteHash(getLocationHash());
+      }
+    },
     fetchNotes() {
       if (this.isFetching) return null;
 
@@ -194,6 +203,8 @@ export default {
           this.expandDiscussion({ discussionId: discussion.id });
         }
       }
+
+      return noteId;
     },
     startReplying(discussionId) {
       return this.convertToDiscussion(discussionId)

changelogs/unreleased/28985-links-to-notes-in-collapsed-discussions-dont-work.yml

+---
+title: Fix expanding collapsed threads when reference link clicked
+merge_request: 20148
+author:
+type: fixed

spec/frontend/notes/components/note_app_spec.js

@@ -54,7 +54,9 @@ describe('note_app', () => {
           components: {
             NotesApp,
           },
-          template: '<div class="js-vue-notes-event"><notes-app v-bind="$attrs" /></div>',
+          template: `<div class="js-vue-notes-event">
+            <notes-app ref="notesApp" v-bind="$attrs" />
+          </div>`,
         },
         {
           attachToDocument: true,
@@ -313,4 +315,20 @@ describe('note_app', () => {
       });
     });
   });
+
+  describe('mounted', () => {
+    beforeEach(() => {
+      axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
+      wrapper = mountComponent();
+      return waitForDiscussionsRequest();
+    });
+
+    it('should listen hashchange event', () => {
+      wrapper.vm.$refs.notesApp.handleHashChanged = jest.fn();
+      // jest.spyOn(wrapper.vm.$refs.notesApp, 'handleHashChanged');
+      window.dispatchEvent(new Event('hashchange'), '#foo');
+
+      expect(wrapper.vm.$refs.notesApp.handleHashChanged).toHaveBeenCalled();
+    });
+  });
 });