diff --git a/gui/src/components/commons/KeybindRecorder.tsx b/gui/src/components/commons/KeybindRecorder.tsx index 0db808cc5..37017bd20 100644 --- a/gui/src/components/commons/KeybindRecorder.tsx +++ b/gui/src/components/commons/KeybindRecorder.tsx @@ -1,6 +1,7 @@ import { useState, forwardRef, useRef } from 'react'; import { Typography } from './Typography'; import classNames from 'classnames'; +import { useFormContext } from 'react-hook-form'; const excludedKeys = [' ', 'SPACE', 'META']; const maxKeybindLength = 4; @@ -10,17 +11,20 @@ export const KeybindRecorder = forwardRef< { keys: string[]; onKeysChange: (v: string[]) => void; + error?: string; } ->(function KeybindRecorder({ keys, onKeysChange }) { +>(function KeybindRecorder({ keys, onKeysChange, error }) { const [localKeys, setLocalKeys] = useState(keys); const [isRecording, setIsRecording] = useState(false); const [oldKeys, setOldKeys] = useState([]); const [invalidSlot, setInvalidSlot] = useState(null); - const [showError, setShowError] = useState(false); const [errorText, setErrorText] = useState(''); const inputRef = useRef(null); const displayKeys = isRecording ? localKeys : keys; const activeIndex = isRecording ? displayKeys.length : -1; + const displayError = errorText || error; + + const { clearErrors } = useFormContext(); const handleKeyDown = (e: React.KeyboardEvent) => { e.preventDefault(); @@ -33,7 +37,6 @@ export const KeybindRecorder = forwardRef< if (errorMsg) { setErrorText(errorMsg); setInvalidSlot(activeIndex); - setShowError(true); setTimeout(() => { setInvalidSlot(null); }, 350); @@ -41,7 +44,6 @@ export const KeybindRecorder = forwardRef< } if (displayKeys.length < maxKeybindLength) { - setShowError(false); const updatedKeys = [...displayKeys, key]; setLocalKeys(updatedKeys); onKeysChange(updatedKeys); @@ -53,14 +55,14 @@ export const KeybindRecorder = forwardRef< const handleOnBlur = () => { setIsRecording(false); - setShowError(false); - if (displayKeys.length < maxKeybindLength - 2) { + if (displayKeys.length < maxKeybindLength - 2 || error) { onKeysChange(oldKeys); setLocalKeys(oldKeys); } }; const handleOnFocus = () => { + clearErrors('keybinds'); const initialKeys: string[] = []; setOldKeys(keys); setLocalKeys(initialKeys); @@ -107,9 +109,9 @@ export const KeybindRecorder = forwardRef< })} - {showError && ( + {displayError && (
- {errorText} + {`${errorText} ${error}`}
)} diff --git a/gui/src/components/commons/KeybindRecorderModal.tsx b/gui/src/components/commons/KeybindRecorderModal.tsx index 6ae94620f..af0acba26 100644 --- a/gui/src/components/commons/KeybindRecorderModal.tsx +++ b/gui/src/components/commons/KeybindRecorderModal.tsx @@ -1,5 +1,5 @@ import { BaseModal } from './BaseModal'; -import { Controller, Control, UseFormResetField } from 'react-hook-form'; +import { Controller, Control, useFormContext } from 'react-hook-form'; import { KeybindRecorder } from './KeybindRecorder'; import { Typography } from './Typography'; import { Button } from './Button'; @@ -10,26 +10,31 @@ export function KeybindRecorderModal({ id, control, name, - resetField, isVisisble, onClose, onUnbind, + onSubmit, }: { id?: string; control: Control; name: string; - resetField: UseFormResetField; isVisisble: boolean; onClose: () => void; onUnbind: () => void; + onSubmit: () => void; }) { const { l10n } = useLocalization(); const keybindlocalization = 'settings-keybinds_' + id; + const { + formState: { errors }, + resetField, + handleSubmit, + } = useFormContext(); return ( onClose()} + onRequestClose={onClose} appendClasses="w-full max-w-xl" >
@@ -45,6 +50,7 @@ export function KeybindRecorderModal({ keys={field.value ?? []} onKeysChange={field.onChange} ref={field.ref} + error={errors.keybinds?.message as string} /> )} /> @@ -55,7 +61,7 @@ export function KeybindRecorderModal({ variant="tertiary" onClick={() => { resetField(name); - onClose(); + handleSubmit(onSubmit)(); }} />
@@ -71,7 +77,7 @@ export function KeybindRecorderModal({