From bf5ec25af920c37b7095e9b537bc6113fb11fb70 Mon Sep 17 00:00:00 2001
From: TD-fupengfei <103400170+TD-fupengfei@users.noreply.github.com>
Date: Thu, 9 Feb 2023 23:27:26 +0800
Subject: [PATCH] fix:emoji clarification Icon can not work on widget in shadow
 dom (#2240)

* fix:emoji clarification Icon can not work on widget in shadow dom

* fix:emoji clarification Icon can not work on widget in shadow dom
---
 .../src/webchat/components/emoji-picker.jsx   | 21 ++++++++++++-------
 packages/botonic-react/src/webchat/hooks.js   |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/botonic-react/src/webchat/components/emoji-picker.jsx b/packages/botonic-react/src/webchat/components/emoji-picker.jsx
index 5cfdbaa5ab..7217251668 100644
--- a/packages/botonic-react/src/webchat/components/emoji-picker.jsx
+++ b/packages/botonic-react/src/webchat/components/emoji-picker.jsx
@@ -7,13 +7,20 @@ import { ROLES } from '../../constants'
 import { useComponentVisible } from '../hooks'
 import { Icon, IconContainer } from './common'
 
-export const EmojiPicker = props => (
-  <IconContainer role={ROLES.EMOJI_PICKER_ICON}>
-    <div onClick={props.onClick}>
-      <Icon src={LogoEmoji} />
-    </div>
-  </IconContainer>
-)
+export const EmojiPicker = props =>{
+  const onClick = event =>{
+    props.onClick()
+    event.stopPropagation()
+  }
+
+  return (
+    <IconContainer role={ROLES.EMOJI_PICKER_ICON}>
+      <div onClick={onClick}>
+        <Icon src={LogoEmoji} />
+      </div>
+    </IconContainer>
+  )
+} 
 
 const Container = styled.div`
   display: flex;
diff --git a/packages/botonic-react/src/webchat/hooks.js b/packages/botonic-react/src/webchat/hooks.js
index 83abbdea4f..86f6d032c4 100644
--- a/packages/botonic-react/src/webchat/hooks.js
+++ b/packages/botonic-react/src/webchat/hooks.js
@@ -247,7 +247,7 @@ export function useComponentVisible(initialIsVisible, onClickOutside) {
   const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)
   const ref = useRef(null)
   const handleClickOutside = event => {
-    if (ref.current && !ref.current.contains(event.target)) {
+    if (ref.current && !ref.current.contains(event.path[0])) {
       setIsComponentVisible(false)
       onClickOutside()
     }