fix: popup closes on context menu copy

Author: astandrik

src/components/PDiskPopup/PDiskPopup.tsx

@@ -71,13 +71,24 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
     const info = React.useMemo(() => preparePDiskData(data, nodeHost), [data, nodeHost]);
 
     const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+
     const onMouseLeave = React.useCallback(() => {
         setIsPopupContentHovered(false);
     }, []);
+
     const onMouseEnter = React.useCallback(() => {
         setIsPopupContentHovered(true);
     }, []);
 
+    const onContextMenu = React.useCallback(() => {
+        setIsFocused(true);
+    }, []);
+
+    const onBlur = React.useCallback(() => {
+        setIsFocused(false);
+    }, []);
+
     return (
         <Popup
             contentClassName={b()}
@@ -88,10 +99,13 @@ export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
             offset={[0, 12]}
             onMouseLeave={onMouseLeave}
             onMouseEnter={onMouseEnter}
+            onBlur={onBlur}
             {...props}
-            open={isPopupContentHovered || props.open}
+            open={isPopupContentHovered || props.open || isFocused}
         >
-            <InfoViewer title="PDisk" info={info} size="s" />
+            <div onContextMenu={onContextMenu}>
+                <InfoViewer title="PDisk" info={info} size="s" />
+            </div>
         </Popup>
     );
 };

src/components/VDiskPopup/VDiskPopup.tsx

@@ -138,13 +138,24 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
     const isFullData = isFullVDiskData(data);
 
     const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+
     const onMouseLeave = React.useCallback(() => {
         setIsPopupContentHovered(false);
     }, []);
+
     const onMouseEnter = React.useCallback(() => {
         setIsPopupContentHovered(true);
     }, []);
 
+    const onContextMenu = React.useCallback(() => {
+        setIsFocused(true);
+    }, []);
+
+    const onBlur = React.useCallback(() => {
+        setIsFocused(false);
+    }, []);
+
     const vdiskInfo = React.useMemo(
         () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
         [data, isFullData],
@@ -191,13 +202,16 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
             offset={[0, 12]}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
+            onBlur={onBlur}
             {...props}
-            open={isPopupContentHovered || props.open}
+            open={isPopupContentHovered || props.open || isFocused}
         >
-            {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
-            <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
-            {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
-            {donorsInfo.length > 0 && <InfoViewer title="Donors" info={donorsInfo} size="s" />}
+            <div onContextMenu={onContextMenu}>
+                {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
+                <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
+                {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
+                {donorsInfo.length > 0 && <InfoViewer title="Donors" info={donorsInfo} size="s" />}
+            </div>
         </Popup>
     );
 };