From 437a5261e2935fbf07cafc36dd877e3bca759610 Mon Sep 17 00:00:00 2001
From: gpolychronis-amadeus <giorgos.polychronis@amadeus.com>
Date: Fri, 29 Nov 2019 11:28:13 +0100
Subject: [PATCH] fix(datepicker): focus on multiple instances (#3494)

---
 src/datepicker/datepicker.ts |  4 ++--
 src/util/util.spec.ts        | 19 ++++++++++++++++++-
 src/util/util.ts             |  4 ++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/datepicker/datepicker.ts b/src/datepicker/datepicker.ts
index bb6549912c..2e98eb5431 100644
--- a/src/datepicker/datepicker.ts
+++ b/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'));
diff --git a/src/util/util.spec.ts b/src/util/util.spec.ts
index 6e49baa1c2..1d230ae04f 100644
--- a/src/util/util.spec.ts
+++ b/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);
+    });
+  });
 });
diff --git a/src/util/util.ts b/src/util/util.ts
index eb6470dc5c..7d3da23bd6 100644
--- a/src/util/util.ts
+++ b/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;
+}