Merge pull request #937 from mathuo/936-handle-browser-blocked-popups

936 handle browser blocked popups

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -5852,6 +5852,54 @@ describe('dockviewComponent', () => {
             ]);
         });
 
+        describe('when browsers block popups', () => {
+            let container: HTMLDivElement;
+            let dockview: DockviewComponent;
+            let panel: DockviewPanel;
+
+            beforeEach(() => {
+                jest.spyOn(window, 'open').mockReturnValue(null);
+
+                container = document.createElement('div');
+
+                dockview = new DockviewComponent(container, {
+                    createComponent(options) {
+                        switch (options.name) {
+                            case 'default':
+                                return new PanelContentPartTest(
+                                    options.id,
+                                    options.name
+                                );
+                            default:
+                                throw new Error(`unsupported`);
+                        }
+                    },
+                });
+
+                dockview.layout(1000, 500);
+
+                panel = dockview.addPanel({
+                    id: 'panel_1',
+                    component: 'default',
+                });
+            });
+
+            test('onDidOpenPoputWindowFail event is emitted', async () => {
+                const onDidBlockPopoutHandler = jest.fn();
+                dockview.onDidOpenPopoutWindowFail(onDidBlockPopoutHandler);
+
+                await dockview.addPopoutGroup(panel.group);
+
+                expect(onDidBlockPopoutHandler).toHaveBeenCalledTimes(1);
+            });
+
+            test('popout group is restored to its original position', async () => {
+                await dockview.addPopoutGroup(panel.group);
+
+                expect(panel.group.api.location.type).toBe('grid');
+            });
+        });
+
         test('dispose of dockview instance when popup is open', async () => {
             const container = document.createElement('div');
 

packages/dockview-core/src/api/component.api.ts

@@ -749,6 +749,10 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.onDidPopoutGroupPositionChange;
     }
 
+    get onDidOpenPopoutWindowFail(): Event<void> {
+        return this.component.onDidOpenPopoutWindowFail;
+    }
+
     /**
      * All panel objects.
      */

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -227,6 +227,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
     readonly onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>;
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
+    readonly onDidOpenPopoutWindowFail: Event<void>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -320,6 +321,10 @@ export class DockviewComponent
     readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent> =
         this._onDidPopoutGroupPositionChange.event;
 
+    private readonly _onDidOpenPopoutWindowFail = new Emitter<void>();
+    readonly onDidOpenPopoutWindowFail: Event<void> =
+        this._onDidOpenPopoutWindowFail.event;
+
     private readonly _onDidLayoutFromJSON = new Emitter<void>();
     readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutFromJSON.event;
 
@@ -506,6 +511,7 @@ export class DockviewComponent
             this._onDidOptionsChange,
             this._onDidPopoutGroupSizeChange,
             this._onDidPopoutGroupPositionChange,
+            this._onDidOpenPopoutWindowFail,
             this.onDidViewVisibilityChangeMicroTaskQueue(() => {
                 this.updateWatermark();
             }),
@@ -714,19 +720,6 @@ export class DockviewComponent
                     return false;
                 }
 
-                if (popoutContainer === null) {
-                    popoutWindowDisposable.dispose();
-                    return false;
-                }
-
-                const gready = document.createElement('div');
-                gready.className = 'dv-overlay-render-container';
-
-                const overlayRenderContainer = new OverlayRenderContainer(
-                    gready,
-                    this
-                );
-
                 const referenceGroup = options?.referenceGroup
                     ? options.referenceGroup
                     : itemToPopout instanceof DockviewPanel
@@ -736,7 +729,7 @@ export class DockviewComponent
                 const referenceLocation = itemToPopout.api.location.type;
 
                 /**
-                 * The group that is being added doesn't already exist within the DOM, the most likely occurance
+                 * The group that is being added doesn't already exist within the DOM, the most likely occurrence
                  * of this case is when being called from the `fromJSON(...)` method
                  */
                 const isGroupAddedToDom =
@@ -750,9 +743,44 @@ export class DockviewComponent
                     group = options.overridePopoutGroup;
                 } else {
                     group = this.createGroup({ id: groupId });
-                    this._onDidAddGroup.fire(group);
+
+                    if (popoutContainer) {
+                        this._onDidAddGroup.fire(group);
+                    }
                 }
 
+                if (popoutContainer === null) {
+                    console.error(
+                        'dockview: failed to create popout. perhaps you need to allow pop-ups for this website'
+                    );
+
+                    popoutWindowDisposable.dispose();
+                    this._onDidOpenPopoutWindowFail.fire();
+
+                    // if the popout window was blocked, we need to move the group back to the reference group
+                    // and set it to visible
+                    this.movingLock(() =>
+                        moveGroupWithoutDestroying({
+                            from: group,
+                            to: referenceGroup,
+                        })
+                    );
+
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
+                    }
+
+                    return false;
+                }
+
+                const gready = document.createElement('div');
+                gready.className = 'dv-overlay-render-container';
+
+                const overlayRenderContainer = new OverlayRenderContainer(
+                    gready,
+                    this
+                );
+
                 group.model.renderContainer = overlayRenderContainer;
                 group.layout(
                     _window.window!.innerWidth,
@@ -968,7 +996,7 @@ export class DockviewComponent
                 return true;
             })
             .catch((err) => {
-                console.error('dockview: failed to create popout window', err);
+                console.error('dockview: failed to create popout.', err);
                 return false;
             });
     }

packages/docs/sandboxes/react/dockview/popout-group/src/app.tsx

@@ -143,6 +143,9 @@ export const App = (props: { theme?: string }) => {
 
     const load = (api: DockviewApi) => {
         api.clear();
+        api.onDidOpenPopoutWindowFail(() => {
+            console.log('Popout blocked');
+        });
         if (layout) {
             try {
                 api.fromJSON(layout);