fix: allow autocomplete value to be null without throwing (#851)

Sometimes in transient states (navigating to a new page) autocomplete can have a null value which would throw an error, this just makes sure we don't throw an error

Author: MikeShi42

packages/app/src/SearchInputV2.tsx

@@ -23,6 +23,7 @@ export class LuceneLanguageFormatter implements ILanguageFormatter {
   }
 }
 
+const luceneLanguageFormatter = new LuceneLanguageFormatter();
 export default function SearchInputV2({
   tableConnections,
   placeholder = 'Search your events for anything...',
@@ -55,8 +56,8 @@ export default function SearchInputV2({
   const [parsedEnglishQuery, setParsedEnglishQuery] = useState<string>('');
 
   const autoCompleteOptions = useAutoCompleteOptions(
-    new LuceneLanguageFormatter(),
-    value,
+    luceneLanguageFormatter,
+    value != null ? `${value}` : '', // value can be null at times
     {
       tableConnections,
       additionalSuggestions,

packages/app/src/hooks/useAutoCompleteOptions.tsx

@@ -68,12 +68,10 @@ export function useAutoCompleteOptions(
   // clear search field if no key matches anymore
   useEffect(() => {
     if (!searchField) return;
-    if (
-      !(value as string).startsWith(formatter.formatFieldValue(searchField))
-    ) {
+    if (!value.startsWith(formatter.formatFieldValue(searchField))) {
       setSearchField(null);
     }
-  }, [searchField, setSearchField, value]);
+  }, [searchField, setSearchField, value, formatter]);
   const searchKeys = useMemo(
     () =>
       searchField