Browse Source

fix(ui): close comment input popover on Escape key or click away

David Hill 1 month ago
parent
commit
58788192f4
1 changed files with 13 additions and 1 deletions
  1. 13 1
      packages/app/src/pages/session.tsx

+ 13 - 1
packages/app/src/pages/session.tsx

@@ -2059,7 +2059,15 @@ export default function Page() {
                                 >
                                 >
                                   <Icon name="comment" size="small" style={{ color: "var(--white)" }} />
                                   <Icon name="comment" size="small" style={{ color: "var(--white)" }} />
                                 </button>
                                 </button>
-                                <div class="absolute top-[calc(100%+4px)] right-[-8px] z-40 w-[380px] rounded-[14px] bg-surface-raised-stronger-non-alpha shadow-lg-border-base p-2">
+                                <div
+                                  class="absolute top-[calc(100%+4px)] right-[-8px] z-40 w-[380px] rounded-[14px] bg-surface-raised-stronger-non-alpha shadow-lg-border-base p-2"
+                                  onFocusOut={(e) => {
+                                    const target = e.relatedTarget as Node | null
+                                    if (!target || !e.currentTarget.contains(target)) {
+                                      setCommenting(null)
+                                    }
+                                  }}
+                                >
                                   <div class="flex flex-col gap-2">
                                   <div class="flex flex-col gap-2">
                                     <textarea
                                     <textarea
                                       ref={textarea}
                                       ref={textarea}
@@ -2069,6 +2077,10 @@ export default function Page() {
                                       value={draft()}
                                       value={draft()}
                                       onInput={(e) => setDraft(e.currentTarget.value)}
                                       onInput={(e) => setDraft(e.currentTarget.value)}
                                       onKeyDown={(e) => {
                                       onKeyDown={(e) => {
+                                        if (e.key === "Escape") {
+                                          setCommenting(null)
+                                          return
+                                        }
                                         if (e.key !== "Enter") return
                                         if (e.key !== "Enter") return
                                         if (e.shiftKey) return
                                         if (e.shiftKey) return
                                         e.preventDefault()
                                         e.preventDefault()