diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 68d00cafe2..90f9bb1a7a 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -126,16 +126,20 @@ export default {
      * Create a widget.
      *
      */
-    addWidget (id, name) {
+    addWidget (id, name, onTop = true) {
       this.widgets.push(id)
       const luminoWidget = new LuminoWidget(id, name, /* closable */ true)
-      this.dock.addWidget(luminoWidget)
+      // this.dock.addWidget(luminoWidget)
+      this.dock.addWidget(luminoWidget, { mode: 'tab-after' })
       // give time for Lumino's widget DOM element to be created
       this.$nextTick(() => {
         document.getElementById(id)
           .addEventListener('lumino:activated', this.onWidgetActivated)
         document.getElementById(id)
           .addEventListener('lumino:deleted', this.onWidgetDeleted)
+        if (onTop) {
+          luminoWidget.parent.selectWidget(luminoWidget)
+        }
       })
     },
 
diff --git a/tests/e2e/specs/workflow.cy.js b/tests/e2e/specs/workflow.cy.js
index 3a94e09913..4ae7881908 100644
--- a/tests/e2e/specs/workflow.cy.js
+++ b/tests/e2e/specs/workflow.cy.js
@@ -55,10 +55,28 @@ describe('Workflow view and component/widget', () => {
 
   it('Should be able to add two widgets of different types', () => {
     cy.visit('/#/workflows/one')
-    cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
+
+    // there should be one widget open by default (tree)
+    cy.get('.lm-TabBar-tabLabel')
+      // there should be a tab representing the widget
+      .should('have.length', 1)
+      // the tab should contain the name of the widget
+      .contains('tree')
+      // the tab should be active (that is to say on top)
+      .parent()
+      .should('have.class', 'lm-mod-current')
+
     cy.get('a.add-view').click()
     cy.get('#toolbar-add-Table-view').click()
-    cy.get('.lm-TabBar-tabLabel').should('have.length', 2)
+    cy.get('.lm-TabBar-tabLabel')
+      // there should be two tabs (tree + table)
+      .should('have.length', 2)
+      // the new tab should be last
+      .last()
+      .contains('table')
+      // the new tab should be active (that is to say on top)
+      .parent()
+      .should('have.class', 'lm-mod-current')
   })
 
   it('Should remove widgets added successfully', () => {