onClick not invoked if `onMouseDown` is present and updates state

Let me start by saying that this is a very weird bug. I tried investigating your source code and I could not find anything that would possible lead to this.

It also happens if ouMouseUp, onMouseOver are provided.

Version

2.1.1

This bug happens with or without the babel plugin.

Reproduction

https://codesandbox.io/s/mZz51wGPG

Steps to reproduce

Just add a onMouseDown and onClick together where the onMouseDown update the react state.

const TestDiv = styled.div``;
 <TestDiv onMouseDown={() => this.setState({ hi: true })} onClick={() => alert('hi')}>click me, it does not work</TestDiv>

Expected Behavior

onClick is called

Actual Behavior

onClick is not called

[alansouzati]

FYI. In my case I was doing stuff like this:

import StyledButton from './StyledButton';

const Button = ({ href, ...rest }) => {
  let Tag = StyledButton;
  if (href) {
     Tag = StyledButton.withComponent('a');
  }
  return (
    <Tag {...rest} href={href} />
  );
};

Based on your findings and the documentation, I replaced it to be something like this (which makes totally sense):

import StyledButton from './StyledButton';

const AnchorStyledButton = StyledButton.withComponent('a');

const Button = ({ href, ...rest }) => {
  const Tag = href ? AnchorStyledButton : StyledButton;
  return (
    <Tag {...rest} href={href} />
  );
};

I’m sharing here just in case hits a similar problem 👍

[alansouzati]

nicely done. thanks for the quick follow up.