src/components/DrawPDFFields/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
+import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
 import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
 import { SigitFile } from '../../utils/file'
@@ -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,6 +45,9 @@ 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<HideSignersForDrawnField>({})
+
   /**
    * Return first pubkey that is present in the signers list
    * @param pubkeys
@@ -217,6 +224,12 @@ export const DrawPDFFields = (props: Props) => {
         y: drawingRectangleCoords.y
       }
     })
+
+    // make signers dropdown visible
+    setHideSignersForDrawnField((prev) => ({
+      ...prev,
+      [drawnFieldIndex]: false
+    }))
   }
 
   /**
@@ -338,6 +351,32 @@ export const DrawPDFFields = (props: Props) => {
     event.stopPropagation()
   }
 
+  /**
+   * Handles Escape button-down event and hides all signers dropdowns
+   * @param event SyntheticEvent event
+   */
+  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
@@ -361,6 +400,7 @@ export const DrawPDFFields = (props: Props) => {
       rect
     }
   }
+
   /**
    * Renders the pdf pages and drawing elements
    */
@@ -375,6 +415,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) => {
@@ -492,62 +534,78 @@ export const DrawPDFFields = (props: Props) => {
                       fileIndex,
                       pageIndex,
                       drawnFieldIndex
-                    ) && (
+                    ) &&
-                      <div
+                      (!hideSignersForDrawnField ||
-                        onPointerDown={handleUserSelectPointerDown}
+                        !hideSignersForDrawnField[drawnFieldIndex]) && (
-                        className={styles.userSelect}
+                        <div
-                      >
+                          onPointerDown={handleUserSelectPointerDown}
-                        <FormControl fullWidth size="small">
+                          className={styles.userSelect}
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                        >
-                          <Select
+                          <FormControl fullWidth size="small">
-                            value={getAvailableSigner(drawnField.counterpart)}
+                            <InputLabel id="counterparts">
-                            onChange={(event) => {
+                              Counterpart
-                              drawnField.counterpart = event.target.value
+                            </InputLabel>
-                              setLastSigner(event.target.value)
+                            <Select
-                              refreshPdfFiles()
+                              value={getAvailableSigner(drawnField.counterpart)}
-                            }}
+                              onChange={(event) => {
-                            labelId="counterparts"
+                                drawnField.counterpart = event.target.value
-                            label="Counterparts"
+                                setLastSigner(event.target.value)
-                            sx={{
+                                refreshPdfFiles()
-                              background: 'white'
+                              }}
-                            }}
+                              labelId="counterparts"
-                            renderValue={(value) =>
+                              label="Counterparts"
-                              renderCounterpartValue(value)
+                              sx={{
-                            }
+                                background: 'white'
-                          >
+                              }}
-                            {signers.map((signer, index) => {
+                              renderValue={(value) =>
-                              const npub = hexToNpub(signer.pubkey)
+                                renderCounterpartValue(value)
-                              const metadata = props.metadata[signer.pubkey]
+                              }
-                              const displayValue = getProfileUsername(
+                            >
-                                npub,
+                              {signers.map((signer, index) => {
-                                metadata
+                                const npub = hexToNpub(signer.pubkey)
-                              )
+                                const metadata = props.metadata[signer.pubkey]
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  metadata
+                                )
+                                // make current signers dropdown visible
+                                if (
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    undefined ||
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    true
+                                ) {
+                                  setHideSignersForDrawnField((prev) => ({
+                                    ...prev,
+                                    [drawnFieldIndex]: false
+                                  }))
+                                }
 
-                              return (
+                                return (
-                                <MenuItem key={index} value={npub}>
+                                  <MenuItem key={index} value={npub}>
-                                  <ListItemIcon>
+                                    <ListItemIcon>
-                                    <AvatarIconButton
+                                      <AvatarIconButton
-                                      src={metadata?.picture}
+                                        src={metadata?.picture}
-                                      hexKey={signer.pubkey}
+                                        hexKey={signer.pubkey}
-                                      aria-label={`account of user ${displayValue}`}
+                                        aria-label={`account of user ${displayValue}`}
-                                      color="inherit"
+                                        color="inherit"
-                                      sx={{
+                                        sx={{
-                                        padding: 0,
+                                          padding: 0,
-                                        '> img': {
+                                          '> img': {
-                                          width: '30px',
+                                            width: '30px',
-                                          height: '30px'
+                                            height: '30px'
-                                        }
+                                          }
-                                      }}
+                                        }}
-                                    />
+                                      />
-                                  </ListItemIcon>
+                                    </ListItemIcon>
-                                  <ListItemText>{displayValue}</ListItemText>
+                                    <ListItemText>{displayValue}</ListItemText>
-                                </MenuItem>
+                                  </MenuItem>
-                              )
+                                )
-                            })}
+                              })}
-                          </Select>
+                            </Select>
-                        </FormControl>
+                          </FormControl>
-                      </div>
+                        </div>
-                    )}
+                      )}
                   </div>
                 )
               })}

src/components/DrawPDFFields/style.module.scss

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

src/pages/create/index.tsx

@@ -21,7 +21,8 @@ import {
   ProfileMetadata,
   SignedEvent,
   User,
-  UserRole
+  UserRole,
+  KeyboardCode
 } from '../../types'
 import {
   encryptArrayBuffer,
@@ -87,7 +88,10 @@ export const CreatePage = () => {
 
   const [userInput, setUserInput] = useState('')
   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
       event.preventDefault()
       handleAddUser()
     }

src/pages/nostr/index.tsx

@@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { AuthController } from '../../controllers'
 import { updateKeyPair, updateLoginMethod } from '../../store/actions'
+import { KeyboardCode } from '../../types'
 import { LoginMethod } from '../../store/auth/types'
 import { hexToBytes } from '@noble/hashes/utils'
 
@@ -52,7 +53,10 @@ export const Nostr = () => {
    * Call login function when enter is pressed
    */
   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
       event.preventDefault()
       login()
     }

src/types/event.ts

@@ -0,0 +1,5 @@
+export enum KeyboardCode {
+  Escape = 'Escape',
+  Enter = 'Enter',
+  NumpadEnter = 'NumpadEnter'
+}

src/types/index.ts

@@ -4,3 +4,4 @@ export * from './nostr'
 export * from './profile'
 export * from './relay'
 export * from './zip'
+export * from './event'