React-tags: 删除标签后失去对输入的自动对焦

创建于 2020-05-06  ·  10评论  ·  资料来源: i-like-robots/react-tags

预期行为

即使在删除标签后,我也希望关注输入

当前行为

删除添加的标签后,输入失去焦点

重现步骤

重现问题的步骤:

  1. 输入一个国家
  2. 从下拉列表中选择一个国家
  3. 从标签中删除国家
  4. 输入失去自动对焦

截图

1
2
3

您的环境

  • 操作系统:Windows 10.0
  • 浏览器:Chrome [Version 81.0.4044.138 (Official Build) (64-bit)]
  • 组件版本:[5.12.1]
  • 反应版本:[16.13.0]

所有10条评论

从标签中删除国家

在输入为空时按退格键还是单击标签?

抱歉,这是通过按标签上的关闭按钮。 当我用退格键删除它时,自动对焦就在那里

感谢@ekinalcar 提供的额外信息。

因为具有焦点的元素正在被销毁,所以我认为焦点将默认回到窗口......不理想! 我怀疑我们需要记录在标签上着陆时焦点来自哪里,并在移除时将其返回到那里。

感谢您的快速回复@i-like-robots

在带有退格键的删除事件中,即使输入为空(没有标签),焦点也在同一个输入而不是窗口上

@ekinalcar - 我已经能够重新创建这个。 我发现使用鼠标,Firefox 和 Safari 都按预期工作,但在 Chrome 中,即使捕获了单击事件,有时也会丢失光标焦点。

但是,在使用键盘并通过按空格键“单击”标签时总是会失去焦点,这当然不是故意的。 希望修复此问题也能解决 Chrome 中的间歇性问题。

有什么办法可以让这个可选吗? 我有一些在删除标签时触发的不良行为,所以我并不总是希望输入窃取焦点。

你能描述一下你的用例@krozett吗? 我确信有比我目前实施的更好的解决方案,但我认为光标在_某处_有用很重要。 也许我可以添加一个条件,使光标能够在handleDelete/onDelete回调中重新定位。

@i-like-robots 如果我为它创建一个功能请求票,也许会更好。 但基本上我有特定于移动设备的行为,其中用户按下输入,我使用覆盖来隐藏除该输入之外的所有内容,以便为键盘和自动完成建议留出屏幕空间。 当没有元素被聚焦时,整个表单都是可见的。 但是在删除标签时,我不希望输入自动聚焦,因为用户可能只想删除标签而不打算继续在搜索框中输入。 自动对焦导致输入弹回“屏幕控制”模式,这是我不想要的。 只有有意识的专注才能做到这一点。

这是有道理的@krozett - 也许更好的解决方案是记录焦点的来源(在focusin )并在删除标签时将光标返回到那里🤔

@i-like-robots 无论如何,我确信 v6 即将推出,所以也许我应该先看看它的行为,看看它的任何事件处理程序是否会做我需要的。 😉

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

famouspotatoes picture famouspotatoes  ·  5评论

V6
i-like-robots picture i-like-robots  ·  11评论

filippofilip95 picture filippofilip95  ·  4评论

yrik picture yrik  ·  10评论

jraack picture jraack  ·  6评论