radix-vue / radix-vue

Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.

Home Page:https://radix-vue.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug][Combobox]: Incorrect `searchTerm` initialization

onmax opened this issue · comments

commented

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.7.2
Vue version: latest
Client OS: Windows 10 19043.1110
Browser: Chrome latest

Link to minimal reproduction

https://codesandbox.io/p/devbox/radix-vue-combobox-forked-96qpn7

Steps to reproduce

  1. You have a combobox working
  2. You add const searchTerm = ref('banana') and you add it to v-model:searchTerm in the ComboboxRoot
  3. When the ComboboxRoot is initialized, it will reset the searchTerm value

Describe the bug

ComboboxRoot will reset searchTerm during initialization(not sure if that's where it happens) meaning that the value that the developer provided as initial value will be thrown away.

I am not sure if this is on purpose or not. That's why I didn't create a PR first. I want to make sure it is actually a bug.

Expected behavior

ComboboxRoot should not reset the searchTerm when the user provides it

Context & Screenshots (if applicable)

No response

commented

Current workaround:

// I know spaghetti code
const searchTerm = ref('')
watch(searchTerm, (newTerm, oldNewTerm) => {
  if (!!oldNewTerm && newTerm === '') {
    searchTerm.value = oldNewTerm
  }
}, { once: true })