Fixed # 599 Column level tag window needs to be manually closed before another column tag dialog to open (#700)

.
This commit is contained in:
Sachin Chaurasiya 2021-10-08 12:00:26 +05:30 committed by GitHub
parent 3dddc084c6
commit 562e7abff0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -42,6 +42,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
const [newTag, setNewTag] = useState<string>('');
const [hasFocus, setFocus] = useState<boolean>(false);
const inputRef = useRef<HTMLInputElement>(null);
const node = useRef<HTMLDivElement>(null);
// const [inputWidth, setInputWidth] = useState(INPUT_COLLAPED);
// const [inputMinWidth, setInputMinWidth] = useState(INPUT_AUTO);
@ -153,11 +154,31 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
return getTagsContainer(tag, index);
}
};
const handleClick = (e: MouseEvent) => {
if (node?.current?.contains(e.target as Node)) {
return;
} else {
e.stopPropagation();
handleCancel(e as unknown as React.MouseEvent<HTMLElement, MouseEvent>);
}
};
useEffect(() => {
setTags(selectedTags);
}, [selectedTags]);
useEffect(() => {
if (editable) {
document.addEventListener('mousedown', handleClick);
} else {
document.removeEventListener('mousedown', handleClick);
}
return () => {
document.removeEventListener('mousedown', handleClick);
};
}, [editable]);
return (
<div
className={classNames(
@ -168,6 +189,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
{ 'hover:tw-border-main': !hasFocus }
)}
data-testid="tag-conatiner"
ref={node}
onClick={(event) => {
if (editable) {
event.preventDefault();