diff --git a/x-pack/plugins/canvas/public/state/middleware/aeroelastic.js b/x-pack/plugins/canvas/public/state/middleware/aeroelastic.js
index 9eff1ab885e7f6..59ae1a9fe382b3 100644
--- a/x-pack/plugins/canvas/public/state/middleware/aeroelastic.js
+++ b/x-pack/plugins/canvas/public/state/middleware/aeroelastic.js
@@ -18,7 +18,7 @@ import {
 } from '../actions/elements';
 import { restoreHistory } from '../actions/history';
 import { selectElement } from '../actions/transient';
-import { addPage, removePage, duplicatePage } from '../actions/pages';
+import { addPage, removePage, duplicatePage, gotoPage } from '../actions/pages';
 import { appReady } from '../actions/app';
 import { setWorkpad } from '../actions/workpad';
 import { getNodes, getPages, getSelectedPage, getSelectedElement } from '../selectors/workpad';
@@ -59,6 +59,8 @@ const aeroelasticConfiguration = {
 
 const isGroupId = id => id.startsWith(aeroelasticConfiguration.groupName);
 
+const pageChangerActions = [gotoPage.toString(), duplicatePage.toString(), addPage.toString()];
+
 /**
  * elementToShape
  *
@@ -320,6 +322,14 @@ export const aeroelastic = ({ dispatch, getState }) => {
       aero.removeStore(action.payload);
     }
 
+    if (pageChangerActions.indexOf(action.type) >= 0) {
+      if (getSelectedElement(getState())) {
+        dispatch(selectElement(null)); // ensure sidebar etc. get updated; will update the layout engine too
+      } else {
+        unselectShape(prevPage); // deselect persistent groups as they're not currently selections in Redux
+      }
+    }
+
     next(action);
 
     switch (action.type) {