Quick filter search fixes (#2603)

* Add tick to afterUpdate

* Fix focusing for list filter

* Fix null filter

Author: laurakwhit

src/lib/components/search-attribute-filter/conditional-menu.svelte

@@ -46,6 +46,7 @@
 
   function handleNullFilter() {
     $filter.value = null;
+    $filter.customDate = false;
     handleSubmit();
   }
 
@@ -57,7 +58,7 @@
 
 <MenuContainer>
   <MenuButton
-    class="{noBorderRight ? '!border-r-0' : ''} {noBorderLeft
+    class="{noBorderRight && !isNullFilter ? '!border-r-0' : ''} {noBorderLeft
       ? '!border-l-0'
       : ''} whitespace-nowrap"
     id="conditional-menu-button"

src/lib/components/search-attribute-filter/filter-list.svelte

@@ -117,7 +117,7 @@
               {attribute}
               {#if isNullConditional(conditional)}
                 {conditional}
-                {value}
+                {String(value)}
               {:else if isDateTimeFilter(workflowFilter)}
                 {#if customDate}
                   {formatDateTimeRange(value, $timeFormat, $relativeTime)}

src/lib/components/search-attribute-filter/index.svelte

@@ -2,7 +2,7 @@
   import { writable, type Writable } from 'svelte/store';
   import { fly } from 'svelte/transition';
 
-  import { afterUpdate, setContext } from 'svelte';
+  import { afterUpdate, setContext, tick } from 'svelte';
 
   export const FILTER_CONTEXT = 'filter-context';
 
@@ -42,7 +42,7 @@
 
   import BooleanFilter from './boolean-filter.svelte';
   import CloseFilter from './close-filter-button.svelte';
-  import DateTimeFilter from './datetime-filter.svelte';
+  import DatetimeFilter from './datetime-filter.svelte';
   import DurationFilter from './duration-filter.svelte';
   import FilterList from './filter-list.svelte';
   import ListFilter from './list-filter.svelte';
@@ -125,7 +125,9 @@
   }
 
   afterUpdate(() => {
-    updateFocus();
+    tick().then(() => {
+      updateFocus();
+    });
   });
 
   function resetFilter() {
@@ -192,7 +194,7 @@
               class="flex w-full items-center"
               in:fly={{ x: -100, duration: 150 }}
             >
-              <DateTimeFilter />
+              <DatetimeFilter />
               <CloseFilter />
             </div>
           {:else if isBooleanFilter($filter)}

src/lib/utilities/query/search-attribute-filter.ts

@@ -77,12 +77,11 @@ export function getFocusedElementId(filter: SearchAttributeFilter) {
   if (
     isTextFilter(filter) ||
     isNumberFilter(filter) ||
-    isDateTimeFilter(filter)
+    isDateTimeFilter(filter) ||
+    isListFilter(filter)
   )
     return 'conditional-menu-button';
 
-  if (isListFilter(filter)) return 'list-filter';
-
   if (isBooleanFilter(filter)) return 'boolean-filter';
 
   return '';