c-form-control -> c-select `id` ends up on select and wrapper-div (breaks label functionality / creates invalid HTML)

[escapedcat]

Describe the bug
https://vue.chakra-ui.com/formcontrol#select-example
Example in docs shows that id is being added twice to generated HTML.

Expected behavior
CSelect warpper div should not have id="country" only the select should have it.

Screenshots

Desktop (please complete the following information):

• OS: OSX
• Browser: Chrome
• Version: 92.0.4515.159 (Official Build) (x86_64)

[Emmanuel Raymond]

Thanks for spotting that out @escapedcat. We'll look into it :)

[Markus Siering]

I think the fix would be rather easy by filtering the data.attrs before spreading them into the CBox here: https://github.com/chakra-ui/chakra-ui-vue/blob/develop/packages/chakra-ui-core/src/CSelect/CSelect.js#L34

I'd open a PR for this if that's okay @peoray?

[Emmanuel Raymond]

Please go ahead @HerrBertling :)

[Markus Siering]

Done :)