关于试图给新打开的Component第一个focusable元素设置focus的问题-阿里云开发者社区

开发者社区> 开发者小助手-bz5> 正文

关于试图给新打开的Component第一个focusable元素设置focus的问题

简介: 关于试图给新打开的Component第一个focusable元素设置focus的问题
+关注继续查看

Requirement from https://github.com/SAP/spartacus/issues/9531


Current

While tabbing through the b2b table component, opening up a new section (on the right) is not making the focus to go to the newly opened section, but rather the focus stays where it was (where we pressed enter).


Expected

After opening up a new section, the focus should go to the first element of the section.

image.png

expected behavior:Unit Detail Component(let’s say component B is opened)


The first focusable element in component B, in this case the Edit button, MUST BE FOCUSED automatically.

image.png

My failed attempt

add this line in unit-details.component.html:

image.png

this approach does not work:

in debugging, although this.firstFocusable is successfully parsed to point to a.link.edit.disabled

image.png

Unfortunately at this timeslot, a tag has “disabled” class set because of line 6:


According to this stackoverflow thread, calling focus method on a disabled element will not work:


only till the time when Unit detail page finishes rendering and its data is loaded successfully, and then I could simply call its native focus() function, and this time it works.


image.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
docker介绍与安装
docker介绍与安装
4 0
go mod 相关的八个命令
该go mod命令用于对模块执行操作。八个go mod命令是:
11 0
JavaScript、PHP、Golang、Haskell、Elixir,哪个才是最佳编程语言?
  在过去的几年里,我有机会尝试了多种不同的编程语言。   我非常喜欢学习不同的语言、方法和范式。我是一个充满好奇心的人,一直对编程语言十分着迷。每种编程语言都是不同的,在本文中,我们来讨论一下以下五大编程语言的优点以及缺点。
6 0
【大数据组件】一篇文章让你快速入门Docker
Docker 是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。 容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。 Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版),我们用社区版就可以了。
17 0
学习go语言国内最全资料链接
就最近和各位大佬认识下来,以前觉得学习go语言,可能资料比较少,可是后来才发现,原来资料并不少,甚至可以说通过大家的努力,go社区已经非常包容且完善了
21 0
使用 Go 语言编写的恶意软件激增 2000%
  近日,网络安全公司 Intezer 发布了 2022 年基于 Go 语言恶意软件的报告。报告指出:恶意软件的开发者已经从 C 和 C++ 逐渐转向 Go 语言,自 2017 年以来,基于 Go 语言的恶意软件数量呈现爆发式增长,增幅超过了 2000%。   自从 2012 年发现了第一个使用 Go 语言编写的恶意软件之后,Go 语言就在恶意软件领域渐渐流行起来了。2019 年 7 月,Palo Alto Networks 发布了一份使用 Go 语言编写的恶意软件分析报告。报告发现,2019 年以前使用 Go 语言编写恶意软件是一件罕见的事情,但到了 2019 年,这种情况每天都会发生,2
6 0
iLogtail 与Filebeat 性能对比
前段时间, iLogtail 阿里千万实例可观测采集器开源,其中介绍了iLogtail采集性能可以达到单核100MB/s,相比开源采集Agent有5-10倍性能优势。很多小伙伴好奇iLogtail具体的性能数据和资源消耗如何,本文将针对目前业界使用度较高且性能相对较优的Agent FileBeat进行对比,测试这两个Agent在不同压力场景下的表现如何。
9 0
数据库中间件 MyCAT源码分析 —— PreparedStatement 重新入门
数据库中间件 MyCAT源码分析 —— PreparedStatement 重新入门
18 0
研发职位到底应该怎么设置?(下)
研发职位到底应该怎么设置?(下)
5 0
Golang中make与new有何区别?
本文主要给大家介绍了Go语言中函数`new`与`make`的使用和区别,关于Go语言中`new`和`make`是内建的两个函数,主要用来创建分配类型内存。在我们定义生成变量的时候,可能会觉得有点迷惑,其实他们的规则很简单,下面我们就通过一些示例说明他们的区别和使用。
8 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载