self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Focus notebook title when opening Notebook dialog

Browse Source
This commit is contained in:
Laurent Cozic 2022-01-09 15:30:21 +00:00
parent b92c650f5d
commit 3117133be2
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app-desktop/gui/EditFolderDialog/Dialog.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { useCallback, useState } from 'react'; import { useCallback, useState, useRef, useEffect } from 'react';
import { _ } from '@joplin/lib/locale'; import { _ } from '@joplin/lib/locale';
import DialogButtonRow, { ClickEvent } from '../DialogButtonRow'; import DialogButtonRow, { ClickEvent } from '../DialogButtonRow';
import Dialog from '../Dialog'; import Dialog from '../Dialog';
@ -22,6 +22,7 @@ interface Props {
export default function(props: Props) { export default function(props: Props) {
const [folderTitle, setFolderTitle] = useState(''); const [folderTitle, setFolderTitle] = useState('');
const [folderIcon, setFolderIcon] = useState<FolderIcon>(); const [folderIcon, setFolderIcon] = useState<FolderIcon>();
const titleInputRef = useRef(null);
const isNew = !props.folderId; const isNew = !props.folderId;
@ -41,6 +42,14 @@ export default function(props: Props) {
}); });
}, [props.dispatch]); }, [props.dispatch]);
useEffect(() => {
titleInputRef.current.focus();
setTimeout(() => {
titleInputRef.current.select();
}, 100);
}, []);
const onButtonRowClick = useCallback(async (event: ClickEvent) => { const onButtonRowClick = useCallback(async (event: ClickEvent) => {
if (event.buttonName === 'cancel') { if (event.buttonName === 'cancel') {
onClose(); onClose();
@ -90,7 +99,7 @@ export default function(props: Props) {
<div className="form"> <div className="form">
<div className="form-input-group"> <div className="form-input-group">
<label>{_('Title')}</label> <label>{_('Title')}</label>
<StyledInput type="text" value={folderTitle} onChange={onFolderTitleChange}/> <StyledInput type="text" ref={titleInputRef} value={folderTitle} onChange={onFolderTitleChange}/>
</div> </div>
<div className="form-input-group"> <div className="form-input-group">