Merge branch '216792-fix-roadmap-buffered-rendering' into 'master'

Fix Roadmap buffered rendering

See merge request gitlab-org/gitlab!40243

ee/app/assets/javascripts/roadmap/components/epics_list_section.vue

@@ -95,7 +95,7 @@ export default {
   methods: {
     ...mapActions(['setBufferSize', 'toggleEpic']),
     initMounted() {
-      this.roadmapShellEl = this.$root.$el && this.$root.$el.firstChild;
+      this.roadmapShellEl = this.$root.$el && this.$root.$el.querySelector('.js-roadmap-shell');
       this.setBufferSize(Math.ceil((window.innerHeight - this.$el.offsetTop) / EPIC_ITEM_HEIGHT));
 
       // Wait for component render to complete

ee/app/assets/javascripts/roadmap/components/roadmap_shell.vue

@@ -91,7 +91,11 @@ export default {
 </script>
 
 <template>
-  <div class="roadmap-shell" data-qa-selector="roadmap_shell" @scroll="handleScroll">
+  <div
+    class="roadmap-shell js-roadmap-shell"
+    data-qa-selector="roadmap_shell"
+    @scroll="handleScroll"
+  >
     <roadmap-timeline-section
       ref="roadmapTimeline"
       :preset-type="presetType"

ee/spec/frontend/roadmap/components/epics_list_section_spec.js

@@ -161,10 +161,6 @@ describe('EpicsListSectionComponent', () => {
         jest.spyOn(wrapper.vm, 'scrollToTodayIndicator').mockImplementation(() => {});
       });
 
-      it('sets value of `roadmapShellEl` with root component element', () => {
-        expect(wrapper.vm.roadmapShellEl instanceof HTMLElement).toBe(true);
-      });
-
       it('calls action `setBufferSize` with value based on window.innerHeight and component element position', () => {
         expect(wrapper.vm.bufferSize).toBe(16);
       });