diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte index ad077b0954..e9e7a6fe6d 100644 --- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte +++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte @@ -3,7 +3,7 @@ import { copyToClipboard, truncate } from '$lib/utils' - import { createEventDispatcher, untrack, type Snippet } from 'svelte' + import { createEventDispatcher, tick, untrack, type Snippet } from 'svelte' import { computeKey, keepByKeyOrValue } from './utils' import { NEVER_TESTED_THIS_FAR } from '../flows/models' import Portal from '$lib/components/Portal.svelte' @@ -139,6 +139,7 @@ let closeBracket = $derived(isArray ? ']' : '}') let keyLimit = $derived(isArray ? 5 : 100) let fullyCollapsed = $derived(keys.length > 1 && collapsed) + let searchInput: HTMLInputElement | undefined = $state(undefined) {#snippet renderScalar(k: string, v: any)} @@ -200,6 +201,7 @@ class="!h-6 !text-2xs mt-0.5" bind:value={search} placeholder="Search..." + bind:this={searchInput} /> {/if} diff --git a/frontend/src/lib/components/propertyPicker/utils.ts b/frontend/src/lib/components/propertyPicker/utils.ts index 3f157db496..e69c5efbf9 100644 --- a/frontend/src/lib/components/propertyPicker/utils.ts +++ b/frontend/src/lib/components/propertyPicker/utils.ts @@ -1,19 +1,24 @@ function filterObject(obj: any, key: string, filterValue: boolean): any { + const keyLower = key.toLowerCase() if (typeof obj !== 'object' || obj === null) { if (!filterValue || obj === undefined || obj === null) { return undefined } else { - return obj.toString().includes(key) ? obj : undefined + return obj.toString().toLowerCase().includes(keyLower) ? obj : undefined } } else if (Array.isArray(obj)) { let a = obj - .map((k, o) => - typeof o == 'object' + .map((o, k) => { + // match index + if (String(k).toLowerCase().includes(keyLower)) { + return o + } + return typeof o == 'object' ? filterObject(o, key, filterValue) - : String(k - 1).includes(key) + : filterValue && String(o).toLowerCase().includes(keyLower) ? o : undefined - ) + }) .filter((v) => v !== undefined) if (a.length === 0) { return undefined @@ -23,7 +28,9 @@ function filterObject(obj: any, key: string, filterValue: boolean): any { } else { let o = Object.fromEntries( Object.entries(obj) - .map(([k, v]) => (k.includes(key) ? [k, v] : [k, filterObject(v, key, filterValue)])) + .map(([k, v]) => + k.toLowerCase().includes(keyLower) ? [k, v] : [k, filterObject(v, key, filterValue)] + ) .filter(([k, v]) => v !== undefined) ) if (Object.keys(o).length === 0) {