关于试图给新打开的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


相关文章
|
5月前
easyui tree 默认选中第一个元素
easyui tree 默认选中第一个元素
|
3月前
|
JavaScript 前端开发 开发者
div 元素的 tab-index 属性被设置为 -1,意味着什么
div 元素的 tab-index 属性被设置为 -1,意味着什么
22 0
access模块学习--类,对象,事件,方法,设置焦点
access模块学习--类,对象,事件,方法,设置焦点
|
JavaScript 前端开发
jquery控制元素的隐藏和显示的几种方法
jquery控制元素的隐藏和显示的几种方法
525 0
|
前端开发
前端 video 元素总是浮在最上方,增加一个 z-index 属性
前端 video 元素总是浮在最上方,增加一个 z-index 属性
|
JavaScript 开发工具 git
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
955 0
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
655 0
|
JavaScript
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
537 0
VUE element-ui之table双表头遍历及筛选自动(回车查询)、重置、关闭dialog重置
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
107 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
|
JavaScript 小程序
小程序在js设置data,循环点击改变tab的颜色
小程序在js设置data,循环点击改变tab的颜色
230 0
小程序在js设置data,循环点击改变tab的颜色