Events are not propagated down to the Tooltip on mobiles

[marcinkaczor]

🐛 Bug Report

I have noticed, that for more than one tooltip component on a page (tooltips are generated in loop), events are not propagated down to the Tooltip.

As a result, when I have have a Box component around the Tooltip with onClick and I click on tooltip it does not trigger, but only when I remove styled component.

This bug occurs only on mobiles.

Example code:

import React from 'react'
import PropTypes from 'prop-types'
import { styled, Tooltip as SmoothTooltip } from '@smooth-ui/core-em'
import theme from '../Styles/theme'

const Tooltip = ({ children, color, size }) => {
  const StyledIconHelp = styled.div`
    display: inline-block;
    margin-left: 10px;
    color: white;
    background: ${theme[color]};
    cursor: pointer;
    width: ${size}px;
    height: ${size}px;
    text-align: center;
    border-radius: ${size}px;
    font-weight: bold;
  `

  return (
    <StyledIconHelp
      data-test='icon'
    >
      ?
      <SmoothTooltip
        backgroundColor='#333'
        fontSize='1.2em'
        opacity={0.95}
        textAlign='center'
      >
        {children}
      </SmoothTooltip>
    </StyledIconHelp>
  )
}

export default Tooltip

[gregberge]

Hello @marcinkaczor, your styled-component (like all components) must be defined statically. I think it is the source of the bug.

[gregberge]

@marcinkaczor can you please close the issue if it was the source of the bug?

[marcinkaczor]

Yes, @neoziro. This is the source of the bug. Thank you!

I am closing this issue.