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
hubtype · Feb 9, 2023 · bf5ec25 · bf5ec25
1 parent 863f88a
commit bf5ec25
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git 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
@@ -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()
     }