Fix popover behavior when open and clicking on trigger

theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx

@@ -55,7 +55,7 @@ const ProjectDetails: React.FC<{
     }, 40000)
   }, [])
 
-  const [tooltip, openExportTooltip] = usePopover(
+  const {node: tooltip, open: openExportTooltip} = usePopover(
     {debugName: 'ProjectDetails', pointerDistanceThreshold: 50},
     () => (
       <ExportTooltip>

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.tsx

@@ -55,7 +55,11 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
     const [contextMenu] = useConnectorContextMenu(props, node)
     const [isDragging] = useDragKeyframe(node, props.editorProps)
 
-    const [popoverNode, openPopover, closePopover] = usePopover(
+    const {
+      node: popoverNode,
+      toggle: togglePopover,
+      close: closePopover,
+    } = usePopover(
       () => {
         const rightDims = val(editorProps.layoutP.rightDims)
 
@@ -89,7 +93,7 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
           isSelected={connected ? connected.selected : false}
           isPopoverOpen={isAggregateEditingInCurvePopover}
           openPopover={(e) => {
-            if (node) openPopover(e, node)
+            if (node) togglePopover(e, node)
           }}
         />
         {popoverNode}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx

@@ -41,7 +41,11 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
 
   const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
 
-  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
+  const {
+    node: popoverNode,
+    toggle: togglePopover,
+    close: closePopover,
+  } = usePopover(
     () => {
       const rightDims = val(props.layoutP.rightDims)
       return {
@@ -83,7 +87,7 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
         connectorLengthInUnitSpace={connectorLengthInUnitSpace}
         {...themeValues}
         openPopover={(e) => {
-          if (node) openPopover(e, node)
+          if (node) togglePopover(e, node)
         }}
       >
         {popoverNode}

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx

@@ -94,11 +94,14 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
   const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
 
   const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
-  const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
+  const {
-    useSingleKeyframeInlineEditorPopover(props)
+    node: inlineEditorPopover,
+    toggle: toggleEditor,
+    isOpen: isInlineEditorPopoverOpen,
+  } = useSingleKeyframeInlineEditorPopover(props)
   const [isDragging] = useDragForSingleKeyframeDot(node, props, {
     onClickFromDrag(dragStartEvent) {
-      openEditor(dragStartEvent, ref.current!)
+      toggleEditor(dragStartEvent, ref.current!)
     },
   })
 
@@ -227,6 +230,8 @@ function useDragForSingleKeyframeDot(
   const propsRef = useRef(props)
   propsRef.current = props
 
+  const {onClickFromDrag} = options
+
   const useDragOpts = useMemo<UseDragOpts>(() => {
     return {
       debugName: 'KeyframeDot/useDragKeyframe',
@@ -282,7 +287,7 @@ function useDragForSingleKeyframeDot(
           return (
             handlers && {
               ...handlers,
-              onClick: options.onClickFromDrag,
+              onClick: onClickFromDrag,
               onDragEnd: (...args) => {
                 handlers.onDragEnd?.(...args)
                 snapToNone()
@@ -338,12 +343,12 @@ function useDragForSingleKeyframeDot(
             snapToNone()
           },
           onClick(ev) {
-            options.onClickFromDrag(ev)
+            onClickFromDrag(ev)
           },
         }
       },
     }
-  }, [])
+  }, [onClickFromDrag])
 
   const [isDragging] = useDrag(node, useDragOpts)
 

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx

@@ -32,7 +32,7 @@ const LengthEditorPopover: React.FC<{
    * Called when user hits enter/escape
    */
   onRequestClose: (reason: string) => void
-}> = ({layoutP, onRequestClose}) => {
+}> = ({layoutP}) => {
   const sheet = useVal(layoutP.sheet)
 
   const fns = useMemo(() => {
@@ -89,7 +89,6 @@ const LengthEditorPopover: React.FC<{
           {...fns}
           isValid={greaterThanZero}
           inputRef={inputRef}
-          onBlur={onRequestClose.bind(null, 'length editor number input blur')}
           nudge={nudge}
         />
       </Container>

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx

@@ -138,19 +138,17 @@ const RENDER_OUT_OF_VIEW_X = -10000
 const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
   const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
   const [isDragging] = useDragBulge(node, {layoutP})
-  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
+  const {
-    {debugName: 'LengthIndicator'},
+    node: popoverNode,
-    () => {
+    toggle: togglePopover,
-      return (
+    close: closePopover,
-        <BasicPopover>
+  } = usePopover({debugName: 'LengthIndicator'}, () => {
-          <LengthEditorPopover
+    return (
-            layoutP={layoutP}
+      <BasicPopover>
-            onRequestClose={closePopover}
+        <LengthEditorPopover layoutP={layoutP} onRequestClose={closePopover} />
-          />
+      </BasicPopover>
-        </BasicPopover>
+    )
-      )
+  })
-    },
-  )
 
   return usePrism(() => {
     const sheet = val(layoutP.sheet)
@@ -191,7 +189,7 @@ const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
               ref={nodeRef}
               // title="Length of the sequence. Drag or click to change."
               onClick={(e) => {
-                openPopover(e, node!)
+                togglePopover(e, node!)
               }}
               {...includeLockFrameStampAttrs('hide')}
             >

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx

@@ -193,19 +193,20 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
 }) => {
   const [thumbRef, thumbNode] = useRefAndState<HTMLElement | null>(null)
 
-  const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
+  const {
-    {debugName: 'Playhead'},
+    node: popoverNode,
-    () => {
+    toggle: togglePopover,
-      return (
+    close: closePopover,
-        <BasicPopover>
+  } = usePopover({debugName: 'Playhead'}, () => {
-          <PlayheadPositionPopover
+    return (
-            layoutP={layoutP}
+      <BasicPopover>
-            onRequestClose={closePopover}
+        <PlayheadPositionPopover
-          />
+          layoutP={layoutP}
-        </BasicPopover>
+          onRequestClose={closePopover}
-      )
+        />
-    },
+      </BasicPopover>
-  )
+    )
+  })
 
   const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
     return {
@@ -236,7 +237,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
             snapToNone()
           },
           onClick(e) {
-            openPopover(e, thumbRef.current!)
+            togglePopover(e, thumbRef.current!)
           },
         }
       },

theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx

@@ -33,7 +33,7 @@ const PlayheadPositionPopover: React.FC<{
    * Called when user hits enter/escape
    */
   onRequestClose: (reason: string) => void
-}> = ({layoutP, onRequestClose}) => {
+}> = ({layoutP}) => {
   const sheet = val(layoutP.sheet)
   const sequence = sheet.getSequence()
 
@@ -80,7 +80,6 @@ const PlayheadPositionPopover: React.FC<{
           {...fns}
           isValid={greaterThanZero}
           inputRef={inputRef}
-          onBlur={onRequestClose.bind(null, 'number input blur')}
           nudge={nudge}
         />
       </Container>

theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx

@@ -74,7 +74,7 @@ function RgbaPropEditor({
     [editingTools],
   )
 
-  const [popoverNode, openPopover] = usePopover(
+  const {node: popoverNode, toggle: togglePopover} = usePopover(
     {debugName: 'RgbaPropEditor'},
     () => (
       <RgbaPopover>
@@ -107,7 +107,7 @@ function RgbaPropEditor({
           rgbaColor={value}
           ref={containerRef}
           onClick={(e) => {
-            openPopover(e, containerRef.current)
+            togglePopover(e, containerRef.current)
           }}
         />
         <HexInput

theatre/studio/src/toolbars/GlobalToolbar.tsx

@@ -88,7 +88,7 @@ const GlobalToolbar: React.FC = () => {
   const hasUpdates =
     useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates) === true
 
-  const [moreMenu, openMoreMenu] = usePopover(
+  const {node: moreMenu, toggle: toggleMenu} = usePopover(
     () => {
       const triggerBounds = moreMenuTriggerRef.current!.getBoundingClientRect()
       return {
@@ -138,7 +138,7 @@ const GlobalToolbar: React.FC = () => {
         <ToolbarIconButton
           ref={moreMenuTriggerRef}
           onClick={(e) => {
-            openMoreMenu(e, moreMenuTriggerRef.current!)
+            toggleMenu(e, moreMenuTriggerRef.current!)
           }}
         >
           <Ellipsis />

theatre/studio/src/uiComponents/Popover/TooltipWrapper.tsx

@@ -138,7 +138,10 @@ const TooltipWrapper: React.FC<{
     props.onPointerOutside,
   ])
 
-  useOnClickOutside(container, props.onClickOutside ?? noop)
+  useOnClickOutside(
+    [container, props.target ?? null],
+    props.onClickOutside ?? noop,
+  )
 
   return (
     <ArrowContext.Provider value={arrowContextValue}>

theatre/studio/src/uiComponents/Popover/usePopover.tsx

@@ -51,7 +51,13 @@ type Opts = {
 export default function usePopover(
   opts: Opts | (() => Opts),
   render: () => React.ReactElement,
-): [node: React.ReactNode, open: OpenFn, close: CloseFn, isOpen: boolean] {
+): {
+  node: React.ReactNode
+  open: OpenFn
+  close: CloseFn
+  toggle: OpenFn
+  isOpen: boolean
+} {
   const _debug = (...args: any) => {}
 
   // want to make sure that we don't close a popover when dragging something (like a curve editor handle)
@@ -104,6 +110,14 @@ export default function usePopover(
     }
   }, [])
 
+  const toggle = useCallback<OpenFn>((...args) => {
+    if (stateRef.current.isOpen) {
+      close('toggled')
+    } else {
+      open(...args)
+    }
+  }, [])
+
   /**
    * See doc comment on {@link useAutoCloseLockState}.
    * Used to ensure that moving far away from a parent popover doesn't
@@ -146,7 +160,7 @@ export default function usePopover(
     <></>
   )
 
-  return [node, open, close, state.isOpen]
+  return {node, open, close, toggle, isOpen: state.isOpen}
 }
 
 /**

theatre/studio/src/uiComponents/useOnClickOutside.ts

@@ -2,15 +2,24 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {useEffect} from 'react'
 
 export default function useOnClickOutside(
-  container: Element | null,
+  container: Element | null | (Element | null)[],
   onOutside: (e: MouseEvent) => void,
   enabled?: boolean,
+  // Can be used e.g. to prevent unexpected closing-reopening when clicking on a
+  // popover's trigger.
 ) {
   useEffect(() => {
     if (!container || enabled === false) return
 
+    const containers = Array.isArray(container)
+      ? (container.filter((container) => container) as Element[])
+      : [container]
+
     const onMouseDown = (e: MouseEvent) => {
-      if (!e.composedPath().includes(container)) {
+      if (
+        containers.every((container) => !e.composedPath().includes(container))
+      ) {
+        console.log('outside')
         onOutside(e)
       }
     }