mirror of
https://github.com/overleaf/overleaf.git
synced 2025-03-12 10:23:30 +00:00
Merge pull request #9572 from overleaf/ab-new-project-autofocus
[web] Autofocus on new project name input field GitOrigin-RevId: 4e26b2b5b6d39df942dc8ed293d3e4212028e4b0
This commit is contained in:
parent
3bacd89399
commit
e65ede1d6a
2 changed files with 7 additions and 3 deletions
|
@ -6,6 +6,7 @@ import {
|
|||
getUserFacingMessage,
|
||||
postJSON,
|
||||
} from '../../../../infrastructure/fetch-json'
|
||||
import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
|
||||
|
||||
type NewProjectData = {
|
||||
project_id: string
|
||||
|
@ -25,6 +26,7 @@ type Props = {
|
|||
|
||||
function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
|
||||
const { t } = useTranslation()
|
||||
const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
|
||||
const [projectName, setProjectName] = useState('')
|
||||
const { isLoading, isError, error, runAsync } = useAsync<NewProjectData>()
|
||||
|
||||
|
@ -62,8 +64,10 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
|
|||
{isError && (
|
||||
<Alert bsStyle="danger">{getUserFacingMessage(error)}</Alert>
|
||||
)}
|
||||
<FormControl
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
ref={autoFocusedRef}
|
||||
placeholder={t('project_name')}
|
||||
onChange={handleChangeName}
|
||||
value={projectName}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { useRef, useEffect } from 'react'
|
||||
|
||||
export function useRefWithAutoFocus() {
|
||||
const autoFocusedRef = useRef()
|
||||
export function useRefWithAutoFocus<T extends HTMLElement = any>() {
|
||||
const autoFocusedRef = useRef<T>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (autoFocusedRef.current) {
|
Loading…
Reference in a new issue