ant-design Cannot use Arrows Up and Down in textarea inside AutoComplete

kninwzqo  于 22天前  发布在  其他
关注(0)|答案(4)|浏览(17)

Steps to reproduce

  1. Type some text with a couple of line breaks in the textarea .
  2. Try to navigate the textarea with the up and down arrows.
  3. Type two slashes to trigger the autocomplete dropdown.
  4. Use the up and down arrow keys then select an option from the dropdown.
  5. Once dropdown is closed, try to navigate the textarea with the arrow up and down keys.

What is expected?

Navigating the textarea with the up and down arrows when the autocomplete dropdown is closed.

What is actually happening?

The textarea cannot be navigated with the up and down arrows even when the autocomplete dropdown is closed.
| Environment | Info |
| ------------ | ------------ |
| antd | 4.19.5 |
| React | 17.0.2 |
| System | Windows 10 Version 21H2 (OS Build 19044, 1706) |
| Browser | Version 103.0.5060.66 (Official Build) (64-bit) |

mzaanser

mzaanser1#

The problem caused by setOptions([]) in the onSelect method

You clear the expansion after each selection, so you can't select it again next time

The flickering you said when selecting is actually select closing the animation

// bug
const onSelect = () => {
    setOptions([]);
};

demo: https://codesandbox.io/s/templating-in-antd-forked-1qjdet?file=/demo.js:1052-1084

wkftcu5l

wkftcu5l2#

@usersina@xccjk Were you able to resolve this issue? I opened a similar issue to this one #49260 without response.

I've tried using the Mentions component to no avail as that does not allow external control over the open/closed state of the popover.

Do you have any other suggestions or ideas on how one might tackle this problem?

f8rj6qna

f8rj6qna3#

@afc163@xccjk still have this issue +1

vuktfyat

vuktfyat4#

This works in my case.

<AutoComplete>
  <InputTextArea
    onKeyDownCapture={(e) => {
      if (e.key === 'ArrowUp' ||
        e.key === 'ArrowDown'
      )
        e.stopPropagation();
    }}
  />
</AutoComplete>

Looks like the AutoComplete is stealing some keys so it can work properly. But it is not compatible with TextArea.

相关问题