scale-dropdown-select throws JS error if name attribute contains dot symbol.

[kolianovich]

Scale Version
"@telekom/scale-components": "3.0.0-beta.147",

Framework and version
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.50.1",

Current Behavior

Hello! I use react-form-hook library with scale components to create a complex form structure.

The issue with scale-dropdown-select. If name attribute of this component contanins dot symbol we always get a JS error.

For example, if we have:

            <scale-dropdown-select id="originatorDropdown" label="Absender" name="clearingTicker.originator">
                //dropdowns items
            </scale-dropdown-select>

the next JS error appears after every selection:

DOMException: Failed to execute 'querySelector' on 'Element': 'input[name=clearingTicker.originator]' is not a valid selector.

The issue is in this method of scale-dropdown-select:

    updateInputHidden(value=this.value) {
        this.hostElement.querySelector(`input[name=${this.name}]`).value = value;
    }

In this method nesessary to escape special symbols like dot.

I can't avoid usage of dots in name attributes because this attributes are created by external library (react-form-hook) to map value in complex data structure:

        <scale-dropdown-select id="processorDropdown" label="Empfänger" {...register('clearingTicket.processor')}>
                         //dropdowns items
        </scale-dropdown-select>

For our project it is critical issue and we kindly ask you to fix it asap.

Thanks a lot.

[felix-ico]

hi @kolianovich, thanks for reporting this issue, I'm having a look at it. It's quite strange because i can not reproduce the issue by linking the scale-components locally via yarn link, and in our code the function looks like this:

this.hostElement.querySelector<HTMLInputElement>(input[name="${this.name}"]

https://github.com/telekom/scale/blob/main/packages/components/src/components/dropdown-select/dropdown-select.tsx#L327

note the " double quotation marks around ${this.name} - this is how the function should work as intended. I am guessing that somewhere in the compilation the double quotation mark gets removed somehow, I am investigating...

[kolianovich]

Hi @felix-ico thanks a lot for soon answer.

Could you please to look at this sandbox https://codesandbox.io/p/devbox/qf2kdw

Here is screenshot of the error:

[felix-ico]

hi @kolianovich, please install scale-components version beta.148. We just deployed a release that should take care of this issue.