Autogenerate SelectField id's based on field name

[mpercec]

Basic information

• Tiller version: v1.13.0
• Module: -

Additional information

• None.

Enhancement description

We are using the SelectField element in a form in order to represent/input a boolean parameter.

The code sample is given here:

<SelectField
        name={fieldName}
        required={parameter.required}
        label={getLabel(parameter)}
        className="col-span-1"
        options={["true", "false"]}
        getOptionLabel={(item) => <Intl name={`value.boolean.${item}`} />}
        hideClearButton={true}
/>

Current behaviour

When the field is rendered it gets an id like downshift-11-toggle-button, where the number 11 is random, so not always the same.

Wanted behaviour

We want the data-testid not to be generated randomly, but based on the field name. For example, ${fieldName}-select-field. That would enable our automated testing code to find these fields via their id, whereas now the field can't be found directly/reliably.

This is the preferred method of finding elements. For example, this is a code sample from Playwright framework: await page.getByTestId('masked-input-validTo').click();

Possible workarounds

As a workaround, we currently try and find the field by looking up the label associated with it and then looking for the toggle-button inside that div. But this is not safe and not preferred.