yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-31 02:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
.
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
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx
View File

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