Attribute "tabIndex" should be lowercase

[rivor]

Describe the bug
A clear and concise description of what the bug is.
rename attribute tabIndex to tabindex to prevent dehydration "Attribute "tabIndex" should be lowercase"

To Reproduce
Steps to reproduce the behavior:

1. use CButton component might be others too who use tabIndex attribute
   Expected behavior
   A clear and concise description of what you expected to happen.
   use tabindex instead of tabIndex

[peoray]

@rivor Can you provide more information on this? Is it possible to create a CSB? Also, what do you mean by to prevent dehydration

[rivor]

@rivor Can you provide more information on this? Is it possible to create a CSB? Also, what do you mean by to prevent dehydration

It's what i found on google when i stumbled upon this problem. I'm guessing when you have a lot of incorrect html markups on ssr page load, it just stops working and throws out error. I used this @nuxtjs/html-validator module to find all the wrong markups in my code and it tabIndex was last one i can't fix as it's coming from chakra ui component. It says it's supposed to be without lowercase (which is true) tabindex

and inspecting html, tabIndex is indeed coming from CButton.

and weirdly enough i just noticed that the incorrect markup value for tabindex is only on server side rendering.

on dom inspector everything's fine.

error from that module in console

[codebender828]

Hmmm. First time we're seeing this. It's possible that since we're camelizing some props via SSR, we might have this result during static rendering.

@rivor Kindly share a reproduction via this CSB template. https://codesandbox.io/s/nice-lehmann-kvcru

We'd like to help you find the caus4e. Doesn't seem like a big problem to solve.

[rivor]

@codebender828 i'm not sure how you can inspect SSR rendered html only on codesandbox, but it should be just coming from including <CButton> component and on inspecting SSR html markup (CTRL + U on Chrome to do so) it should give tabIndex there (on client everything's fine). I included Chakra UI from Nuxt itself when installing it which is this versions "@chakra-ui/nuxt": "^0.3.0" .

[codebender828]

Thanks. Will take a look

[codebender828]

Hi! @rivor Included a fix for this in the codesandbox generate in #455 Thanks for helping us catch the issue. Try testing it and give us your feedback

[rivor]

Hello! @codebender828
Yep, this fixes it. Just tested it, thank you!