TranscendencePopover closes properly

components/uncap/TranscendencePopover/index.tsx

@@ -17,6 +17,7 @@ interface Props
     HTMLDivElement
   > {
   type: 'character' | 'summon'
+  starRef: React.RefObject<HTMLDivElement>
   open: boolean
   stage: number
   onOpenChange?: (open: boolean) => void
@@ -24,8 +25,9 @@ interface Props
 }
 
 const TranscendencePopover = ({
-  children,
   open: popoverOpen,
+  starRef,
+  children,
   type,
   stage,
   tabIndex,
@@ -45,8 +47,8 @@ const TranscendencePopover = ({
   })
 
   useEffect(() => {
-    if (open) popoverRef.current?.focus()
+    setOpen(popoverOpen)
-  }, [])
+  }, [popoverOpen])
 
   useEffect(() => {
     if (stage) setCurrentStage(stage)
@@ -57,10 +59,6 @@ const TranscendencePopover = ({
     else if (type === 'summon') setBaseLevel(200)
   }, [type])
 
-  useEffect(() => {
-    setOpen(popoverOpen)
-  }, [popoverOpen])
-
   function handleFragmentClicked(newStage: number) {
     setCurrentStage(newStage)
     if (sendValue) sendValue(newStage)
@@ -70,13 +68,33 @@ const TranscendencePopover = ({
     setCurrentStage(newStage)
   }
 
+  function closePopover() {
+    setOpen(false)
+    if (onOpenChange) onOpenChange(false)
+  }
+
+  function handlePointerDownOutside(
+    event: CustomEvent<{ originalEvent: PointerEvent }>
+  ) {
+    const target = event.detail.originalEvent.target as Element
+    if (
+      target &&
+      starRef.current &&
+      target.closest('.TranscendenceStar') !== starRef.current
+    ) {
+      closePopover()
+    }
+  }
+
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
+    <Popover open={open}>
       <PopoverAnchor>{children}</PopoverAnchor>
       <PopoverContent
-        className={styles.transcendence}
+        className="transcendence"
         ref={popoverRef}
         tabIndex={tabIndex}
+        onEscapeKeyDown={closePopover}
+        onPointerDownOutside={handlePointerDownOutside}
       >
         <TranscendenceStar
           className="interactive base"

components/uncap/TranscendenceStar/index.tsx

@@ -20,7 +20,9 @@ interface Props
 
 const NUM_FRAGMENTS = 5
 
-const TranscendenceStar = ({
+const TranscendenceStar = React.forwardRef<HTMLDivElement, Props>(
+  function TranscendenceStar(
+    {
       className,
       interactive,
       stage,
@@ -29,13 +31,16 @@ const TranscendenceStar = ({
       onStarClick,
       onFragmentClick,
       onFragmentHover,
-}: Props) => {
+    }: Props,
+    forwardedRef
+  ) {
     const [visibleStage, setVisibleStage] = useState(0)
     const [currentStage, setCurrentStage] = useState(0)
     const [immutable, setImmutable] = useState(false)
 
     // Classes
     const starClasses = classnames({
+      TranscendenceStar: true,
       [styles.star]: true,
       [styles.immutable]: immutable,
       [styles.empty]: stage === 0,
@@ -59,9 +64,7 @@ const TranscendenceStar = ({
     }, [stage])
 
     function handleClick() {
-    if (onStarClick) {
+      if (onStarClick) onStarClick()
-      onStarClick()
-    }
     }
 
     function handleFragmentClick(index: number) {
@@ -88,6 +91,7 @@ const TranscendenceStar = ({
         className={starClasses}
         onClick={editable ? handleClick : () => {}}
         onMouseLeave={interactive ? handleMouseLeave : () => {}}
+        ref={forwardedRef}
         tabIndex={tabIndex}
       >
         <div className={styles.fragments}>
@@ -110,7 +114,8 @@ const TranscendenceStar = ({
         <i className={baseImageClasses} />
       </div>
     )
-}
+  }
+)
 
 TranscendenceStar.defaultProps = {
   stage: 0,

components/uncap/UncapIndicator/index.tsx

@@ -26,6 +26,8 @@ const UncapIndicator = (props: Props) => {
 
   const [popoverOpen, setPopoverOpen] = useState(false)
 
+  const transcendenceStarRef = React.createRef<HTMLDivElement>()
+
   const classes = classNames(
     {
       [styles.wrapper]: true,
@@ -82,7 +84,11 @@ const UncapIndicator = (props: Props) => {
 
   function sendTranscendenceStage(stage: number) {
     if (props.updateTranscendence) props.updateTranscendence(stage)
-    togglePopover(false)
+    setPopoverOpen(false)
+  }
+
+  function handleStarClicked() {
+    if (props.editable) togglePopover(!popoverOpen)
   }
 
   const transcendence = (i: number) => {
@@ -90,25 +96,27 @@ const UncapIndicator = (props: Props) => {
     return props.type === 'character' || props.type === 'summon' ? (
       <TranscendencePopover
         open={popoverOpen}
-        stage={props.transcendenceStage ? props.transcendenceStage : 0}
+        stage={props.transcendenceStage || 0}
         type={props.type}
         onOpenChange={togglePopover}
         sendValue={sendTranscendenceStage}
-        key={`star_${i}`}
+        key={`popover_${i}_${popoverOpen}`}
+        starRef={transcendenceStarRef}
         tabIndex={tabIndex}
       >
         <TranscendenceStar
           key={`star_${i}`}
-          stage={props.transcendenceStage}
+          stage={props.transcendenceStage || 0}
           editable={props.editable}
           interactive={false}
-          onStarClick={() => togglePopover(true)}
+          ref={transcendenceStarRef}
+          onStarClick={handleStarClicked}
         />
       </TranscendencePopover>
     ) : (
       <TranscendenceStar
         key={`star_${i}`}
-        stage={props.transcendenceStage}
+        stage={props.transcendenceStage || 0}
         editable={props.editable}
         interactive={false}
         tabIndex={tabIndex}