diff --git a/web/modals/threads/thread-settings-general-tab.react.js b/web/modals/threads/thread-settings-general-tab.react.js index d694a4b4e..e6e937c05 100644 --- a/web/modals/threads/thread-settings-general-tab.react.js +++ b/web/modals/threads/thread-settings-general-tab.react.js @@ -1,108 +1,115 @@ // @flow import * as React from 'react'; import { type SetState } from 'lib/types/hook-types.js'; import { type ThreadInfo, type ThreadChanges } from 'lib/types/thread-types'; import { firstLine } from 'lib/utils/string-utils'; import Input from '../input.react.js'; import ColorSelector from './color-selector.react.js'; import css from './thread-settings-general-tab.css'; type ThreadSettingsGeneralTabProps = { +inputDisabled: boolean, +threadInfo: ThreadInfo, +threadNamePlaceholder: string, +queuedChanges: ThreadChanges, +setQueuedChanges: SetState, }; function ThreadSettingsGeneralTab( props: ThreadSettingsGeneralTabProps, ): React.Node { const { inputDisabled, threadInfo, threadNamePlaceholder, queuedChanges, setQueuedChanges, } = props; + const nameInputRef = React.useRef(); + + React.useEffect(() => { + nameInputRef.current?.focus(); + }, [inputDisabled]); + const onChangeName = React.useCallback( (event: SyntheticEvent) => { const target = event.currentTarget; setQueuedChanges( Object.freeze({ ...queuedChanges, name: firstLine( target.value !== threadInfo.name ? target.value : undefined, ), }), ); }, [queuedChanges, setQueuedChanges, threadInfo.name], ); const onChangeDescription = React.useCallback( (event: SyntheticEvent) => { const target = event.currentTarget; setQueuedChanges( Object.freeze({ ...queuedChanges, description: target.value !== threadInfo.description ? target.value : undefined, }), ); }, [queuedChanges, setQueuedChanges, threadInfo.description], ); const onChangeColor = React.useCallback( (color: string) => { setQueuedChanges( Object.freeze({ ...queuedChanges, color: color !== threadInfo.color ? color : undefined, }), ); }, [queuedChanges, setQueuedChanges, threadInfo.color], ); return (
Thread name
Description