React-tags: Losing autofocus on input after deleting tag

Created on 6 May 2020  ·  10Comments  ·  Source: i-like-robots/react-tags

Expected behavior

I am expecting a focus on the input even after I delete a tag

Current behavior

Input is losing focus after I delete an added tag

Steps to Reproduce

Steps to reproduce the problem:

  1. type a country
  2. select a country from the drop down
  3. delete the country from tag
  4. input loses auto focus

Screenshots

1
2
3

Your environment

  • OS: Windows 10.0
  • Browser: Chrome [Version 81.0.4044.138 (Official Build) (64-bit)]
  • Version of the component: [5.12.1]
  • React version: [16.13.0]
bug

All 10 comments

delete the country from tag

By pressing backspace when the input is empty or by clicking the tag?

sorry, It is by pressing the close button on the tag. When I delete it with backspace the auto focus is there

Thanks for the extra info @ekinalcar.

Because the element with focus is being destroyed I assume focus will default back to the window... not ideal! I suspect we'll need to record where focus came from when landing on the tag and return it to there when removed.

Thank you for your quick reply @i-like-robots

On the delete event with backspace, even if the input is empty (without tags) the focus is on the same input instead of the window

Hi @ekinalcar - I have been able to recreate this. I found that with a mouse both Firefox and Safari work consistently as expected but in Chrome the cursor focus is sometimes lost, even though the click event is captured.

However, focus is always lost when using a keyboard and "clicking" on the tags by pressing the space bar which is certainly not intended. Hopefully fixing this will also fix the intermittent issue in Chrome.

Is there any way we could make this optional? I have some undesired behavior that's triggered when deleting a tag, so I don't always want the input to steal back the focus.

Could you describe your use case @krozett ? I'm sure there are better solutions than I have implemented currently but I think it's important that the cursor goes _somewhere_ useful. Perhaps I could add a condition which would enable the cursor to be repositioned in the handleDelete/onDelete callback.

@i-like-robots Maybe it would be better if I created a feature request ticket for it. But basically I have behavior specific to mobile devices, where a user presses on an input and I use an overlay to hide everything but that input, to allow screen space for the keyboard and autocomplete suggestions. When no element is focused, the entire form is visible. But when deleting a tag, I don't want the input to get autofocused, since it's likely the user only wanted to delete the tag and doesn't intend to keep typing in the search box. The autofocus causes the input to pop back into "screen-domination" mode, which I do not want. Only an intentional focus should do this.

That makes sense @krozett - perhaps a better solution would be to record where focus came from (on focusin) and return the cursor to there when the tag is removed 🤔

@i-like-robots At any rate, I'm sure v6 is coming soon, so maybe I should look at the behavior for that first to see if any of its event handlers will do what I need. 😉

Was this page helpful?
0 / 5 - 0 ratings

Related issues

williamsidewalk picture williamsidewalk  ·  4Comments

famouspotatoes picture famouspotatoes  ·  5Comments

yrik picture yrik  ·  4Comments

yrik picture yrik  ·  10Comments

jraack picture jraack  ·  6Comments