Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isInteractiveElement() test for higher level JSX components produces false negatives when components are similarly named to DOM elements #46

Closed
sohkai opened this issue May 19, 2016 · 4 comments
Assignees
Labels

Comments

@sohkai
Copy link
Contributor

sohkai commented May 19, 2016

The test to skip testing higher level JSX components in isInteractiveElement seems to be too broad as it uses .toUpperCase() on the tagName before comparing with the map of DOM elements. This produces false negatives when a custom component is named similarly to a DOM element, but with capitalizations (eg. Button vs. button).

To my knowledge, removing the .toUpperCase() should fix this, but I'm not sure if there are non-React use cases of JSX where, for example, Button might mean the same as button, or if there were any other factors that required relaxing the case-sensitivity.

@beefancohen
Copy link
Contributor

beefancohen commented May 19, 2016

yeah, i think the goal is to use String.normalize but I'm unsure of the support on node and how (if?) it transpiles through babel. Let me make a commit using String.normalize on a separate branch and see how the build works out over different versions of node to see if that's a better approach than uppercasing.

In the meantime, I'd give a more descriptive name to your wrapper component or just use <button /> inline in your higher-order components.

@beefancohen beefancohen self-assigned this May 19, 2016
@ljharb
Copy link
Member

ljharb commented May 19, 2016

This will hit Airbnb too, as we have a Button component - and the difference between Button and button is important. I'm not sure why String.normalize would fix it, but I'd expect prefixing all DOM elements with "dom:" or something might be useful?

@beefancohen
Copy link
Contributor

Yeah, after re-thinking it I agree. About to put in a fix by lower casing all of the dom elements in the JSON file because we can safely assume that low-level DOM elements are all lower-cased.

beefancohen added a commit that referenced this issue May 19, 2016
…es between capitalization subtleties between components and DOM elements

Fixes #46

I think we can safely assume that pure DOM elements will be
lower-cased, especially in the React world.
beefancohen added a commit that referenced this issue May 19, 2016
…#47)

* [fix] - Remove normalization of DOM element checks to avoid differences in capitalization subtleties between components and DOM elements

Fixes #46

I think we can safely assume that pure DOM elements will be
lower-cased, especially in the React world.

* Update docs & CHANGELOG

* 1.2.1
@beefancohen
Copy link
Contributor

v1.2.1 published

Thanks for reporting @sohkai - subtle but important bug to find! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants