fix: popover closing when renaming file (#950)

This commit is contained in:
Aman Harwara
2022-03-24 22:07:18 +05:30
committed by GitHub
parent 67e0bf0ccf
commit 1bdda366d0

View File

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