diff --git a/ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue b/ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue
index fe62e1b2897b8479f1e833196fbbd794b4994327..3663c6524e1438d1b41c284c4e9c1dc2586d2645 100644
--- a/ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue
+++ b/ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue
@@ -99,6 +99,8 @@ export default {
       class="roadmap-daterange-dropdown"
       data-testid="daterange-dropdown"
       :items="$options.availableDateRanges"
+      @shown="handleDaterangeDropdownOpen"
+      @hidden="handleDaterangeDropdownClose"
     />
     <gl-form-group v-if="availablePresets.length" class="gl-mb-0 gl-mt-3">
       <gl-form-radio-group
diff --git a/ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js b/ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js
index ae414a3bfb2c0d656ec8afdd8fdf2c3bee7f2ba5..a028792c5b3c13fe3a4b048e397406f4d1af9b1b 100644
--- a/ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js
+++ b/ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js
@@ -1,11 +1,16 @@
 import { GlCollapsibleListbox, GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
-import { nextTick } from 'vue';
-
+import Vue, { nextTick } from 'vue';
+// eslint-disable-next-line no-restricted-imports
+import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import createStore from 'ee/roadmap/store';
+import * as actions from 'ee/roadmap/store/actions';
+import state from 'ee/roadmap/store/state';
+import mutations from 'ee/roadmap/store/mutations';
 import RoadmapDaterange from 'ee/roadmap/components/roadmap_daterange.vue';
 import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
 
+Vue.use(Vuex);
+
 describe('RoadmapDaterange', () => {
   let wrapper;
 
@@ -14,7 +19,18 @@ describe('RoadmapDaterange', () => {
   const weeks = { text: 'By week', value: PRESET_TYPES.WEEKS };
 
   const createComponent = ({ timeframeRangeType = DATE_RANGES.CURRENT_QUARTER } = {}) => {
-    const store = createStore();
+    const store = new Vuex.Store({
+      actions: {
+        ...actions,
+        fetchGroupMilestones: jest.fn(),
+        fetchMilestones: jest.fn(),
+      },
+      mutations,
+      state: state(),
+      getters: {
+        isScopedRoadmap: (s) => Boolean(s.epicIid),
+      },
+    });
 
     store.dispatch('setInitialData', {
       presetType: PRESET_TYPES.MONTHS,
@@ -63,4 +79,24 @@ describe('RoadmapDaterange', () => {
       },
     );
   });
+
+  describe('dropdown behavior', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('changes the date range when the dropdown closes', async () => {
+      expect(findDropdown().props('selected')).toBe(DATE_RANGES.CURRENT_QUARTER);
+
+      findDropdown().vm.$emit('select', DATE_RANGES.CURRENT_YEAR);
+
+      await nextTick();
+
+      findDropdown().vm.$emit('hidden');
+
+      await nextTick();
+
+      expect(findDropdown().props('selected')).toBe(DATE_RANGES.CURRENT_YEAR);
+    });
+  });
 });