Styled components seems not pass onTouchTap prop in basic tags

[ShinyLeee]

Version

1.4.3

Reproduction

http://www.webpackbin.com/4JNcGFDKG

Steps to reproduce

Click 4 anchor tags.

Expected Behavior

All anchor tag show alert message box after touchTap or click.

Actual Behavior

The first anchor tag not show alert.

Description

In this reproduction, seems only basic tags can not receive onTouchTap prop.
I am new to styled-components, so if there is something I lost, please tell me.
Thanks!

[jacobp100]

Looking into it, this is a non-standard event that is monkey patched into tags via react-tap-event-plugin. This is an interesting case, because by looking at the code, it seems like there is an (undocumented) API to add these events.

We filter out non-standard attributes for html elements. I think it would be wrong to add this to that list, and doing that wouldn't extend to other events injected in this way.

This is ultimately caused by the same underlying issue that is effecting #403.

If you need a (hacky) workaround, you can do the following,

const A = (props) => <a {...props} />
const StyledLink = styled(A)`
  color: red;
`

<StyledLink onTouchTap={...}>This should work</StyledLink>

[ShinyLeee]

Thanks for your reply, I think the workaround is more suitable in this case after find out the reason.

[jacobp100]

Moving discussion to #439

[plankguy]

I noticed that new React 16.4.0 pointer events aren't in the "non-standard attribute" regex mentioned above. Are there plans to add these in a future release?

The above work-around gets the job done, but i'd like to see built-in support.

[quantizor]

PRs welcome!

…

On Sat, Jun 2, 2018 at 2:11 AM Jeff Waterfall ***@***.***> wrote: I noticed that new React 16.4.0 pointer events <https://reactjs.org/blog/2018/05/23/react-v-16-4.html#pointer-events> aren't in the "non-standard attribute <https://github.com/styled-components/styled-components/blob/master/src/utils/validAttr.js>" regex mentioned above. Are there plans to add these in a future release? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#527 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1r_hMXXTQ-B4Zr2IsR3u-m1iFkJqks5t4iyYgaJpZM4MJp7J> .

[plankguy]

@probablyup Done: #1790