solid-design-system / solid

Monorepo for Union Investment's Solid Design System.
https://solid-design-system.fe.union-investment.de/x.x.x/storybook/
Other
17 stars 3 forks source link

fix: TypeError: o[0] is undefined | "radios[0]" is undefined in sd-radio-group #970

Open clemens-vi opened 2 months ago

clemens-vi commented 2 months ago

I have implemented a radio-group with sd-radio components inside:

<sd-2-11-0-radio-group class="sd-radio-group" name="brand" size="lg" form="" orientation="vertical" data-optional="" data-valid="" data-user-valid="">
    <sd-2-11-0-radio class="sd-radio" data-count="442" data-value="Apple" role="radio" tabindex="-1" aria-disabled="false" aria-checked="false" size="lg">
       Apple <span class="counter">(442)</span>
    </sd-2-11-0-radio>
    <sd-2-11-0-radio class="sd-radio" data-count="746" data-value="Insignia™" role="radio" tabindex="-1" aria-disabled="false" aria-checked="false" size="lg">
        Insignia™ <span class="counter">(746)</span>
    </sd-2-11-0-radio>
    ...
</sd-2-11-0-radio-group>

I get the following javascript error when rendering:

Uncaught (in promise) TypeError: o[0] is undefined
    syncRadioElements radio-group.js:1
    syncRadios radio-group.js:1
    handleEvent solid-element.js:17
    _$AI solid-element.js:17
    p solid-element.js:17
    $ solid-element.js:17
    _$AI solid-element.js:17
    p solid-element.js:17
    $ solid-element.js:17
    _$AI solid-element.js:17
    Do solid-element.js:23
    update solid-element.js:23
    update watch.js:1
    update watch.js:1
    update watch.js:1
    performUpdate solid-element.js:11
    scheduleUpdate solid-element.js:11
    _$ET solid-element.js:11
    requestUpdate solid-element.js:11
    _$Ev solid-element.js:11
    $ solid-element.js:11
    at solid-element.js:23
    bt solid-element.js:28
    I radio-group.js:1
    _clone lit-html.ts:1178
    _commitTemplateResult lit-html.ts:1599
    _$setValue lit-html.ts:1435
    render lit-html.ts:2235
    update lit-element.ts:163
    performUpdate reactive-element.ts:1441
    scheduleUpdate reactive-element.ts:138
    __enqueueUpdate reactive-element.ts:1310
radio-group.js:1:4875

Bildschirmfoto 2024-04-19 um 16 12 40

via dev tools in Chrome, I found the reference to this line in the code: https://github.com/solid-design-system/solid/blob/0056784b52ebbbd112a40340d3282ed5ad55f544/packages/components/src/components/radio-group/radio-group.ts#L254C9-L254C32

Dev Tools: Bildschirmfoto 2024-04-19 um 16 13 53

clemens-vi commented 2 months ago

new finding: the error occurs when there are no child components like "sd-radio".

mariohamann commented 2 months ago

I remember Shoelace having the same issue: https://github.com/shoelace-style/shoelace/commit/eba4a93e4a785db9b5749726e6e244442bb25cdb#diff-441f6408e703b843ce9677f23228c8821671b25a3431a35c99ca7f5a751a258eR124-R131

Do you want to give it a try in a PR? :)