rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: workspace menu item focus after renaming

Browse Source
This commit is contained in:
Aman Harwara
2023-05-22 20:42:05 +05:30
parent 7f05b2a748
commit d6843c207f
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
View File

@@ -30,6 +30,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
}) => { }) => {
const [isRenaming, setIsRenaming] = useState(false) const [isRenaming, setIsRenaming] = useState(false)
const [inputValue, setInputValue] = useState(descriptor.label) const [inputValue, setInputValue] = useState(descriptor.label)
const itemRef = useRef<HTMLButtonElement>(null)
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => { useEffect(() => {
@@ -44,7 +45,8 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
const handleInputKeyDown: KeyboardEventHandler = useCallback((event) => { const handleInputKeyDown: KeyboardEventHandler = useCallback((event) => {
if (event.key === KeyboardKey.Enter) { if (event.key === KeyboardKey.Enter) {
inputRef.current?.blur() event.preventDefault()
itemRef.current?.focus()
} }
}, []) }, [])
@@ -55,7 +57,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
return ( return (
<div className="relative"> <div className="relative">
<MenuRadioButtonItem className="overflow-hidden" onClick={onClick} checked={descriptor.primary}> <MenuRadioButtonItem ref={itemRef} className="overflow-hidden" onClick={onClick} checked={descriptor.primary}>
<div className="ml-2 flex w-full items-center justify-between gap-3 overflow-hidden"> <div className="ml-2 flex w-full items-center justify-between gap-3 overflow-hidden">
{!isRenaming && <div className="overflow-hidden text-ellipsis">{descriptor.label}</div>} {!isRenaming && <div className="overflow-hidden text-ellipsis">{descriptor.label}</div>}
{descriptor.primary && !hideOptions && ( {descriptor.primary && !hideOptions && (