mirror of
https://github.com/suitenumerique/meet.git
synced 2026-07-26 11:58:53 +00:00
🐛(fix) close pip menu on item action
close options menu when selecting transcription or
This commit is contained in:
+30
-1
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { RiMoreFill } from '@remixicon/react'
|
||||
import { Box, Button } from '@/primitives'
|
||||
import { css } from '@/styled-system/css'
|
||||
@@ -11,12 +11,41 @@ type PipOptionsMenuProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
// PiP-specific options menu positioned locally above the trigger button.
|
||||
export const PipOptionsMenu = ({
|
||||
wrapperRef,
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
label,
|
||||
}: PipOptionsMenuProps) => {
|
||||
// Close menu when a menu item action completes (e.g., transcription, effects).
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
const doc = wrapperRef.current?.ownerDocument ?? document
|
||||
|
||||
const handleMenuItemClick = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement | null
|
||||
const wrapper = wrapperRef.current
|
||||
if (!wrapper || !target) return
|
||||
|
||||
// Don't close if clicking the trigger button
|
||||
if (wrapper.querySelector('button')?.contains(target)) return
|
||||
|
||||
// Close if clicking a menu item (action will have fired)
|
||||
if (target.closest('[role="menuitem"]')) {
|
||||
// Use requestAnimationFrame to ensure action completes first, without visible delay
|
||||
requestAnimationFrame(() => {
|
||||
setIsOpen(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
doc.addEventListener('click', handleMenuItemClick, true)
|
||||
return () => {
|
||||
doc.removeEventListener('click', handleMenuItemClick, true)
|
||||
}
|
||||
}, [isOpen, setIsOpen, wrapperRef])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
|
||||
Reference in New Issue
Block a user