diff --git a/client/src/Components/inputs/Radio.tsx b/client/src/Components/inputs/Radio.tsx index 01e968188..bcb2288e2 100644 --- a/client/src/Components/inputs/Radio.tsx +++ b/client/src/Components/inputs/Radio.tsx @@ -42,6 +42,9 @@ export const RadioWithDescription = ({ "& .MuiButtonBase-root": { mr: theme.spacing(6), }, + "&:has(.Mui-focusVisible)": { + backgroundColor: theme.palette.action.hover, + }, }} /> ); diff --git a/client/src/Pages/CreateMonitor/index.tsx b/client/src/Pages/CreateMonitor/index.tsx index 95e6d9a29..dd9cdc48f 100644 --- a/client/src/Pages/CreateMonitor/index.tsx +++ b/client/src/Pages/CreateMonitor/index.tsx @@ -293,6 +293,9 @@ const CreateMonitorPage = () => { setCurrentStep((step) => step + 1); } }; + + const isWizardStep = !isEditMode && currentStep < totalSteps - 1; + const handleBack = () => setCurrentStep((step) => step - 1); // Reset the form when the monitor type changes so stale type-specific fields @@ -362,6 +365,13 @@ const CreateMonitorPage = () => { logger.debug("Monitor creation validation errors", errors); }; + const handleFormSubmit = isWizardStep + ? (event: React.FormEvent) => { + event.preventDefault(); + void handleNext(); + } + : handleSubmit(onSubmit, onError); + const notificationOptions = useMemo(() => { return (notifications ?? []).map((n) => ({ ...n, @@ -461,7 +471,7 @@ const CreateMonitorPage = () => { { {!isEditMode && currentStep < totalSteps - 1 ? ( diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts index 33ba66945..b589be3a3 100644 --- a/client/src/Utils/Theme/Theme.ts +++ b/client/src/Utils/Theme/Theme.ts @@ -124,6 +124,14 @@ export const theme = (mode: string, palette: any) => disableTouchRipple: true, disableFocusRipple: true, }, + styleOverrides: { + root: ({ theme }) => ({ + "&.Mui-focusVisible": { + outline: `1px solid ${theme.palette.primary.main}`, + outlineOffset: 2, + }, + }), + }, }, MuiIconButton: { defaultProps: {