Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CascadeSelect breaks when modelValue doesn't exist in the options #7246

Closed
2 of 4 tasks
ArthurN opened this issue Feb 12, 2025 · 0 comments
Closed
2 of 4 tasks

CascadeSelect breaks when modelValue doesn't exist in the options #7246

ArthurN opened this issue Feb 12, 2025 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@ArthurN
Copy link

ArthurN commented Feb 12, 2025

Describe the bug

CascadeSelect breaks when there is no corresponding option which matches modelValue. Initial render is fine, but errors out when opening the list container:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'some')
    at Proxy.isOptionActive (primevue_cascadeselect.js?v=a2f30ac4:806:36)
    at option (primevue_cascadeselect.js?v=a2f30ac4:563:49)

Triage
In show() method, this line:

this.activeOptionPath = this.$filled ? this.findOptionPathByValue(this.d_value) : this.activeOptionPath;

sets activeOptionPath to undefined, which then ends up breaking later in isSelected:

isSelected(processedOption) {
    return this.activeOptionPath.some((p) => p.key === processedOption.key);
},

I'd be happy to contribute a PR with a little guidance. Should this.activeOptionPath = undefined be an acceptable state? That would mean we'd need a conditional check everywhere it's referenced (isSelected, onOptionChange, onOptionClick, etc). Or, should findOptionPathByValue return [] when no option is found? The latter seems simpler, but it's hard to know all the implications without more sufficient test coverage.

Workaround

Push an option that always matches modelValue. Hide or disable it using pt passthrough if necessary. Seems to work as expected even if that optionValue is a duplicate.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

Lack of test coverage in the codebase

Reproducer

https://stackblitz.com/edit/evp36zku?file=src%2FApp.vue

Environment

Latest version of PV and Vue. Styled mode w/ Tailwind v3.

 "@primeuix/styled": "^0.3.2",
 "@primevue/themes": "^4.2.5",
 "primevue": "^4.2.5",
 "vue": "^3.5.13",

 "tailwindcss": "^3.4.17",
 "tailwindcss-primeui": "^0.3.4",

Vue version

3.5.13 (also reproducible on Stackblitz v3.2.45)

PrimeVue version

4.2.5

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  1. Set modelValue to something that doesn't exist in options
  2. Click on CascadeSelect dropdown

Expected behavior

CascadeSelect dropdown opens with nothing selected.

@ArthurN ArthurN added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 12, 2025
@tugcekucukoglu tugcekucukoglu added this to the 4.3.0 milestone Feb 20, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Feb 20, 2025
@tugcekucukoglu tugcekucukoglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Feb 20, 2025
@tugcekucukoglu tugcekucukoglu self-assigned this Feb 20, 2025
@github-project-automation github-project-automation bot moved this from Review to Done in PrimeVue Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
Status: Done
Development

No branches or pull requests

2 participants