feat(Field): add click-input event (#6239)

src/field/README.md

@@ -253,6 +253,7 @@ Field support all native events of input tag
 | blur | Triggered when input loses focus | _event: Event_ |
 | clear | Triggered when click clear icon | _event: Event_ |
 | click | Triggered when click Field | _event: Event_ |
+| click-input `v2.8.1` | Triggered when click input | _event: Event_ |
 | click-left-icon | Triggered when click the left icon of Field | _event: Event_ |
 | click-right-icon | Triggered when click the right icon of Field | _event: Event_ |
 

src/field/README.zh-CN.md

@@ -272,12 +272,13 @@ export default {
 除下列事件外，Field 默认支持 Input 标签所有的原生事件
 
 | 事件                 | 说明                 | 回调参数                       |
-| ---------------- | -------------------- | ------------------------------ |
+| -------------------- | -------------------- | ------------------------------ |
 | input                | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
 | focus                | 输入框获得焦点时触发 | _event: Event_                 |
 | blur                 | 输入框失去焦点时触发 | _event: Event_                 |
 | clear                | 点击清除按钮时触发   | _event: Event_                 |
-| click            | 点击时触发           | _event: Event_                 |
+| click                | 点击 Field 时触发    | _event: Event_                 |
+| click-input `v2.8.1` | 点击输入区域时触发   | _event: Event_                 |
 | click-left-icon      | 点击左侧图标时触发   | _event: Event_                 |
 | click-right-icon     | 点击右侧图标时触发   | _event: Event_                 |
 

src/field/index.js

@@ -113,17 +113,14 @@ export default createComponent({
     },
 
     listeners() {
-      const listeners = {
+      return {
         ...this.$listeners,
-        input: this.onInput,
-        keypress: this.onKeypress,
-        focus: this.onFocus,
         blur: this.onBlur,
+        focus: this.onFocus,
+        input: this.onInput,
+        click: this.onClickInput,
+        keypress: this.onKeypress,
       };
-
-      delete listeners.click;
-
-      return listeners;
     },
 
     labelStyle() {
@@ -337,6 +334,10 @@ export default createComponent({
       this.$emit('click', event);
     },
 
+    onClickInput(event) {
+      this.$emit('click-input', event);
+    },
+
     onClickLeftIcon(event) {
       this.$emit('click-left-icon', event);
     },
@@ -392,7 +393,12 @@ export default createComponent({
 
       if (inputSlot) {
         return (
-          <div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
+          <div
+            class={bem('control', [inputAlign, 'custom'])}
+            onClick={this.onClickInput}
+          >
+            {inputSlot}
+          </div>
         );
       }
 

src/field/test/index.spec.js

@@ -17,7 +17,25 @@ test('click event', () => {
   expect(wrapper.emitted('click')[0][0]).toBeTruthy();
 });
 
-test('click icon event', () => {
+test('click-input event', () => {
+  const wrapper = mount(Field);
+
+  wrapper.find('input').trigger('click');
+  expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
+});
+
+test('click-input event when using input slot', () => {
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      input: () => 'Custom Input',
+    },
+  });
+
+  wrapper.find('.van-field__control').trigger('click');
+  expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
+});
+
+test('click-icon event', () => {
   const wrapper = mount(Field, {
     propsData: {
       value: 'a',