1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-12-09 20:04:11 +01:00

feat: milestone progression keyboard navigation (#10950)

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

View File

@ -6,7 +6,7 @@ import type { ChangeMilestoneProgressionSchema } from 'openapi';
import type { MilestoneStatus } from '../ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx'; import type { MilestoneStatus } from '../ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx';
import { useMilestoneProgressionInfo } from '../hooks/useMilestoneProgressionInfo.ts'; import { useMilestoneProgressionInfo } from '../hooks/useMilestoneProgressionInfo.ts';
const StyledFormContainer = styled('div')(({ theme }) => ({ const StyledFormContainer = styled('form')(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: theme.spacing(1.5), gap: theme.spacing(1.5),
@ -103,18 +103,8 @@ export const MilestoneProgressionForm = ({
await onSubmit(form.getProgressionPayload()); 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 ( return (
<StyledFormContainer onKeyDown={handleKeyDown}> <StyledFormContainer onSubmit={handleSubmit}>
<StyledTopRow> <StyledTopRow>
<StyledIcon /> <StyledIcon />
<StyledLabel>Proceed after</StyledLabel> <StyledLabel>Proceed after</StyledLabel>
@ -139,8 +129,8 @@ export const MilestoneProgressionForm = ({
<Button <Button
variant='contained' variant='contained'
color='primary' color='primary'
onClick={handleSubmit}
size='small' size='small'
type='submit'
> >
Save Save
</Button> </Button>

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 = ({ export const MilestoneProgressionTimeInput = ({
timeValue, timeValue,
timeUnit, timeUnit,
@ -90,9 +96,15 @@ export const MilestoneProgressionTimeInput = ({
id='time-unit-select' id='time-unit-select'
disabled={disabled} disabled={disabled}
> >
<MenuItem value='minutes'>Minutes</MenuItem> <MenuItem value='minutes' onKeyDown={stopEnterPropagation}>
<MenuItem value='hours'>Hours</MenuItem> Minutes
<MenuItem value='days'>Days</MenuItem> </MenuItem>
<MenuItem value='hours' onKeyDown={stopEnterPropagation}>
Hours
</MenuItem>
<MenuItem value='days' onKeyDown={stopEnterPropagation}>
Days
</MenuItem>
</StyledSelect> </StyledSelect>
</StyledInputGroup> </StyledInputGroup>
); );