Close all nested drawers when navigating

panel/src/panel/drawer.js

@@ -30,12 +30,18 @@ export default (panel) => {
 		/**
 		 * Closes the drawer and goes back to the
 		 * parent one if it has been stored
+		 * @param {String|true} id Which drawer to close, true for all
 		 */
 		async close(id) {
 			if (this.isOpen === false) {
 				return;
 			}
 
+			// Force close all drawers
+			if (id === true) {
+				this.history.clear();
+			}
+
 			// Compare the drawer id to avoid closing
 			// the wrong drawer. This is particularly useful
 			// in nested drawers.

panel/src/panel/history.js

@@ -20,6 +20,9 @@ export default () => {
 		at(index) {
 			return this.milestones.at(index);
 		},
+		clear() {
+			this.milestones = [];
+		},
 		get(id = null) {
 			if (id === null) {
 				return this.milestones;

panel/src/panel/history.test.js

@@ -57,6 +57,24 @@ describe.concurrent("panel.drawer.history", () => {
 		expect(history.has("b")).toStrictEqual(false);
 	});
 
+	it("should clear items", async () => {
+		const history = History();
+
+		history.add({
+			id: "a"
+		});
+
+		history.add({
+			id: "b"
+		});
+
+		expect(history.get()).toStrictEqual([{ id: "a" }, { id: "b" }]);
+
+		history.clear();
+
+		expect(history.get()).toStrictEqual([]);
+	});
+
 	it("should go to milestone", async () => {
 		const history = History();
 

panel/src/panel/panel.js

@@ -373,7 +373,8 @@ export default {
 			// modals will be closed if the response is null or false.
 			// on undefined, the state of the modal stays untouched
 			else if (state[modal] !== undefined) {
-				this[modal].close();
+				// force close all nested modals
+				this[modal].close(true);
 			}
 		}