Bug: Invalid prop: type check failed for prop "modelValue"

[han2-n]

Version

Vben Admin V5

Describe the bug?

[ElementPlus ] When I use the Select component, and the binding value of the Select is an object, enabling the filterable property causes the input to always reflect the bound value as the search box value (string value).

Reproduction

1: Code impl

2: Log result after search on select

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 602.43 MB / 15.85 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\scoop\apps\yarn\current\bin\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.13.2 - ~\AppData\Local\pnpm\pnpm.EXE
    bun: 1.1.18 - ~\AppData\Roaming\npm\bun.CMD
  Browsers:
    Internet Explorer: 11.0.19041.4355

Relevant log output

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mynetfan]

Your version?
ApiSelect need to set component prop value

[han2-n]

Your version? ApiSelect need to set component prop value

version: lastest
ApiSelect is component i define wrapper VbenApiSelect

[mynetfan]

More information is needed to infer the problem

[han2-n]

I found warn issue: because i defineModel must return object
But i think form data binding is still an issue.

U can see flow and code below

• Step 1: define value of Select is an object like element plus guide

  {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'ApiSelect',
      // 对应组件的参数
      componentProps: {
        // 菜单接口转options格式
        afterFetch: (data: { name: string; path: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item,  // change here
          }));
        },
        filterable: true, // change here
        valueKey: 'path', // change here
        // 菜单接口
        api: getAllMenusApi,
      },
      // 字段名
      fieldName: 'api',
      // 界面显示的label
      label: 'ApiSelect',
  }

• Step 2: Select record then submit data, the data will look like the image below
  

• Step 3: Enter input some text to search then click outside or click submit form
  

• So I think the main reason is that it automatically binds the search input data as the value for the form field.

Expect result: must like Element plust Option filtering

• When clicking outside, the search text will automatically clear. And the search text data not be binding for the form field.

[han2-n]

More information is needed to infer the problem

This issue occurs in the Select component. I have found that the onInput event in VbenForm seems to be the cause.
So i hot fix like:

 componentProps: {
      onInput: undefined,
 },

However, it is not sufficient when I am integrating it with VbenApiSelect, as the issue happens again.

[han2-n]

@mynetfan when I am integrating it with VbenApiSelect, as the issue happens again.