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

Setting custom data attributes starting with numbers are removed #4772

Closed
mimosa123321 opened this issue Sep 2, 2015 · 8 comments
Closed

Comments

@mimosa123321
Copy link

Setting a custom data attribute such as data-test="" works, whereas data-0="" would fail.
Is this expected behaviour?

@zpao
Copy link
Member

zpao commented Sep 2, 2015

It is currently expected behavior with our code (our regexp: /^(data|aria)-[a-z_][a-z\d_.\-]*$/) but…

I was going to say that it doesn't actually work and data-0 isn't valid according to the spec but I think I would be wrong. It looks like it would be (data-name as a whole must be XML-compatible, not just the name part, so NameStartChar only applies to d in data). Hopefully there was a good reason (like lack of support in IE8) but I don't remember off the top of my head. I knew we discussed a lot around capital letters in there but decided not to support that intentionally.

@syranide - do you remember if we ever talked about numbers?

@syranide
Copy link
Contributor

syranide commented Sep 2, 2015

@zpao Yes you "guys" rejected having it, no significant reason I think other than just keeping it as it was, AFAIK it's completely safe to have (IE8 too). cc @chenglou

@imgarylai
Copy link

Hi, I got same problem when I used this dense.js and tried to set a custom data attribute such as data-2x = "xxx".

Will this behavior be accepted in the future?

@jimfb
Copy link
Contributor

jimfb commented Feb 18, 2016

I'm not sure what dense.js has to do with this issue, but I think this is a duplicate of #2329 which was fixed in #5216 and appears to work on latest http://jsfiddle.net/8pLf9dbw/

@jimfb jimfb closed this as completed Feb 18, 2016
@imgarylai
Copy link

@jimfb thanks for your answer. (I mentioned dense only because I got this problem when i was using it.)

I check your jsfiddle. That's my problem and it looks working great. However, does it work in es5?

Here is my jsfiddle: https://jsfiddle.net/garylai/Lbe2auh3/1/

screen shot 2016-02-18 at 4 57 53 pm

The data-0 attribute didn't show correctly.

@waldreiter
Copy link
Contributor

@imgarylai
The bugfix is in git, that's the version @jimfb's fiddle is using. It will be released in React v15.

@jimfb
Copy link
Contributor

jimfb commented Feb 18, 2016

@cody is correct.

@imgarylai Yes, it works on es5: http://jsfiddle.net/1LgLy7mL/

@imgarylai
Copy link

@cody @jimfb thank you 👍👍👍

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

No branches or pull requests

6 participants