diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 3d1511638..10aca6c6b 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -26,6 +26,7 @@ import { makeStringProp, makeNumericProp, createNamespace, + type ComponentInstance, } from '../utils'; import { cutString, @@ -42,7 +43,11 @@ import { import { cellSharedProps } from '../cell/Cell'; // Composables -import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use'; +import { + useParent, + useEventListener, + CUSTOM_FIELD_INJECTION_KEY, +} from '@vant/use'; import { useId } from '../composables/use-id'; import { useExpose } from '../composables/use-expose'; @@ -145,6 +150,7 @@ export default defineComponent({ }); const inputRef = ref(); + const clearIconRef = ref(); const customValue = ref<() => unknown>(); const { parent: form } = useParent(FORM_KEY); @@ -354,7 +360,7 @@ export default defineComponent({ const onClickRightIcon = (event: MouseEvent) => emit('click-right-icon', event); - const onClear = (event: MouseEvent) => { + const onClear = (event: TouchEvent) => { preventDefault(event); emit('update:modelValue', ''); emit('clear', event); @@ -527,9 +533,9 @@ export default defineComponent({ {renderInput()} {showClear.value && ( )} {renderRightIcon()} @@ -569,6 +575,11 @@ export default defineComponent({ nextTick(adjustTextareaSize); }); + // useEventListener will set passive to `false` to eliminate the warning of Chrome + useEventListener('touchstart', onClear, { + target: computed(() => clearIconRef.value?.$el), + }); + return () => { const disabled = getProp('disabled'); const labelAlign = getProp('labelAlign'); diff --git a/packages/vant/src/field/demo/CustomType.vue b/packages/vant/src/field/demo/CustomType.vue index 9728ca462..24d30352e 100644 --- a/packages/vant/src/field/demo/CustomType.vue +++ b/packages/vant/src/field/demo/CustomType.vue @@ -1,5 +1,6 @@