[BUG] Dynamic SfComponentSelect fails when previous state had more options
Opened this issue · 0 comments
Describe the bug
When there are two SfComponentSelect components, the second one is dynamic and depends on the first one selected value, it will fail on update when the previous state had more options than the current state.
Example: Country and Regions. When a country is selected, the Region options are updated.
How to reproduce
Steps to reproduce the behavior:
- Have two SfComponentSelect on one page: Country and Regions
- The Regions have dynamic options based on the Country's selected value.
- The Country has options [ "Country1", "Country2"]. If the Country1 is selected, the Regions has options ["Region11", "Region12", "Region13"]. If the Country2 is selected, the Regions has options ["Region21", "Region22"].
- Select Country1 - Regions have 3 options
- Select Region11
- Select Country 2 Regions have 2 options
- Try selecting Region21 option
Expected behavior
The option value is selected
Actual behavior
Error: Cannot read properties of undefined (reading 'value')
at VueComponent.set [as index] (SfComponentSelect.vue?89c9:163:1)
at VueComponent.update (SfComponentSelect.vue?89c9:212:1)
Code examples
Sample code (or your configuration) to help us reproduce the bug faster or to understand your use case.
<SfComponentSelect
v-model="form.countryCode"
name="countryCode"
:label="$t('Country')"
required
>
<SfComponentSelectOption
v-for="{isoCode, name} in countries"
:key="isoCode"
:value="isoCode">
{{ name || isoCode }}
</SfComponentSelectOption>
</SfComponentSelect>
<SfComponentSelect
v-model="form.regionCode"
name="regionCode"
:label="$t('State/Province')"
required
<SfComponentSelectOption
v-for="{isoCode, name} in getRegions(form.countryCode)"
:key="isoCode"
:value="isoCode"
>
{{ name || isoCode }}
</SfComponentSelectOption>
</SfComponentSelect>
Screenshots
Additional context
The issue is because of this line of code:
Line of code:
When the previous state has more options, then indexes for the current state will not be updated and the index for the selected value will be undefined.
The possible fix can be next:
replace line:
this.$slots.default.length > this.options.length
with
this.$slots.default.length !== this.options.length