add ClickAwayListener to SelectEmojiButton
Change-Id: I65bcb3213b37d522beec8d1d6ddbd9c0cbf7e5c8
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index feb5531..e1b82a4 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,5 +1,5 @@
import { QuestionMark } from "@mui/icons-material";
-import { Box, IconButton, Popper } from "@mui/material";
+import { Box, ClickAwayListener, IconButton, Popper } from "@mui/material";
import { styled } from "@mui/material/styles";
import EmojiPicker from "emoji-picker-react";
import React from "react";
@@ -239,26 +239,29 @@
const id = open ? 'simple-popover' : undefined
return (
- <Box>
- <SquareButton
- aria-describedby={id}
- aria-label="select emoji"
- Icon={EmojiIcon}
- onClick={handleOpenEmojiPicker}
- />
- <Popper
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- >
- <EmojiPicker.default
- onEmojiClick={onEmojiClick}
- disableAutoFocus={true}
- disableSkinTonePicker={true}
- native
- />
- </Popper>
- </Box>
+ <ClickAwayListener onClickAway={handleClose}>
+ <Box>
+ <SquareButton
+ aria-describedby={id}
+ aria-label="select emoji"
+ Icon={EmojiIcon}
+ onClick={handleOpenEmojiPicker}
+ />
+ <Popper
+ id={id}
+ open={open}
+ anchorEl={anchorEl}
+ onClose={handleClose}
+ >
+ <EmojiPicker.default
+ onEmojiClick={onEmojiClick}
+ disableAutoFocus={true}
+ disableSkinTonePicker={true}
+ native
+ />
+ </Popper>
+ </Box>
+ </ClickAwayListener>
)
- }
+}
+