fix(useFullscreen): isFullscreen handling for mutliple fullscreen e…

…lements (#3000)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useFullscreen/index.ts

@@ -76,6 +76,13 @@ export function useFullscreen(
     ].find(m => (document && m in document) || (targetRef.value && m in targetRef.value)) as any
   })
 
+  const fullscreenElementMethod = [
+    'fullscreenElement',
+    'webkitFullscreenElement',
+    'mozFullScreenElement',
+    'msFullscreenElement',
+  ].find(m => (document && m in document)) as 'fullscreenElement' | undefined
+
   const isSupported = useSupported(() =>
     targetRef.value
     && document
@@ -84,6 +91,12 @@ export function useFullscreen(
     && fullscreenEnabled.value !== undefined,
   )
 
+  const isCurrentElementFullScreen = (): boolean => {
+    if (fullscreenElementMethod)
+      return document?.[fullscreenElementMethod] === targetRef.value
+    return false
+  }
+
   const isElementFullScreen = (): boolean => {
     if (fullscreenEnabled.value) {
       if (document && document[fullscreenEnabled.value] != null) {
@@ -139,7 +152,9 @@ export function useFullscreen(
   }
 
   const handlerCallback = () => {
-    isFullscreen.value = isElementFullScreen()
+    const isElementFullScreenValue = isElementFullScreen()
+    if (!isElementFullScreenValue || (isElementFullScreenValue && isCurrentElementFullScreen()))
+      isFullscreen.value = isElementFullScreenValue
   }
 
   useEventListener(document, eventHandlers, handlerCallback, false)