From 6451b110b956e0fc4765ac951e08b71e11eaa014 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 1 Feb 2023 21:07:04 +0100
Subject: [PATCH] Refactoring to avoid using an element Id for the popup.

---
 src/components/finder/Finder.tsx | 39 ++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/finder/Finder.tsx b/src/components/finder/Finder.tsx
index 34c93fd..b858d7c 100644
--- a/src/components/finder/Finder.tsx
+++ b/src/components/finder/Finder.tsx
@@ -21,11 +21,17 @@ const Finder: Component<Props> = (props) => {
   const [popupContent, setPopupContent] = createSignal(<></>);
   const navigate = useNavigate();
   const [t, { add, locale, dict }] = useI18n();
-  let popup: Overlay | undefined;
+  const [popup, setPopup] = createSignal<Overlay>();
   const searchStringChangeHandler = (event: any) => {
     setSearchString(event.target.value);
   };
 
+  const popupCloseHandler = () => {
+    popup()?.setMap(null);
+  };
+
+  let popupElement: HTMLElement;
+
   const submitHandler = () => {
     let coordinates: Coordinate | undefined = undefined;
     const latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
@@ -60,15 +66,24 @@ const Finder: Component<Props> = (props) => {
 
     if (!!coordinates) {
       setOpen(false);
-      if (popup === undefined) {
-        popup = new Overlay({
-          element: document.getElementById('popup'),
-          positioning: 'center-center',
-        });
+      if (popup() === undefined) {
+        setPopup(
+          new Overlay({
+            element: popupElement,
+            positioning: 'center-center',
+          })
+        );
       }
-      popup.setMap(getMap());
-      popup.setPosition(fromLonLat(coordinates));
-      getMap()?.addOverlay(popup);
+      console.log({
+        caller: 'Finder / submitHandler / popup',
+        searchString: searchString(),
+        coordinates,
+        popup: popup(),
+        popupElement,
+      });
+      popup().setMap(getMap());
+      popup().setPosition(fromLonLat(coordinates));
+      getMap()?.addOverlay(popup());
 
       navigate(
         `/map/${getState().provider}/${coordinates[0]}/${coordinates[1]}/16/${
@@ -78,10 +93,6 @@ const Finder: Component<Props> = (props) => {
     }
   };
 
-  const popupCloseHandler = () => {
-    popup.setMap(null);
-  };
-
   return (
     <>
       <div class={style.control}>
@@ -115,7 +126,7 @@ const Finder: Component<Props> = (props) => {
           <TextField onChange={searchStringChangeHandler} />
         </Box>
       </Dialog>
-      <div id='popup' class={style.ol_popup}>
+      <div class={style.ol_popup} ref={popupElement}>
         <a
           href='#'
           onclick={popupCloseHandler}