fix: Improve Usability of Adding Options via Return Key for Multi-Select Field (#7450)
Fixes #6602 This is the approach that I followed based on these comments https://github.com/twentyhq/twenty/issues/6602#issuecomment-2356870311, https://github.com/twentyhq/twenty/issues/6602#issuecomment-2330737907 - Create forward ref in `<TextInput>` component - Create ref to select text in parent component `<SettingsDataModelFieldSelectFormOptionRow>` and pass it to `<TextInput>` --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
@ -14,7 +14,8 @@ export type TextInputProps = TextInputV2ComponentProps & {
|
||||
disableHotkeys?: boolean;
|
||||
onInputEnter?: () => void;
|
||||
dataTestId?: string;
|
||||
focused?: boolean;
|
||||
autoFocusOnMount?: boolean;
|
||||
autoSelectOnMount?: boolean;
|
||||
};
|
||||
|
||||
export const TextInput = ({
|
||||
@ -22,7 +23,8 @@ export const TextInput = ({
|
||||
onBlur,
|
||||
onInputEnter,
|
||||
disableHotkeys = false,
|
||||
focused,
|
||||
autoFocusOnMount,
|
||||
autoSelectOnMount,
|
||||
dataTestId,
|
||||
...props
|
||||
}: TextInputProps) => {
|
||||
@ -31,11 +33,17 @@ export const TextInput = ({
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (focused === true) {
|
||||
if (autoFocusOnMount === true) {
|
||||
inputRef.current?.focus();
|
||||
setIsFocused(true);
|
||||
}
|
||||
}, [focused]);
|
||||
}, [autoFocusOnMount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoSelectOnMount === true) {
|
||||
inputRef.current?.select();
|
||||
}
|
||||
}, [autoSelectOnMount]);
|
||||
|
||||
const {
|
||||
goBackToPreviousHotkeyScope,
|
||||
|
||||
Reference in New Issue
Block a user