Emoji-mart navigation items can't clicked the first time

Question

The first time the picker component loaded the navigation items couldn't be clicked until I clicked one of the emoticons.

@observer
export class EmojiPicker extends React.Component<Props> {
  @observable isPickerVisible: boolean;

  handleAddEmoji = (emoji: Emoji): void => {
    this.props.onEmojiSelect(emoji);
  };

  renderPicker = (): React.ReactChild => {
    return (
      <div className={styles.pickerWrapper}>
        <Picker
          perLine={matchesMedia().mobile ? 6 : 9}
          native={true}
          showPreview={false}
          showSkinTones={false}
          color={PRIMARY_COLOR}
          onSelect={this.handleAddEmoji}
          {...this.props}
        />
      </div>
    );
  };

  render(): React.ReactChild {
    const { className } = this.props;

    return (
      <Popover
        content={this.renderPicker()}
        trigger="click"
        placement="bottomRight"
        arrowPointAtCenter
      >
        <Icon name="smile" className={className} />
      </Popover>
    );
  }
}

I use next library for emoji https://github.com/missive/emoji-mart

Answer 1

I had a similar problem. What worked for me is switching the visibility of the popover, from display: none, display: block to visibility: hidden, visibility: visible