From 8da2fa83cc6ae22c598f8c25bb902d48b78e3888 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 10 Nov 2025 11:11:22 +0100
Subject: [PATCH] feat: milestone progression keyboard navigation (#10950)

---
 .../MilestoneProgressionForm.tsx               | 16 +++-------------
 .../MilestoneProgressionTimeInput.tsx          | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionForm.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionForm.tsx
index 4b19be755a..6b2a3189de 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionForm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionForm.tsx
@@ -6,7 +6,7 @@ import type { ChangeMilestoneProgressionSchema } from 'openapi';
 import type { MilestoneStatus } from '../ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx';
 import { useMilestoneProgressionInfo } from '../hooks/useMilestoneProgressionInfo.ts';
 
-const StyledFormContainer = styled('div')(({ theme }) => ({
+const StyledFormContainer = styled('form')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(1.5),
@@ -103,18 +103,8 @@ export const MilestoneProgressionForm = ({
         await onSubmit(form.getProgressionPayload());
     };
 
-    const handleKeyDown = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            handleSubmit();
-        } else if (event.key === 'Escape') {
-            event.preventDefault();
-            onCancel();
-        }
-    };
-
     return (
-        <StyledFormContainer onKeyDown={handleKeyDown}>
+        <StyledFormContainer onSubmit={handleSubmit}>
             <StyledTopRow>
                 <StyledIcon />
                 <StyledLabel>Proceed after</StyledLabel>
@@ -139,8 +129,8 @@ export const MilestoneProgressionForm = ({
                 <Button
                     variant='contained'
                     color='primary'
-                    onClick={handleSubmit}
                     size='small'
+                    type='submit'
                 >
                     Save
                 </Button>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
index 8e0d37bda2..321a445300 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
@@ -59,6 +59,12 @@ const handleNumericPaste = (e: React.ClipboardEvent) => {
     }
 };
 
+const stopEnterPropagation = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+        e.stopPropagation();
+    }
+};
+
 export const MilestoneProgressionTimeInput = ({
     timeValue,
     timeUnit,
@@ -90,9 +96,15 @@ export const MilestoneProgressionTimeInput = ({
                 id='time-unit-select'
                 disabled={disabled}
             >
-                <MenuItem value='minutes'>Minutes</MenuItem>
-                <MenuItem value='hours'>Hours</MenuItem>
-                <MenuItem value='days'>Days</MenuItem>
+                <MenuItem value='minutes' onKeyDown={stopEnterPropagation}>
+                    Minutes
+                </MenuItem>
+                <MenuItem value='hours' onKeyDown={stopEnterPropagation}>
+                    Hours
+                </MenuItem>
+                <MenuItem value='days' onKeyDown={stopEnterPropagation}>
+                    Days
+                </MenuItem>
             </StyledSelect>
         </StyledInputGroup>
     );