Fixed resolveRoot in external components (#1872)

https://coveord.atlassian.net/browse/JSUI-3392

src/ui/Base/Component.ts

@@ -454,7 +454,14 @@ export class Component extends BaseComponent {
   static resolveRoot(element: HTMLElement): HTMLElement {
     Assert.exists(element);
     const resolvedSearchInterface = Component.resolveBinding(element, SearchInterface);
-    return resolvedSearchInterface ? resolvedSearchInterface.element : document.body;
+    if (resolvedSearchInterface) {
+      return resolvedSearchInterface.element;
+    }
+    const resolvedRootFromParent = Component.findRootInParents(element);
+    if (resolvedRootFromParent) {
+      return resolvedRootFromParent;
+    }
+    return document.body;
   }
 
   static resolveBinding(element: HTMLElement, componentClass: any): BaseComponent {
@@ -495,4 +502,18 @@ export class Component extends BaseComponent {
       input.setAttribute('form', 'coveo-dummy-form');
     });
   }
+
+  private static findRootInParents(element: HTMLElement): HTMLElement | null {
+    const boundComponents = Component.getBoundComponentsForElement(element);
+    for (let i = 0; i < boundComponents.length; i++) {
+      const component = boundComponents[i];
+      if (component instanceof Component) {
+        return component.root;
+      }
+    }
+    if (!element.parentElement) {
+      return null;
+    }
+    return Component.findRootInParents(element.parentElement);
+  }
 }

unitTests/ui/ComponentTest.ts

@@ -155,6 +155,37 @@ export function ComponentTest() {
       });
     });
 
+    describe('the static resolveRoot method', () => {
+      it('resolves the root when called on the root', () => {
+        const searchInterface = Component.resolveRoot(env.root);
+        expect(searchInterface).toEqual(env.root);
+      });
+
+      it('resolves the root when called on a descendant element of the root', () => {
+        const childElement = document.createElement('div');
+        env.root.appendChild(childElement);
+        const descendantElement = document.createElement('div');
+        childElement.appendChild(descendantElement);
+
+        const searchInterface = Component.resolveRoot(descendantElement);
+        expect(searchInterface).toEqual(env.root);
+      });
+
+      it('resolves the root when called on a descendant element of an external component', () => {
+        const element = document.createElement('div');
+        const component = new Component(element, 'test', cmp.getBindings());
+
+        const childElement = document.createElement('div');
+        element.appendChild(childElement);
+        const descendantElement = document.createElement('div');
+        childElement.appendChild(descendantElement);
+
+        const searchInterface = Component.resolveRoot(descendantElement);
+        expect(searchInterface).toEqual(env.root);
+        expect(component.element.parentElement).toBeNull();
+      });
+    });
+
     describe('the static resolveBinding method', () => {
       it('when the specified element holds the target class, it resolves the target class', () => {
         const searchInterface = Component.resolveBinding(env.root, SearchInterface);