Avoid to remove tag when pressing backspace on select

[jjalonso]

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

Hi, I have been trying to intercept on keydown and preventDefault / stopPropagation / return false but nothing works, I think it will be a great feature.

What problem does this feature solve?

Avoid tag remove when pressing backspace on select, some users will not wish it

What does the proposed API look like?

removeOnBackspace={false|true}

[mattwalter91]

Any update on this one, or maybe a workaround?

[boolak]

How to avoid tag remove when pressing backspace?

[wilbooorn]

Facing this problem as well. Any updates?

[galisandlerfed]

Me too... Even a workaround will do...

[SamKirkland]

Proposed api:

type RemoveMode = "focus" | "tagClose";

<Select mode="tags" removeMode={RemoveMode[] | undefined}>

// You can only remove a item by pressing delete. Before the item is removed the tag that is about to be removed is focused so the user has some warning. No close icon appears within each tag
<Select mode="tags" removeMode={["focus"]}>

// A close icon appears within each tag, backspace does nothing once search text has been removed
<Select mode="tags" removeMode={["tagClose"]}>

// You don't want the user to be able to remove items via backspace OR close X. The only way to remove a item is by unselecting it within the dropdown UI
<Select mode="tags" removeMode={undefined}>

// A close icon appears within each tag. Backspace focus/delete also works (this would be the default to match today's)
<Select mode="tags" removeMode={["focus", "tagClose"]}>

"tagClose" Shows a close "X" in default tag render "focus" replaces today's functionality, backspace focuses on the tag prior to deletion. Pressing backspace again deletes the tag. (example 1: https://www.jqueryscript.net/demo/Dynamic-Autocomplete-Tag-Input-Plugin-For-jQuery-Tokenize2/, example 2: https://blueprintjs.com/docs/#select/multi-select)

[AbhayShiro]

Try this friends:

document.getElementsByClassName("ant-select-search__field")[0].addEventListener("keydown", (e) => {
    //I am checking if backspace is pressed and if current input field (used in search) has got no value
    if (e.keyCode == 8 && e.target.value == ""){
        e.stopPropagation()
    }
})

This is done considering that my current page has only one Antd select.

If u want a very specific element select then I recommend u use document.querySelector() and target that specific select.

document.querySelector("div.avatar-dropdown.ant-select.ant-select-enabled > div > div > ul > li.ant-select-search.ant-select-search--inline > div > input").addEventListener("keydown", (e) => {
    if (e.keyCode == 8 && e.target.value == ""){
        e.stopPropagation()
    }
})

[silif]

maybe css .ant-select-selection--multiple .ant-select-search--inline .ant-select-search__field{ display: none; } can solve this problem

[nabramow]

Also would be interested in a way to handle this

[onesinghashish]

Any progress on this issue? Is there a solution supported by component api rather than workarounds?

[onesinghashish]

@afc163 I would add api: keyboard: boolean | (event) => boolean?

IMO, the issue is that search text should not be coupled with selected tags at all. so even if a user presses keydown on search box and reached empty string, the event should stop there and not affect tags at all. I am not sure if the current behavior is intentional or a bug.If it is a bug, then component api may not need the change. If its a feature, then prop name should be more meaningful like 'removeTagOnDelete: Boolean' and for custom event handling there should be another prop 'onSearchBoxKeyDown: (event) => void'

[kerm1it]

@afc163 I would add api: keyboard: boolean | (event) => boolean?

IMO, the issue is that search text should not be coupled with selected tags at all. so even if a user presses keydown on search box and reached empty string, the event should stop there and not affect tags at all. I am not sure if the current behavior is intentional or a bug.If it is a bug, then component api may not need the change. If its a feature, then prop name should be more meaningful like 'removeTagOnDelete: Boolean' and for custom event handling there should be another prop 'onSearchBoxKeyDown: (event) => void'

OK，I understand the mistake.

[pranavbadami]

I was able to workaround this issue using @afc163's solution in this issue: https://github.com/ant-design/ant-design/issues/29318

[RealKai42]

I was able to workaround this issue using @afc163's solution in this issue: #29318

Thanks bro！ Save my day！

[justirva09]

I think for a simple way you just can do this:

onInputKeyDown={event => {
   if (event.key === 'Backspace') {
           return event.stopPropagation()
     }
}

After you selected multiple tags on the select component, this won't delete the tag from the backspace key. but still can delete the search value on the select component.

[nipun-threestops]

onKeyDown = {e=>{ if (e.key === 'Backspace') { return e.stopPropagation() }
}}

this worked for me for atnd Input tag

[chakerioto]

  const handleKeyPress = (e: any) => {
    const inputNode: any = document.querySelector(
      " ...your path > .ant-select-selector > .ant-select-selection-overflow > .ant-select-selection-overflow-item-suffix > .ant-select-selection-search > .ant-select-selection-search-input"
    );

    if (inputNode && !inputNode?.value) {
      inputNode.addEventListener("keydown", (e: any) => {
        if (e.keyCode === 8 && e.target.value === "") {
          e.stopPropagation();
        }
      });
    }
  };