carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
598 stars 177 forks source link

cv-checkbox it is impossible to pass attribute name="" #1492

Open Skro11-ru opened 11 months ago

Skro11-ru commented 11 months ago

This code

<cv-checkbox
    :label="'someLabel'"
    :value="'someValue'"
    name="someName"
>
</cv-checkbox>

generates the following HTML

<div class="cv-checkbox bx--checkbox-wrapper bx--form-item">
    <input type="checkbox"
           id="uid-c26932a9-2e22-45e1-a5ef-ce867a33254a"
           class="bx--checkbox"
           value="someValue"
    >
    <label
            for="uid-c26932a9-2e22-45e1-a5ef-ce867a33254a"
            class="bx--checkbox-label"
    >
        <span class="bx--checkbox-label-text"> someLabel </span>
    </label>
</div>

Thus, it is impossible to pass the name attribute to the cv-checkbox component, which is quite sad. Is this a bug or am I doing something wrong?

davidnixon commented 11 months ago

That seems like it should work. Checking ...

atleta commented 9 months ago

The reason it doesn't work is because checkMixin (packages/core/src/mixins/check-mixin.js) defines name as a prop and cv-checkbox does not add it to the input field explicitly but uses v-bind="$attrs". However, $attrs only contains the attributes that are not defined as props (which name is) or in the emits option.

See https://github.com/carbon-design-system/carbon-components-vue/blob/13db02cd05b1740e520f13fd9297adba4ee79dc7/packages/core/src/mixins/check-mixin.js#L9 and https://github.com/carbon-design-system/carbon-components-vue/blob/13db02cd05b1740e520f13fd9297adba4ee79dc7/packages/core/src/components/cv-checkbox/cv-checkbox.vue#L9

It's interesting, because it seems that this bug has been there since the very first version of this compoments (March 2019) and it prevents submitting the value of the checkbox from a form.

github-actions[bot] commented 3 weeks ago

This issue has been marked as stale because it has required additional info or a response from the author for over 14 days. When you get the chance, please comment with the additional info requested. Otherwise, this issue will be closed in 14 days.

Skro11-ru commented 3 weeks ago

Эта проблема была помечена как устаревшая, поскольку она требовала дополнительной информации или ответа от автора в течение более 14 дней. Когда у вас будет возможность, пожалуйста, прокомментируйте, указав дополнительную запрошенную информацию. В противном случае этот вопрос будет закрыт через 14 дней.

do you need more information from me?