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

fix: popover closing when renaming file (#950)

Browse Source
This commit is contained in:
Aman Harwara
2022-03-24 22:07:18 +05:30
committed by GitHub
parent 67e0bf0ccf
commit 1bdda366d0
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -1,3 +1,4 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
import { KeyboardKey } from '@/services/ioService'; import { KeyboardKey } from '@/services/ioService';
import { formatSizeToReadableString } from '@standardnotes/filepicker'; import { formatSizeToReadableString } from '@standardnotes/filepicker';
import { IconType, SNFile } from '@standardnotes/snjs'; import { IconType, SNFile } from '@standardnotes/snjs';
@@ -33,6 +34,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
}) => { }) => {
const [fileName, setFileName] = useState(file.name); const [fileName, setFileName] = useState(file.name);
const [isRenamingFile, setIsRenamingFile] = useState(false); const [isRenamingFile, setIsRenamingFile] = useState(false);
const itemRef = useRef<HTMLDivElement>(null);
const fileNameInputRef = useRef<HTMLInputElement>(null); const fileNameInputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
@@ -58,7 +60,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
const handleFileNameInputKeyDown = (event: KeyboardEvent) => { const handleFileNameInputKeyDown = (event: KeyboardEvent) => {
if (event.key === KeyboardKey.Enter) { if (event.key === KeyboardKey.Enter) {
fileNameInputRef.current?.blur(); itemRef.current?.focus();
} }
}; };
@@ -67,7 +69,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
}; };
return ( return (
<div className="flex items-center justify-between p-3"> <div
ref={itemRef}
className="flex items-center justify-between p-3 focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
>
<div className="flex items-center"> <div className="flex items-center">
{getFileIconComponent( {getFileIconComponent(
getIconType(file.mimeType), getIconType(file.mimeType),