Allow double click on presets

Author: tzi

plugins/CoreHome/vue/dist/CoreHome.umd.js

@@ -18,7 +18,6 @@ jest.mock('../translate', () => ({
       General_DateRangeInPeriodList: 'date range',
       General_Custom: 'Custom',
       General_ChoosePeriod: 'Choose period',
-      General_DoubleClickToChangePeriod: 'Double click to change period',
     };
 
     return messages[key] || key;
@@ -64,14 +63,6 @@ describe('PeriodOptions', () => {
     expect(wrapper.emitted('select')?.[0]).toEqual([{ period: 'month' }]);
   });
 
-  it('should emit dblclick payload', async () => {
-    const wrapper = mountComponent();
-
-    await wrapper.find('#period_id_week').trigger('dblclick');
-
-    expect(wrapper.emitted('dblclick')?.[0]).toEqual([{ period: 'week' }]);
-  });
-
   it('should expose selected state through checked radio input', async () => {
     const wrapper = mountComponent({
       checkedPeriodId: 'day',
@@ -99,17 +90,4 @@ describe('PeriodOptions', () => {
     expect(wrapper.find('#period_id_month').element.parentElement?.classList.contains('selected-period-label'))
       .toBe(true);
   });
-
-  it('should set empty tooltip for active date period and non-empty for others', () => {
-    const wrapper = mountComponent({
-      modelValue: 'day',
-      activeDatePeriod: 'day',
-    });
-
-    const dayLabel = wrapper.find('#period_id_day').element.parentElement as HTMLLabelElement;
-    const weekLabel = wrapper.find('#period_id_week').element.parentElement as HTMLLabelElement;
-
-    expect(dayLabel.title).toBe('');
-    expect(weekLabel.title).not.toBe('');
-  });
 });

plugins/CoreHome/vue/dist/CoreHome.umd.min.js

@@ -18,10 +18,6 @@
       <label
         class="period-option-label"
         :class="{ 'selected-period-label': checkedPeriodId === period }"
-        :title="period === activeDatePeriod
-          ? ''
-          : translate('General_DoubleClickToChangePeriod')"
-        @dblclick="handlePeriodDoubleClick(period)"
       >
         <input
           class="period-option-input"
@@ -77,7 +73,7 @@ export default defineComponent({
       periodInputName,
     };
   },
-  emits: ['update:modelValue', 'select', 'dblclick'],
+  emits: ['update:modelValue', 'select'],
   computed: {
     displayPeriods(): string[] {
       if (!this.periods.includes('range')) {
@@ -104,10 +100,6 @@ export default defineComponent({
     handlePeriodEnter(period: string) {
       this.handlePeriodSelected(period);
     },
-    handlePeriodDoubleClick(period: string) {
-      const payload: PeriodSelectionPayload = { period };
-      this.$emit('dblclick', payload);
-    },
   },
 });
 </script>

plugins/CoreHome/vue/src/PeriodSelector/PeriodOptions.component.spec.ts

@@ -730,32 +730,23 @@ describe('PeriodSelector', () => {
     expect(ignoredVm.appliedRangeEndDate).toBe('2026-01-31');
   });
 
-  it('keeps legacy immediate apply behavior on non-range period double click', () => {
-    const vm: any = {
-      committedPeriod: 'day',
-      committedAnchorDate: new Date('2026-02-18'),
-      onPeriodOptionSelected: jest.fn(),
-      setPiwikPeriodAndDate: jest.fn(),
+  it('applies preset immediately on double click', () => {
+    const selection = {
+      id: 'last30days',
+      period: 'range',
+      date: 'last30',
+      startDate: new Date('2026-01-20'),
+      endDate: new Date('2026-02-18'),
     };
-
-    methods.onPeriodOptionDblClick.call(vm, { period: 'month' });
-
-    expect(vm.onPeriodOptionSelected).toHaveBeenCalledWith({ period: 'month' });
-    expect(vm.setPiwikPeriodAndDate).toHaveBeenCalledWith('month', vm.committedAnchorDate);
-  });
-
-  it('does not immediately apply range period double click', () => {
     const vm: any = {
-      committedPeriod: 'day',
-      committedAnchorDate: new Date('2026-02-18'),
-      onPeriodOptionSelected: jest.fn(),
-      setPiwikPeriodAndDate: jest.fn(),
+      onPresetDateRangeSelected: jest.fn(),
+      onApplyClicked: jest.fn(),
     };
 
-    methods.onPeriodOptionDblClick.call(vm, { period: 'range' });
+    methods.onPresetDateRangeDblClick.call(vm, selection);
 
-    expect(vm.onPeriodOptionSelected).toHaveBeenCalledWith({ period: 'range' });
-    expect(vm.setPiwikPeriodAndDate).not.toHaveBeenCalled();
+    expect(vm.onPresetDateRangeSelected).toHaveBeenCalledWith(selection);
+    expect(vm.onApplyClicked).toHaveBeenCalled();
   });
 
   it('blocks calendar commit while preset is pending', () => {

plugins/CoreHome/vue/src/PeriodSelector/PeriodOptions.vue

@@ -54,8 +54,8 @@
           @update:ui-selected-period="selectedPeriod = $event"
           @update:active-preset-id="activePresetId = $event"
           @period-select="onPeriodOptionSelected($event)"
-          @period-dblclick="onPeriodOptionDblClick($event)"
           @preset-select="onPresetDateRangeSelected($event)"
+          @preset-dblclick="onPresetDateRangeDblClick($event)"
         />
         <PeriodSelectorCalendarColumn
           :ui-selection="uiSelection"
@@ -509,17 +509,6 @@ export default defineComponent({
         ? this.committedAnchorDate
         : null;
     },
-    onPeriodOptionDblClick(payload: { period: string }) {
-      this.onPeriodOptionSelected(payload);
-      if (payload.period === RANGE_PERIOD
-        || payload.period === this.committedPeriod
-        || !this.committedAnchorDate
-      ) {
-        return;
-      }
-
-      this.setPiwikPeriodAndDate(payload.period, this.committedAnchorDate);
-    },
     canInteractWithSingleCalendar(): boolean {
       // Preset-owned selections are intentionally read-only for calendar interactions.
       // Users must switch ownership via period options before single-calendar clicks can commit.
@@ -558,6 +547,10 @@ export default defineComponent({
         this.singleCalendarPeriod = selection.period;
       }
     },
+    onPresetDateRangeDblClick(selection: PresetDateRangeSelection) {
+      this.onPresetDateRangeSelected(selection);
+      this.onApplyClicked();
+    },
     propagateNewUrlParams(date: string, period: string) {
       const compareParams = this.selectedComparisonParams;
 

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.selection.spec.ts

@@ -16,7 +16,6 @@
         :active-date-period="appliedPeriod"
         @update:model-value="$emit('update:uiSelectedPeriod', $event)"
         @select="$emit('period-select', $event)"
-        @dblclick="$emit('period-dblclick', $event)"
       />
       <PresetDateRanges
         :model-value="activePresetId"
@@ -26,6 +25,7 @@
         :max-date="maxAllowedDate"
         @update:model-value="$emit('update:activePresetId', $event)"
         @select="$emit('preset-select', $event)"
+        @dblclick="$emit('preset-dblclick', $event)"
       />
     </div>
   </div>
@@ -77,8 +77,8 @@ export default defineComponent({
     'update:uiSelectedPeriod',
     'update:activePresetId',
     'period-select',
-    'period-dblclick',
     'preset-select',
+    'preset-dblclick',
   ],
   methods: {
     translate,

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.vue

@@ -109,6 +109,18 @@ describe('PresetDateRanges', () => {
     expect(selectPayload.date).toBe('last7');
   });
 
+  it('should emit dblclick payload for presets', async () => {
+    const wrapper = mountComponent();
+
+    await wrapper.find('#preset_date_last7days').trigger('dblclick');
+
+    expect(wrapper.emitted('dblclick')?.[0]?.[0]).toMatchObject({
+      id: 'last7days',
+      period: 'range',
+      date: 'last7',
+    });
+  });
+
   it('should resolve monday/sunday week behavior correctly', async () => {
     const wrapper = mountComponent({ today: new Date('2026-02-15') });
 

plugins/CoreHome/vue/src/PeriodSelector/PeriodSelectorOptionsColumn.vue

@@ -22,6 +22,7 @@
       >
         <label
           :class="{ 'selected-period-label': checkedPresetId === preset.id }"
+          @dblclick="handlePresetDoubleClick(preset.id)"
         >
           <input
             type="radio"
@@ -100,7 +101,7 @@ export default defineComponent({
       presetInputName,
     };
   },
-  emits: ['update:modelValue', 'select'],
+  emits: ['update:modelValue', 'select', 'dblclick'],
   computed: {
     presetDateRanges(): PresetDateRangeOption[] {
       return PRESET_DATE_RANGES.filter(
@@ -130,6 +131,15 @@ export default defineComponent({
         endDate: clampDateToBounds(resolvedPreset.endDate, this.minDate, this.maxDate),
       } as PresetDateRangeSelection);
     },
+    handlePresetDoubleClick(presetId: PresetDateRangeId) {
+      const resolvedPreset = resolvePresetDateRange(presetId, this.today);
+
+      this.$emit('dblclick', {
+        ...resolvedPreset,
+        startDate: clampDateToBounds(resolvedPreset.startDate, this.minDate, this.maxDate),
+        endDate: clampDateToBounds(resolvedPreset.endDate, this.minDate, this.maxDate),
+      } as PresetDateRangeSelection);
+    },
   },
 });
 </script>