Prevent programmatic focus change from bubbling in handleFocusIn (#835)

Fixes navigator issues related to focus events.

Resolves: rdar://128559835

Author: marinaaisa

src/components/Navigator/NavigatorCard.vue

@@ -817,8 +817,10 @@ export default {
       if (!this.$refs.scroller) return false;
       return this.$refs.scroller.$el.contains(element);
     },
-    handleFocusIn({ target }) {
+    handleFocusIn({ target, relatedTarget }) {
       this.lastFocusTarget = target;
+      // prevent scroll when focus is programmatic
+      if (!relatedTarget) return;
       const positionIndex = this.getChildPositionInScroller(target);
       // if multiplier is 0, the item is inside the scrollarea, no need to scroll
       if (positionIndex === 0) return;

tests/unit/components/Navigator/NavigatorCard.spec.js

@@ -2364,7 +2364,9 @@ describe('NavigatorCard', () => {
 
       const fourthItem = items.at(3);
       setOffsetParent(fourthItem.element, { offsetHeight: SIDEBAR_ITEM_SIZE });
-      fourthItem.trigger('focusin');
+      fourthItem.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       await flushPromises();
       expect(scrollBySpy).toHaveBeenCalledTimes(1);
       expect(scrollBySpy).toHaveBeenCalledWith({
@@ -2375,7 +2377,9 @@ describe('NavigatorCard', () => {
       getChildPositionInScroller.mockReturnValueOnce(-1);
       const firstItem = items.at(0);
       setOffsetParent(firstItem.element, { offsetHeight: SIDEBAR_ITEM_SIZE + 50 });
-      firstItem.trigger('focusin');
+      firstItem.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       await flushPromises();
       expect(scrollBySpy).toHaveBeenCalledTimes(2);
       expect(scrollBySpy).toHaveBeenCalledWith({
@@ -2391,7 +2395,9 @@ describe('NavigatorCard', () => {
       await flushPromises();
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       await wrapper.vm.$nextTick();
       expect(wrapper.vm.lastFocusTarget).toEqual(button.element);
     });
@@ -2401,7 +2407,9 @@ describe('NavigatorCard', () => {
       await flushPromises();
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       await wrapper.vm.$nextTick();
       button.trigger('focusout', {
         relatedTarget: document.body,
@@ -2414,7 +2422,9 @@ describe('NavigatorCard', () => {
       await flushPromises();
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: null,
+      });
       await wrapper.vm.$nextTick();
       button.trigger('focusout', {
         relatedTarget: null,
@@ -2439,7 +2449,9 @@ describe('NavigatorCard', () => {
       // This might happen if it deletes an item, that was in focus
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       const focusSpy = jest.spyOn(button.element, 'focus');
       await flushPromises();
       // now make the component go away
@@ -2464,7 +2476,9 @@ describe('NavigatorCard', () => {
       // This might happen if it deletes an item, that was in focus
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       button.element.focus();
       // move the spy below the manual focus, so we dont count it
       const focusSpy = jest.spyOn(button.element, 'focus');
@@ -2484,7 +2498,9 @@ describe('NavigatorCard', () => {
       // This might happen if it deletes an item, that was in focus
       const button = wrapper.find(NavigatorCardItem).find('button');
       const focusSpy = jest.spyOn(button.element, 'focus');
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       await flushPromises();
       // trigger an update
       wrapper.find(DynamicScroller).vm.$emit('update');
@@ -2500,7 +2516,9 @@ describe('NavigatorCard', () => {
       // This might happen if it deletes an item, that was in focus
       const button = wrapper.find(NavigatorCardItem).find('button');
       // should be focus, but jsdom does not propagate that
-      button.trigger('focusin');
+      button.trigger('focusin', {
+        relatedTarget: document.body,
+      });
       const focusSpy = jest.spyOn(button.element, 'focus');
       await flushPromises();
       // initiate a filter