Merge pull request #20047 from dannon/form-directory-addpath

FormDirectory -- input path on blur instead of requiring explicit enter

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}`);
+    });
 });

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>
 
@@ -139,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) {