fix(autocomplete): [autocomplete] fix form validate error when select…

… suggestion option (#2296)
opentiny · Oct 21, 2024 · 80bcc5d · 80bcc5d
1 parent b19efbc
commit 80bcc5d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/packages/renderless/package.json b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.18.4",
+  "version": "3.18.5",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",

diff --git a/packages/renderless/src/autocomplete/index.ts b/packages/renderless/src/autocomplete/index.ts
@@ -109,9 +109,9 @@ export const handleFocus =
 
 export const handleBlur =
   ({ emit, state, dispatch, props }: Pick<IAutoCompleteRenderlessParams, 'emit' | 'state' | 'dispatch' | 'props'>) =>
-  (event) => {
+  () => {
     state.suggestionDisabled = true
-    emit('blur', event)
+    emit('blur')
     if (state.validateEvent) {
       dispatch(FORM_ITEM, FORM_EVENT.blur, [props.modelValue])
     }
@@ -165,17 +165,22 @@ export const select =
     emit,
     nextTick,
     props,
-    state
+    state,
+    dispatch
   }: {
     emit: IAutoCompleteRenderlessParamUtils['emit']
     nextTick: IAutoCompleteRenderlessParamUtils['nextTick']
     props: IAutoCompleteProps
     state: IAutoCompleteState
   }) =>
   (item) => {
-    emit('update:modelValue', item[props.valueKey])
+    const value = item[props.valueKey]
+    emit('update:modelValue', value)
     emit('select', item)
 
+    if (state.validateEvent) {
+      dispatch(FORM_ITEM, FORM_EVENT.change, [value])
+    }
     nextTick(() => {
       state.activated = false
       state.suggestions = []

diff --git a/packages/renderless/src/autocomplete/vue.ts b/packages/renderless/src/autocomplete/vue.ts
@@ -39,7 +39,6 @@ import type {
 
 export const api = [
   'state',
-  'select',
   'suggestionState',
   'getInput',
   'handleChange',
@@ -125,7 +124,7 @@ const initApi = ({
     mounted: mounted({ vm, state, suggestionState }),
     highlight: highlight({ constants, vm, state }),
     handleClear: handleClear({ emit, state }),
-    select: select({ emit, nextTick, props, state }),
+    select: select({ emit, nextTick, props, state, dispatch }),
     watchVisible: watchVisible({ suggestionState, vm }),
     handleChange: handleChange({ api, emit, state, props, dispatch }),
     handleFocus: handleFocus({ api, emit, props, state }),

diff --git a/packages/vue/src/autocomplete/package.json b/packages/vue/src/autocomplete/package.json
@@ -1,26 +1,26 @@
 {
   "name": "@opentiny/vue-autocomplete",
-  "version": "3.18.0",
+  "type": "module",
+  "version": "3.18.1",
   "description": "",
+  "license": "MIT",
+  "sideEffects": false,
   "main": "lib/index.js",
   "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-scrollbar": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
-  "license": "MIT"
-}
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "^0.31.0"
+  }
+}
diff --git a/packages/vue/src/autocomplete/src/pc.vue b/packages/vue/src/autocomplete/src/pc.vue
@@ -24,10 +24,10 @@
       ref="input"
       v-bind="f($props, $attrs)"
       front-clear-icon
+      v-clickoutside="handleBlur"
       @update:modelValue="handleChange"
       :validate-event="false"
       @focus="handleFocus"
-      @blur="handleBlur"
       @clear="handleClear"
       @keydown.up.prevent="highlight(state.highlightedIndex - 1)"
       @keydown.down.prevent="highlight(state.highlightedIndex + 1)"