From bcd8d034a6374295b9cecb05610c129b404377c3 Mon Sep 17 00:00:00 2001
From: ramki-bruno <ramki@usebruno.com>
Date: Thu, 17 Apr 2025 14:02:44 +0530
Subject: [PATCH] Fix: Improve UX for selecting location when create/import
 collection

Allow editing the input path where previous the `<input>` is marked
`readonly`.
Also this will allow automating test using Playwright.
---
 .../src/components/Sidebar/CreateCollection/index.js          | 4 +++-
 .../src/components/Sidebar/ImportCollectionLocation/index.js  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
index 07f390901..d5466d172 100644
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@@ -113,7 +113,6 @@ const CreateCollection = ({ onClose }) => {
             id="collection-location"
             type="text"
             name="collectionLocation"
-            readOnly={true}
             className="block textbox mt-2 w-full cursor-pointer"
             autoComplete="off"
             autoCorrect="off"
@@ -121,6 +120,9 @@ const CreateCollection = ({ onClose }) => {
             spellCheck="false"
             value={formik.values.collectionLocation || ''}
             onClick={browse}
+            onChange={e => {
+              formik.setFieldValue('collectionLocation', e.target.value);
+            }}
           />
           {formik.touched.collectionLocation && formik.errors.collectionLocation ? (
             <div className="text-red-500">{formik.errors.collectionLocation}</div>
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
index e67eb75fc..7c4e9f83f 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -61,7 +61,6 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
               id="collection-location"
               type="text"
               name="collectionLocation"
-              readOnly={true}
               className="block textbox mt-2 w-full cursor-pointer"
               autoComplete="off"
               autoCorrect="off"
@@ -69,6 +68,9 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
               spellCheck="false"
               value={formik.values.collectionLocation || ''}
               onClick={browse}
+              onChange={e => {
+                formik.setFieldValue('collectionLocation', e.target.value);
+              }}
             />
           </>
           {formik.touched.collectionLocation && formik.errors.collectionLocation ? (