fix(datepicker): focus on multiple instances (#3494)

src/datepicker/datepicker.ts

@@ -31,7 +31,7 @@ import {NgbDateAdapter} from './adapters/ngb-date-adapter';
 import {NgbDateStruct} from './ngb-date-struct';
 import {NgbDatepickerI18n} from './datepicker-i18n';
 import {isChangedDate, isChangedMonth} from './datepicker-tools';
-import {hasClassName} from '../util/util';
+import {grandparent, hasClassName} from '../util/util';
 
 const NGB_DATEPICKER_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -387,7 +387,7 @@ export class NgbDatepicker implements OnDestroy,
       merge(focusIns$, focusOuts$)
           .pipe(
               filter(
-                  ({target, relatedTarget}) =>
+                  ({target, relatedTarget}) => (grandparent(target) !== grandparent(relatedTarget)) ||
                       !(hasClassName(target, 'ngb-dp-day') && hasClassName(relatedTarget, 'ngb-dp-day'))),
               takeUntil(this._destroyed$))
           .subscribe(({type}) => this._ngZone.run(() => this._service.focusVisible = type === 'focusin'));

src/util/util.spec.ts

@@ -1,4 +1,4 @@
-import {toInteger, toString, getValueInRange, isInteger, isString, hasClassName} from './util';
+import {toInteger, toString, getValueInRange, isInteger, isString, hasClassName, grandparent} from './util';
 
 describe('util', () => {
 
@@ -109,4 +109,21 @@ describe('util', () => {
     });
   });
 
+  describe('grandparent', () => {
+
+    it('should return undefined on undefined', () => {
+      const element = undefined;
+      expect(grandparent(element)).toBeFalsy();
+    });
+
+    it('should return undefined on undefined parent', () => {
+      const element = {parentNode: undefined};
+      expect(grandparent(element)).toBeFalsy();
+    });
+
+    it('should return parent of parent', () => {
+      const element = {parentNode: {parentNode: {}}};
+      expect(grandparent(element)).toBe(element.parentNode.parentNode);
+    });
+  });
 });

src/util/util.ts

@@ -73,3 +73,7 @@ export function closest(element: HTMLElement, selector): HTMLElement {
 
   return element.closest(selector);
 }
+
+export function grandparent(element: any) {
+  return element && element.parentNode && element.parentNode.parentNode;
+}