Backup_Repos/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr synced 2026-05-08 04:50:56 +02:00
Code Issues Projects Releases Wiki Activity

Refactor: use combined ref instead of useImperativeHandle in TextInput

Browse source 
Replace the TextInputHandle interface and useImperativeHandle with a
combined ref callback that sets both the internal inputRef and the
forwarded ref, per maintainer feedback on PR #8489.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Lonergan 2026-03-28 23:19:30 -07:00 committed by Mark McDowall
parent 278ac98ed1
commit b0928ae60a
No known key found for this signature in database
2 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import Alert from 'Components/Alert';
import TextInput, { TextInputHandle } from 'Components/Form/TextInput';
import TextInput from 'Components/Form/TextInput';
import Icon from 'Components/Icon';
import Button from 'Components/Link/Button';
import Link from 'Components/Link/Link';
@ -22,7 +22,7 @@ function AddNewSeries() {
const { term: initialTerm = '' } = useQueryParams<{ term: string }>();
const hasSeries = useHasSeries();
const [term, setTerm] = useState(initialTerm);
const searchInputRef = useRef<TextInputHandle>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const [isFetching, setIsFetching] = useState(false);
const query = useDebounce(term, term ? 300 : 0);

27
frontend/src/Components/Form/TextInput.tsx
View file

@ -6,7 +6,6 @@ import React, {
SyntheticEvent,
useCallback,
useEffect,
useImperativeHandle,
useRef,
} from 'react';
import { FileInputChanged, InputChanged } from 'typings/inputs';
@ -41,11 +40,7 @@ export interface FileInputProps extends CommonTextInputProps {
onChange: (change: FileInputChanged) => void;
}
export interface TextInputHandle {
focus: () => void;
}
const TextInput = forwardRef<TextInputHandle, TextInputProps | FileInputProps>(
const TextInput = forwardRef<HTMLInputElement, TextInputProps | FileInputProps>(
(
{
className = styles.input,
@ -71,12 +66,18 @@ const TextInput = forwardRef<TextInputHandle, TextInputProps | FileInputProps>(
) => {
const inputRef = useRef<HTMLInputElement>(null);
useImperativeHandle(
ref,
() => ({
focus: () => inputRef.current?.focus(),
}),
[]
const setRef = useCallback(
(node: HTMLInputElement | null) => {
(inputRef as React.MutableRefObject<HTMLInputElement | null>).current =
node;
if (typeof ref === 'function') {
ref(node);
} else if (ref) {
(ref as React.MutableRefObject<HTMLInputElement | null>).current =
node;
}
},
[ref]
);
const selectionTimeout = useRef<ReturnType<typeof setTimeout>>();
@ -171,7 +172,7 @@ const TextInput = forwardRef<TextInputHandle, TextInputProps | FileInputProps>(
return (
<input
ref={inputRef}
ref={setRef}
type={type}
readOnly={readOnly}
autoFocus={autoFocus}