feat: suppress on-object formatting from triggering in Desktop on events

src/Deneb.ts

@@ -59,6 +59,7 @@ logHeading(`Version: ${APPLICATION_INFORMATION?.version}`, 12);
 
 export class Deneb implements IVisual {
     private settings: VisualFormattingSettingsModel;
+    #applicationWrapper: HTMLElement;
 
     constructor(options: VisualConstructorOptions) {
         logHost('Constructor has been called.', { options });
@@ -68,7 +69,11 @@ export class Deneb implements IVisual {
             VegaPatternFillServices.bind();
             VisualFormattingSettingsService.bind(getLocalizationManager());
             const { element } = options;
-            ReactDOM.render(React.createElement(App), element);
+            this.#applicationWrapper = document.createElement('div');
+            this.#applicationWrapper.id = 'deneb-application-wrapper';
+            element.appendChild(this.#applicationWrapper);
+            this.handleSuppressOnObjectFormatting();
+            ReactDOM.render(React.createElement(App), this.#applicationWrapper);
             element.oncontextmenu = (ev) => {
                 ev.preventDefault();
             };
@@ -236,6 +241,18 @@ export class Deneb implements IVisual {
         updateFieldTracking(spec, trackedFieldsCurrent);
     }
 
+    /**
+     * Ensure that double clicking on the application wrapper doesn't propagate to the host application (avoiding on-object formatting
+     * from triggering in Desktop).
+     */
+    private handleSuppressOnObjectFormatting() {
+        logDebug('Suppressing on object formatting...');
+        this.#applicationWrapper.ondblclick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+    }
+
     /**
      * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the objects
      * and properties you want to expose to the users in the property pane.

style/visual.less

@@ -21,6 +21,11 @@
 ::-webkit-scrollbar-thumb:hover {
 }
 
+#deneb-application-wrapper {
+    height: 100vh;
+    width: 100vw;
+}
+
 textarea {
     cursor: auto;
 }