use className since there may be many deck instances

Signed-off-by: Chris Gervang <chris@gervang.com>

Author: chrisgervang

modules/core/src/lib/deck.ts

@@ -1072,7 +1072,9 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
     timeline.play();
     this.animationLoop.attachTimeline(timeline);
 
-    this.eventManager = new EventManager(this.props.parent || this.canvas, {
+    const eventRoot =
+      this.props.parent?.querySelector<HTMLDivElement>('.event-manager-root') || this.canvas;
+    this.eventManager = new EventManager(eventRoot, {
       touchAction: this.props.touchAction,
       recognizers: Object.keys(RECOGNIZERS).map((eventName: string) => {
         // Resolve recognizer settings
@@ -1129,12 +1131,12 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
     this.deckPicker = new DeckPicker(this.device);
 
     const parent = this.props.parent || document.body;
-    const widgetContainer =
+    const widgetParent =
       parent.querySelector<HTMLDivElement>('.deck-widgets-container') || this.canvas?.parentElement;
 
     this.widgetManager = new WidgetManager({
       deck: this,
-      parentElement: widgetContainer
+      parentElement: widgetParent
     });
     this.widgetManager.addDefault(new TooltipWidget());
 

modules/react/src/deckgl.ts

@@ -261,7 +261,7 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
 
     const eventRoot = createElement(
       'div',
-      {key: 'event-manager-root', className: 'event-manager-root', ref: containerRef},
+      {key: 'event-manager-root', className: 'event-manager-root'},
       [canvas, childrenUnderViews]
     );
 
@@ -273,7 +273,7 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
     // Render deck.gl as the last child
     thisRef.control = createElement(
       'div',
-      {id: `${id || 'deckgl'}-wrapper`, style: containerStyle},
+      {id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle},
       [eventRoot, widgetRoot]
     );
   }