1
votes

Have this Chat component and inside an input have an en endorsement, inside that i want to have a popover to show and pick emojis, The pop over pops up but the closing functionality does not work.

import React from "react";
import "./styles.css";
import Chat from "./Chat";

export default function App() {
  return (
    <div className="App">
      <Chat />
    </div>
  );
}

Here is a sandbox example of that.

https://codesandbox.io/embed/zealous-maxwell-3115b?fontsize=14&hidenavigation=1&theme=dark

1

1 Answers

1
votes
<InputAdornment position="end">
    <IconButton aria-describedby={id} onClick={handleEmojiClick}>
        <EmojiEmotionsIcon />
    </IconButton>
    <PopOver
       open={open}
       id={id}
       anchorEl={anchorEl}
       setAnchorEl={setAnchorEl}
     />
     <IconButton>
          <SendIcon />
     </IconButton>
</InputAdornment>

Just puted the Popover out of IconButton Component and it is working now.