feat(signers-dropdown): improved hiding/displaying logic

src/components/DrawPDFFields/index.tsx

@@ -27,6 +27,10 @@ const DEFAULT_START_SIZE = {
   height: 40
 } as const
 
+interface HideSignersForDrawnField {
+  [key: number]: boolean
+}
+
 interface Props {
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
@@ -41,9 +45,8 @@ export const DrawPDFFields = (props: Props) => {
   const signers = users.filter((u) => u.role === UserRole.signer)
   const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
   const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
-  const [hideSignersForDrawnField, setHideSignersForDrawnField] = useState<{
-    [key: number]: boolean
-  } | null>()
+  const [hideSignersForDrawnField, setHideSignersForDrawnField] =
+    useState<HideSignersForDrawnField>({})
 
   /**
    * Return first pubkey that is present in the signers list
@@ -221,6 +224,12 @@ export const DrawPDFFields = (props: Props) => {
         y: drawingRectangleCoords.y
       }
     })
+
+    // make signers dropdown visible
+    setHideSignersForDrawnField((prev) => ({
+      ...prev,
+      [drawnFieldIndex]: false
+    }))
   }
 
   /**
@@ -342,6 +351,28 @@ export const DrawPDFFields = (props: Props) => {
     event.stopPropagation()
   }
 
+  const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
+    // get native event
+    const { nativeEvent } = event
+
+    //check if event is a keyboard event
+    if (nativeEvent instanceof KeyboardEvent) {
+      // check if event code is Escape
+      if (nativeEvent.code === KeyboardCode.Escape) {
+        // hide all signers dropdowns
+        const newHideSignersForDrawnField: HideSignersForDrawnField = {}
+
+        Object.keys(hideSignersForDrawnField).forEach((key) => {
+          // Object.keys always returns an array of strings,
+          // that is why unknown type is used below
+          newHideSignersForDrawnField[key as unknown as number] = true
+        })
+
+        setHideSignersForDrawnField(newHideSignersForDrawnField)
+      }
+    }
+  }
+
   /**
    * Gets the pointer coordinates relative to a element in the `event` param
    * @param event PointerEvent
@@ -380,6 +411,8 @@ export const DrawPDFFields = (props: Props) => {
             <div
               key={pageIndex}
               className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
+              tabIndex={-1}
+              onKeyDown={(event) => handleEscapeButtonDown(event)}
             >
               <img
                 onPointerMove={(event) => {
@@ -523,30 +556,6 @@ export const DrawPDFFields = (props: Props) => {
                               renderValue={(value) =>
                                 renderCounterpartValue(value)
                               }
-                              onClose={(event: React.SyntheticEvent) => {
-                                // get native event
-                                const { nativeEvent } = event
-
-                                // check if event is a keyboard event
-                                if (nativeEvent instanceof KeyboardEvent) {
-                                  // check if event code is Escape
-                                  if (
-                                    nativeEvent.code === KeyboardCode.Escape
-                                  ) {
-                                    // set hide signers for this DrawnField
-                                    if (hideSignersForDrawnField) {
-                                      setHideSignersForDrawnField((prev) => ({
-                                        ...prev,
-                                        [drawnFieldIndex]: true
-                                      }))
-                                    } else {
-                                      setHideSignersForDrawnField({
-                                        [drawnFieldIndex]: true
-                                      })
-                                    }
-                                  }
-                                }
-                              }}
                             >
                               {signers.map((signer, index) => {
                                 const npub = hexToNpub(signer.pubkey)
@@ -555,6 +564,18 @@ export const DrawPDFFields = (props: Props) => {
                                   npub,
                                   metadata
                                 )
+                                // make current signers dropdown visible
+                                if (
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    undefined ||
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    true
+                                ) {
+                                  setHideSignersForDrawnField((prev) => ({
+                                    ...prev,
+                                    [drawnFieldIndex]: false
+                                  }))
+                                }
 
                                 return (
                                   <MenuItem key={index} value={npub}>

src/components/DrawPDFFields/style.module.scss

@@ -13,6 +13,10 @@
   }
 }
 
+.pdfImageWrapper:focus {
+  outline: none;
+}
+
 .placeholder {
   position: absolute;
   opacity: 0.5;