Input.Search 事件在点击清除图标删除内容时也会触发

[cluyun]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-rc.8

Environment

windows10,new Chrome，vue 3.0.4

Reproduction link

https://2x.antdv.com/components/input-cn/#Input.Search-%E4%BA%8B%E4%BB%B6

Steps to reproduce

a-input-search组件的:allowClear="true"，然后绑定事件@search，当点击清除图标会触发一次事件。我使用的vue3的组合式api。

What is expected?

触发也行，不过要带过来清除后的值。现在给我带过来的清除前的值，导致我的查询现象很怪异，说白了就是bug。

What is actually happening?

点击清除会触发事件，v-model:value绑定过来的值是清除之前的值。

---

检查其他可能与这个相似的bug。

[ajuner]

check ant-design/ant-design#18729
现在触发应该返回的是空字符串吧

[cluyun]

check ant-design/ant-design#18729
现在触发应该返回的是空字符串吧

不是哦，是清除之前的值。我倒是想要他是空字符串啊。我用的是vue3组合式api。如果您方便的话我可以给你远程

[cluyun]

check ant-design/ant-design#18729
现在触发应该返回的是空字符串吧

我现在解决是解决了，不过这样解决也太low了吧。给您看看我的解决方案：
解决前：

<a-input-search
      v-model:value="searchText"
      @search="loadData()"
      class="search-input right-float"
      :allowClear="true"
    >
</a-input-search>

import { ref } from "vue";
const userController = new UserController();
let searchText = ref("");
function loadData(currentPage = 1) {
  userController
    .getList({
      quickText: searchText.value,
      pageNum: currentPage,
      pageSize: pagination.pageSize,
    })
    .then((p) => {
      //显示查询表格代码
    });
}

解决后的代码：

import { ref, nextTick } from "vue";
const userController = new UserController();
let searchText = ref("");
function loadData(currentPage = 1) {
  nextTick().then(() => {
    userController
      .getList({
        quickText: searchText.value,
        pageNum: currentPage,
        pageSize: pagination.pageSize,
      })
      .then((p) => {
        //显示查询表格代码
      });
  });
}

等于是我查询代码必须得用nextTick才行，对于我这种有代码洁癖的人来说简直不能忍啊！！！

[ajuner]

https://codesandbox.io/s/zen-mountain-t9mg7?file=/src/App.vue
检查一下吧

[cluyun]

https://codesandbox.io/s/zen-mountain-t9mg7?file=/src/App.vue
检查一下吧

您再看下，我重现了

[cluyun]

https://codesandbox.io/s/zen-mountain-t9mg7?file=/src/App.vue
检查一下吧

我贴代码给你，你那个太高级了我不会用。

<template>
  <div>
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      style="width: 200px"
      @search="onSearch"
      :allowClear="true"
    />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let searchText = ref("123");
    function onSearch() {
      console.log(searchText.value);
    }
    return {
      value: searchText,
      onSearch,
    };
  },
};
</script>

[ajuner]

在onSearch的回调中使用value

function onSearch(value) {
      console.log(value);
}

[cluyun]

在onSearch的回调中使用value

function onSearch(value) {
      console.log(value);
}

能否让我能像我那样写，你们框架层面能解决吗？

[tangjinzhou]

@ajuner 这个内部改成 先触发 change update:value 再触发 search 就可以满足他的写法了

[sendya]

可以先这样用

<template>
  <div>
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      style="width: 200px"
      @search="onSearch"
      :allowClear="true"
    />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const searchText = ref("123");
    function onSearch(value) {
        userController
            .getList({
              quickText: value,
              pageNum: currentPage,
              pageSize: pagination.pageSize,
            })
            .then((p) => {
              //显示查询表格代码
            });
    }
    return {
      value: searchText,
      onSearch,
    };
  },
};
</script>

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.