I have a Grid component and use the bi-directional type for navigation.
When setting focus programmatically to an item inside the Grid component, subsequently trying to use keyboard navigation sets focus on the wrong item.
https://codesandbox.io/s/9y5qylv8o4
Repro:
Expected Result
Item below (index: 6) should be focused
Actual Result
Item below is not highlighted. Item at index 4 is selected instead
Reason for issue: _focusAlignment is not updated. When manually focus grid item, _onFocus is called and activeElement is set. Also setFocusAlignment is called, but since _focusAlignment it is not Null (== { left: 0, right: 0 } - initial value) and isHorizontal & isVertical are undefined, the value would not be updated.
if in _onFocus method replace this line with this.setActiveElement(newActiveElement, true) it works OK.
Is there a reason to not use setActiveElement in _onFocus? Also, it correctly updates tabindexes when manually perform focusing on FocuZone items. I had also few issues that when focus items manually, tabindexes are not updated.
P.S. How I can join Microsoft UI Fabric teams channel, I am a Microsoft employee.
I have a Grid component and use the bi-directional type for navigation.
When setting focus programmatically to an item inside the Grid component, subsequently trying to use keyboard navigation sets focus on the wrong item.
https://codesandbox.io/s/9y5qylv8o4
Repro:
Expected Result
Item below (index: 6) should be focused
Actual Result
Item below is not highlighted. Item at index 4 is selected instead
Reason for issue:
_focusAlignmentis not updated. When manually focus grid item,_onFocusis called andactiveElementis set. AlsosetFocusAlignmentis called, but since_focusAlignmentit is not Null (=={ left: 0, right: 0 }- initial value) andisHorizontal&isVerticalare undefined, the value would not be updated.if in
_onFocusmethod replace this line withthis.setActiveElement(newActiveElement, true)it works OK.Is there a reason to not use
setActiveElementin_onFocus? Also, it correctly updates tabindexes when manually perform focusing on FocuZone items. I had also few issues that when focus items manually, tabindexes are not updated.P.S. How I can join Microsoft UI Fabric teams channel, I am a Microsoft employee.