From a4cd192617848fa4a4c8688337968f167a3fea81 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 18 Apr 2025 10:30:46 -0400
Subject: [PATCH 1/3] Add form directory input on blur as well as enter; ensure
 valid though.

---
 client/src/components/Form/Elements/FormDirectory.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDirectory.vue b/client/src/components/Form/Elements/FormDirectory.vue
index 4040d5d5241..29f12722a3f 100644
--- a/client/src/components/Form/Elements/FormDirectory.vue
+++ b/client/src/components/Form/Elements/FormDirectory.vue
@@ -35,7 +35,8 @@
                     trim
                     @keyup.enter="addPath"
                     @keydown.191.capture.prevent.stop="addPath"
-                    @keydown.8.capture="removeLastPath" />
+                    @keydown.8.capture="removeLastPath"
+                    @blur="handleBlur" />
             </b-breadcrumb-item>
         </b-breadcrumb>
 
@@ -158,6 +159,14 @@ export default {
             }
             this.$emit("input", url);
         },
+        handleBlur() {
+            if (this.currentDirectoryName && this.isValidName) {
+                const newFolder = this.currentDirectoryName;
+                this.pathChunks.push({ pathChunk: newFolder, editable: true });
+                this.currentDirectoryName = "";
+            }
+            this.updateURL();
+        },
     },
 };
 </script>

From 09e85bdfdbca4f71eb30808d87c7e6f4f41fa138 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 18 Apr 2025 10:36:41 -0400
Subject: [PATCH 2/3] Minor refactoring to form directory element

---
 .../Form/Elements/FormDirectory.vue           | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDirectory.vue b/client/src/components/Form/Elements/FormDirectory.vue
index 29f12722a3f..a57ab446ddc 100644
--- a/client/src/components/Form/Elements/FormDirectory.vue
+++ b/client/src/components/Form/Elements/FormDirectory.vue
@@ -140,12 +140,23 @@ export default {
         },
         addPath({ key }) {
             if ((key === "Enter" || key === "/") && this.isValidName) {
-                const newFolder = this.currentDirectoryName;
-                this.pathChunks.push({ pathChunk: newFolder, editable: true });
-                this.currentDirectoryName = "";
+                this.addDirectoryToPath();
+            }
+        },
+        handleBlur() {
+            if (this.currentDirectoryName && this.isValidName) {
+                this.addDirectoryToPath();
+            } else {
+                // If the input was touched let's propagate the change either way.
                 this.updateURL();
             }
         },
+        addDirectoryToPath() {
+            const newFolder = this.currentDirectoryName;
+            this.pathChunks.push({ pathChunk: newFolder, editable: true });
+            this.currentDirectoryName = "";
+            this.updateURL();
+        },
         updateURL(isReset = false) {
             let url = undefined;
             if (!isReset) {
@@ -159,14 +170,6 @@ export default {
             }
             this.$emit("input", url);
         },
-        handleBlur() {
-            if (this.currentDirectoryName && this.isValidName) {
-                const newFolder = this.currentDirectoryName;
-                this.pathChunks.push({ pathChunk: newFolder, editable: true });
-                this.currentDirectoryName = "";
-            }
-            this.updateURL();
-        },
     },
 };
 </script>

From 93aa658198fbbb98e85deb09eaf6f5f137717153 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 14 Jan 2026 11:12:36 -0500
Subject: [PATCH 3/3] verify path is added on blur and fix test data mutation

---
 .../Form/Elements/FormDirectory.test.js        | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormDirectory.test.js b/client/src/components/Form/Elements/FormDirectory.test.js
index cbff6c9ffe3..3aba1fb14d3 100644
--- a/client/src/components/Form/Elements/FormDirectory.test.js
+++ b/client/src/components/Form/Elements/FormDirectory.test.js
@@ -23,7 +23,7 @@ async function init(wrapper, data) {
     expect(filesDialogComponent.exists()).toBe(true);
     filesDialogComponent.vm.callback({ url: data.url });
     // HACK: URL implementation in test environment is not the same as global node
-    wrapper.vm.pathChunks = data.pathChunks;
+    wrapper.vm.pathChunks = [...data.pathChunks];
     await flushPromises();
     await validateLatestEmittedPath(wrapper, data.url);
 }
@@ -175,4 +175,20 @@ describe("DirectoryPathEditableBreadcrumb", () => {
         // retain special characters in the url
         await init(wrapper, testingDataWithSpecialChars);
     });
+
+    it("should save on blur", async () => {
+        await init(wrapper, testingData);
+        // enter a new path chunk
+        const input = wrapper.find("#path-input-breadcrumb");
+        await input.setValue(validPath);
+        expect(input.element.value).toBe(validPath);
+
+        await input.trigger("blur");
+        await flushPromises();
+
+        expect(spyOnAddPath).toHaveBeenCalled();
+        expect(input.element.value).toBe("");
+        expect(wrapper.findAll("li.breadcrumb-item").length).toBe(testingData.expectedNumberOfPaths + 1);
+        await validateLatestEmittedPath(wrapper, `${testingData.url}/${validPath}`);
+    });
 });