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

fix(SelectMenu): filteredOptions might be undefined #1541

Merged
merged 1 commit into from
Mar 20, 2024

Conversation

angsanley
Copy link
Contributor

πŸ”— Linked issue

Resolves #1540

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

In the SelectMenu.vue file, there's this snippet where it checks for filteredOptions.length

<p v-else-if="searchable && query && !filteredOptions.length" :class="uiMenu.option.empty">
  <slot name="option-empty" :query="query">
    No results for "{{ query }}".
  </slot>
</p>
<p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
  <slot name="empty" :query="query">
    No options.
  </slot>
</p>

But because filteredOptions is a computedAsync, there's a possibility that the object itself is still undefined, thus checking for .length will not be possible.

SelectMenu.vue:652 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at SelectMenu.vue:652:52
    at Proxy.renderFnWithContext (vue.js?v=74953c0b:2286:13)
    at y (render.js?v=5a63436d:1:810)
    at A (render.js?v=5a63436d:1:517)
    at Proxy.<anonymous> (combobox.js?v=5a63436d:1:18470)
    at renderComponentRoot (vue.js?v=74953c0b:2345:17)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js?v=74953c0b:7457:46)
    at ReactiveEffect.run (vue.js?v=74953c0b:432:19)
    at instance.update (vue.js?v=74953c0b:7588:17)
    at setupRenderEffect (vue.js?v=74953c0b:7598:5)

To solve this issue we can check whether filteredOptions is undefined or not by using optional chaining.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Co-Authored-By: Sedana Yoga <55230513+sedanayoga@users.noreply.github.com>
@benjamincanac benjamincanac merged commit b0ecac5 into nuxt:dev Mar 20, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants