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:
parent
1cab7eaa78
commit
8da2fa83cc
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user