Shopware 6 sw-number-field: how to set id?

Question

How do i set sw-number-field.id in custom plugin?

By default, the configuration of sw-number-field.id is a design violation .

This is observable at price fields on product detail page:

// sw-number-field.html.twig

<template #sw-field-input="{ identification, error, disabled, size, setFocusClass, removeFocusClass }">
    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
        <input
            :id="identification"

Where does identification come from, or where should to set it?

Answer 1

You can use the name property which will also replace the auto-generated id .

<sw-number-field name="foobar" />
<!-- becomes -->
<input id="foobar" name="foobar" type="text" placeholder="" autocomplete="off">

By default it is set in src/app/component/form/field-base/sw-base-field/index.js

data() {
    return {
        id: utils.createId(),
    };
},

computed: {
    identification() {
        if (this.name) {
            return this.name;
        }

        return `sw-field--${this.id}`;
    },

    //...
}