fix: close mobile TTS menu when page is resized or click outside menu

filipedeschamps · Jun 10, 2023 · 417af9c · 417af9c
1 parent 486302c
commit 417af9c
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/pages/interface/components/TextToSpeechControl/index.js b/pages/interface/components/TextToSpeechControl/index.js
@@ -166,9 +166,20 @@ function MobileControls(props = {}) {
     setSpeed(value / 10);
   }
 
+  function closeDropdown() {
+    setDropdownIsOpen(false);
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', closeDropdown);
+  }, []);
+
   return (
     <Box sx={{ display: ['block', 'none'] }}>
       <AnchoredOverlay
+        open={dropdownisOpen}
+        onClose={closeDropdown}
+        onOpen={() => setDropdownIsOpen(true)}
         renderAnchor={(anchorProps) => (
           <ButtonGroup
             {...anchorProps}
@@ -179,8 +190,7 @@ function MobileControls(props = {}) {
             </Button>
             <IconButton size="small" variant="default" title="Conteúdo transformado em áudio" icon={MdHeadphones} />
           </ButtonGroup>
-        )}
-        open={dropdownisOpen}>
+        )}>
         <Box
           sx={{
             display: 'flex',