Fixing error where focusing on an empty Directory search would throw an error.

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}

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/>

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 {