From 16070e98b3bfa8fcf983e533b8a4f80a5bef7871 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Wed, 24 Jun 2026 15:23:32 -0600
Subject: [PATCH] Fixing error where focusing on an empty Directory search
 would throw an error.

---
 app/src/components/Common.js      |  6 ++++--
 app/src/components/Common.test.js | 23 +++++++++++++++++++++++
 app/src/hooks/customHooks.js      |  5 +++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 1b4caf47..54bcfc83 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -1473,7 +1473,9 @@ export function DirectorySearch({onSelect, value, disabled, required, ...props})
             const newDirectory = isDir ? {} : {
                 newDirectory: {
                     name: 'New Directory',
-                    results: [{title: directoryName}],
+                    // title must not be null; an unset form field passes a null value and
+                    // Semantic UI's Search crashes reading null.length.
+                    results: [{title: directoryName || ''}],
                 }
             };
             const newResults = {
@@ -1537,7 +1539,7 @@ export function DirectorySearch({onSelect, value, disabled, required, ...props})
                    onResultSelect={handleResultSelect}
                    onBlur={handleBlur}
                    loading={loading}
-                   value={directoryName}
+                   value={directoryName || ''}
                    results={results}
                    disabled={disabled}
                    {...props}
diff --git a/app/src/components/Common.test.js b/app/src/components/Common.test.js
index 89a02c45..0a29d4c1 100644
--- a/app/src/components/Common.test.js
+++ b/app/src/components/Common.test.js
@@ -99,6 +99,29 @@ describe('DirectorySearch', () => {
             expect(input).toBeDisabled();
         });
 
+        it('renders the dropdown without crashing when directoryName is null', async () => {
+            // An unset form field (e.g. the new Channel page) passes a null value.  With
+            // isDir=false a "New Directory" result is built from directoryName; if that title is
+            // null, Semantic UI's Search crashes reading null.length when the menu opens.
+            setMockHookState({
+                directories: [],
+                channelDirectories: [],
+                domainDirectories: [],
+                isDir: false,
+                directoryName: null,
+            });
+
+            render(<DirectorySearch onSelect={mockOnSelect} value={null}/>);
+
+            const input = screen.getByPlaceholderText(/search directory names/i);
+            // Opening the menu (as Tab/focus does in the browser) must not throw.
+            await userEvent.click(input);
+
+            await waitFor(() => {
+                expect(screen.getByText(/New Directory/i)).toBeInTheDocument();
+            });
+        });
+
         it('displays with required indicator', () => {
             const {container} = render(
                 <DirectorySearch onSelect={mockOnSelect} value="" required/>
diff --git a/app/src/hooks/customHooks.js b/app/src/hooks/customHooks.js
index 6bf4a6b0..5bd1628e 100644
--- a/app/src/hooks/customHooks.js
+++ b/app/src/hooks/customHooks.js
@@ -1200,8 +1200,9 @@ export const useSearchDirectories = (value) => {
     }, [directoryName]);
 
     useEffect(() => {
-        // Directory value was changed above.
-        setDirectoryName(value);
+        // Directory value was changed above.  Coerce null/undefined (an unset form field) to an
+        // empty string so the controlled input stays controlled and never builds a null result.
+        setDirectoryName(value ?? '');
     }, [value]);
 
     return {