From a54ca3e1e9926093772763b55b8357dd2e66d3f4 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Sat, 24 Apr 2021 14:59:20 +0200
Subject: [PATCH] refactor(controls): dont render controls immediately closes
 #1051

---
 src/additional-components/Controls/index.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index e56d301a..02ab1cf3 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, HTMLAttributes, FC } from 'react';
+import React, { memo, useCallback, HTMLAttributes, FC, useEffect, useState } from 'react';
 import cc from 'classcat';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -25,8 +25,8 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
 
 export interface ControlButtonProps extends HTMLAttributes<HTMLDivElement> {}
 
-export const ControlButton: FC<ControlButtonProps> = ({ children, className, onClick }) => (
-  <div className={cc(['react-flow__controls-button', className])} onClick={onClick}>
+export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
+  <div className={cc(['react-flow__controls-button', className])} {...rest}>
     {children}
   </div>
 );
@@ -44,6 +44,7 @@ const Controls: FC<ControlProps> = ({
   className,
   children,
 }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
 
@@ -70,6 +71,14 @@ const Controls: FC<ControlProps> = ({
     onInteractiveChange?.(!isInteractive);
   }, [isInteractive, setInteractive, onInteractiveChange]);
 
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <div className={mapClasses} style={style}>
       {showZoom && (