[FocusZone] onFocus handler does not update focus alignment #8437
Description
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:
- Enter the value 2 in the textbox and hit Enter
- Noticed that item at index Adds example of primary button with icon #2 is now focused
- Hit the down arrow to navigate to the item below
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.