Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-24 20:06:55 +01:00
Code Issues Projects Releases Wiki Activity

feat: milestone progression keyboard navigation (#10950)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-11-10 11:11:22 +01:00 committed by GitHub
parent 1cab7eaa78
commit 8da2fa83cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionForm.tsx
View File

@ -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>

18
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
View File

@ -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>
);