summaryrefslogtreecommitdiffhomepage
path: root/gui/src/renderer/components/SimpleInput.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'gui/src/renderer/components/SimpleInput.tsx')
-rw-r--r--gui/src/renderer/components/SimpleInput.tsx34
1 files changed, 22 insertions, 12 deletions
diff --git a/gui/src/renderer/components/SimpleInput.tsx b/gui/src/renderer/components/SimpleInput.tsx
index 3d2a1a63a7..82a561bb7d 100644
--- a/gui/src/renderer/components/SimpleInput.tsx
+++ b/gui/src/renderer/components/SimpleInput.tsx
@@ -19,41 +19,51 @@ interface SimpleInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
}
function SimpleInput(props: SimpleInputProps, ref: React.Ref<HTMLInputElement>) {
- const { onChangeValue, onSubmitValue, ...otherProps } = props;
+ const {
+ onChangeValue,
+ onSubmitValue,
+ onChange: propsOnChange,
+ onSubmit: propsOnSubmit,
+ onKeyPress: propsOnKeyPress,
+ ...otherProps
+ } = props;
const [value, setValue] = useState((props.value as string) ?? '');
const onChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
- otherProps.onChange?.(event);
+ propsOnChange?.(event);
onChangeValue?.(event.target.value);
},
- [otherProps.onChange, onChangeValue],
+ [propsOnChange, onChangeValue],
);
const onSubmit = useCallback(
(event: React.FormEvent<HTMLInputElement>) => {
- otherProps.onSubmit?.(event);
+ propsOnSubmit?.(event);
onSubmitValue?.(value);
},
- [otherProps.onSubmit, onSubmitValue, value],
+ [propsOnSubmit, onSubmitValue, value],
);
const onKeyPress = useCallback(
(event: React.KeyboardEvent<HTMLInputElement>) => {
- props.onKeyPress?.(event);
+ propsOnKeyPress?.(event);
if (event.key === 'Enter') {
onSubmitValue?.(value);
}
},
- [props.onKeyPress, onSubmitValue, value],
+ [propsOnKeyPress, onSubmitValue, value],
);
- const refCallback = useCallback((element: HTMLInputElement | null) => {
- if (element && otherProps.autoFocus) {
- setTimeout(() => element.focus());
- }
- }, []);
+ const refCallback = useCallback(
+ (element: HTMLInputElement | null) => {
+ if (element && otherProps.autoFocus) {
+ setTimeout(() => element.focus());
+ }
+ },
+ [otherProps.autoFocus],
+ );
const combinedRef = useCombinedRefs(refCallback, ref);