[Vuejs]-How to create custom dropdown with user input using antdv (Ant Design Vue | Vue 3)?

by

1👍

✅

You can take control over the opening/closing of the select by adding the prop :open. You will need to recreate the standard behavior, i.e. @click: open=true, @change open=false, but then it will by default not close when you click your a-input

I would also suggest only calling addItem on @keypress.enter instead of @change, otherwise it’ll call addItem for every keypress.

updated sandbox

<a-select
  v-model:value="value"
  style="width: 120px"
  :options="items.map((item) => ({ value: item }))"
  :open="open"
  @click="open = true"
  @change="open = false"
>
  <template #dropdownRender="{ menuNode: menu }">
    <v-nodes :vnodes="menu" />
    <a-divider style="margin: 4px 0" />
    <a-input
      v-model:value="inputVal"
      placeholder="add name"
      @keypress.enter="addItem()"
    />
  </template>
</a-select>

setup() {
  const items = ref(["jack", "lucy"]);
  const value = ref("lucy");
  const inputVal = ref("");
  const open = ref(false);

  const addItem = () => {
    items.value.push(inputVal.value);
    inputVal.value = "";
  };
  return {
    items,
    value,
    addItem,
    inputVal,
    open,
  };
}
👤yoduh

0👍

You preventing the default behaviour of the <a> tag. You can move the ‘preventDefault()’ call inside ‘addItem’ and use @focus instead.

<a-input
        placeholder="add name"
        @focus="e => e.preventDefault()"
        @change="addItem"
      />

const addItem = (e) => {
      e.preventDefault();
      console.log("addItem");
      items.value.push(e.target.value);
    };
👤Brett Norby

Leave a comment