Textarea AutoComplete wrapped when selecting options by the Enter key

vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

https://antdv.com/

Other

20.27k stars 3.79k forks source link

Textarea AutoComplete wrapped when selecting options by the Enter key #7018

Closed hmilin closed 10 months ago

hmilin commented 1 year ago

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

Version

4.0.1

Environment

Windows, Chrome latest, Vue latest

Reproduction link

https://antdv.com/components/auto-complete#components-auto-complete-demo-custom

Steps to reproduce

type any character
select any option and press the enter key

What is expected?

should not wrapped. Similar to Antd: https://ant.design/~demos/auto-complete-demo-custom

What is actually happening?

wrapped when selecting options by the Enter key

selicens commented 1 year ago

  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
      @press-enter="e => e.preventDefault()"
    />
  </a-auto-complete>

增加一行@press-enter="e => e.preventDefault()"即可解决

hmilin commented 1 year ago

  <a-auto-complete
    v-model:value="value"
    :options="options"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
      @press-enter="e => e.preventDefault()"
    />
  </a-auto-complete>

增加一行@press-enter="e => e.preventDefault()"即可解决

会导致textarea本身的换行功能用不了

kovsu commented 1 year ago

2.x 没有问题 3.x 版本开始有这个问题

😫 找半天没找到到底是哪里的问题

DesignHhuang commented 1 year ago

这个组件逻辑上是没有问题的，原理上你敲了回车，textarea上会切换到第二行，然后下面options中也会更新加上enter(也就是空格，类似下图) 然后在你选择的时候，如果有回车的option(再options中其实是空车)被选中的话，回填到textarea中的时候会带上回车（也就是空行）的。简单来说按回车就是输入，输入就会重新选择提示，就是这么个逻辑。如果不允许空格输入的话，就使用 @selicens 的方式就可以了。 @kovsu 2.x 没有问题是因为在textarea中是不能输入enter的，所以options中没有空格。但是如果在textarea中输入空格的话，options中就会出现enter的效果，选中的话文本在textarea中就会换行。