fix: broken clear search functionality #2405
Conversation
ConsoleProject ID: Sites (2)
Note You can use Avatars API to generate QR code for any text or URLs. |
WalkthroughAdds a new helper module Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/routes/(console)/project-[region]-[project]/storage/+page.svelte (1)
65-69: Pagination label likely incorrect.“Databases” should probably be “Buckets” (or “Storage”). Minor UX nit.
Suggested fix:
- <PaginationWithLimit - name="Databases" + <PaginationWithLimit + name="Buckets" limit={data.limit} offset={data.offset} total={data.buckets.total} />
🧹 Nitpick comments (19)
src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte (2)
22-26: Type the SearchQuery ref and harden clearSearch()Avoid implicit any and protect against API drift. Typing also improves DX.
Apply this diff:
- let searchQuery; - - function clearSearch() { - searchQuery?.clearInput(); - } + // Component instance ref; null until bound + let searchQuery: InstanceType<typeof SearchQuery> | null = null; + + function clearSearch() { + searchQuery?.clearInput?.(); + }Optional: If a new clearSearch helper was introduced in this PR, prefer using it for consistency across pages:
- import the helper
- implement:
function clearSearch() { clearSearchInput(searchQuery); }Please confirm the helper import path if you adopt it.
54-54: Correctly switches from href to click handlerUsing a button with on:click avoids unintended navigation and fixes the broken clear action.
Optional: If you track this interaction, consider instrumenting an analytics event similar to the “Add domain” button. -->
src/routes/(console)/project-[region]-[project]/messaging/+page.svelte (1)
41-45: Use shared helper for consistency and future-proofing.Prefer the central helper over calling
clearInputdirectly.-function clearSearch() { - searchQuery?.clearInput(); -} +const clearSearch = () => clearSearchInput(searchQuery);Add import (outside range):
import { clearSearchInput } from '$lib/helpers/clearSearch';src/lib/layout/responsiveContainerHeader.svelte (1)
27-29: Public bindable searchQuery: tighten type.Type the prop as the component instance for better TS safety.
- searchQuery?: SearchQuery; + searchQuery?: InstanceType<typeof SearchQuery>;Also applies to: 39-40
src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte (1)
16-20: Use shared helper for consistency.Align with other routes using the clearSearch helper.
-function clearSearch() { - searchQuery?.clearInput(); -} +const clearSearch = () => clearSearchInput(searchQuery);Add import (outside range):
import { clearSearchInput } from '$lib/helpers/clearSearch';src/routes/(console)/project-[region]-[project]/functions/+page.svelte (1)
34-38: Prefer shared helper over direct method call.Unify with other pages using clearSearchInput.
-function clearSearch() { - searchQuery?.clearInput(); -} +const clearSearch = () => clearSearchInput(searchQuery);Add import (outside range):
import { clearSearchInput } from '$lib/helpers/clearSearch';src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte (1)
58-59: Delegate to helper to avoid duplicating clear logic.Keeps behavior centralized and consistent.
- searchQuery?.clearInput(); + clearSearchInput(searchQuery);Add import (outside range):
import { clearSearchInput } from '$lib/helpers/clearSearch';src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte (2)
27-31: Standardize clearing via helper and add typing forsearchQuery.Use the shared helper for consistency with the rest of the PR and annotate the instance type to improve DX.
Apply within the selected ranges:
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined; - function clearSearch() { - searchQuery?.clearInput(); - } + function clearSearch() { + clearSearchInput(searchQuery); + }Outside the selected range, add the import (top of script block):
+ import { clearSearchInput } from '$lib/helpers/clearSearch';Also applies to: 38-38, 146-146
146-146: Text casing consistency.Other pages use “Clear Search” while this uses “Clear search”. Align casing per design guidelines.
src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte (1)
18-20: Looks good; consider minor typing and casing consistency.
- Typing: annotate
searchQueryfor better tooling.- Casing: standardize “Clear Search” vs “Clear search” across pages.
Suggested typing within selected range:
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined;Also applies to: 25-26, 59-60
src/routes/(console)/project-[region]-[project]/databases/+page.svelte (1)
20-21: Uniform helper usage and typing forsearchQuery.Good use of the helper. Add a type to the bound instance for consistency with other files.
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined;Also applies to: 27-28, 55-55, 86-87
src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte (1)
24-28: Use shared helper for clearing and add typing.Other pages use
clearSearchInput(searchQuery). Align here for consistency and centralize behavior. Also add typing.+ import { clearSearchInput } from '$lib/helpers/clearSearch'; @@ - let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined; @@ - function clearSearch() { - searchQuery?.clearInput(); - } + function clearSearch() { + clearSearchInput(searchQuery); + }src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte (1)
12-13: LGTM; minor typing improvement suggested.Behavior aligns with the helper-based pattern. Consider typing the instance.
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined;Also applies to: 33-35, 94-94, 126-126
src/routes/(console)/project-[region]-[project]/sites/+page.svelte (1)
22-22: LGTM; add instance typing for consistency.Matches the helper-based approach used elsewhere.
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined;Also applies to: 35-36, 66-66, 95-97
src/routes/(console)/project-[region]-[project]/storage/+page.svelte (1)
27-29: LGTM; minor tweaks suggested.
- Good adoption of the helper and EmptySearch. Consider typing the instance.
- Copy nit: pagination name says “Databases” on a storage page (see below).
Typing:
- let searchQuery; + let searchQuery: InstanceType<typeof SearchQuery> | undefined;Also applies to: 41-41, 70-74
src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte (1)
163-164: Standardize label casing to match other pages.Use “Clear search” for consistency.
Apply this diff:
- <Button secondary size="s" on:click={clearSearch}>Clear Search</Button> + <Button secondary size="s" on:click={clearSearch}>Clear search</Button>src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte (1)
57-59: Match button size with other pages.Teams uses size="s" for the Clear search button; align here for visual consistency.
Apply this diff:
- <EmptySearch target="providers" search={data.search}> - <Button secondary on:click={clearSearch}>Clear search</Button> + <EmptySearch target="providers" search={data.search}> + <Button secondary size="s" on:click={clearSearch}>Clear search</Button> </EmptySearch>src/lib/helpers/clearSearch.ts (2)
6-10: Avoid closure trap in createClearSearch; accept a getter.As written, createClearSearch(searchQuery) captures the value at creation time (often undefined before bind:this runs), resulting in a no-op. Accept a getter to read the latest instance when invoked.
Apply this diff:
-/** - * Creates a clear search function for SearchQuery components - * @param searchQuery - * @returns A function that clears the search input - */ -export function createClearSearch(searchQuery: { clearInput?: () => void } | undefined) { - return () => { - searchQuery?.clearInput?.(); - }; -} +type HasClearInput = { clearInput?: () => void } | undefined; + +/** + * Creates a clear search function for SearchQuery components. + * Pass a getter so we always read the current instance (avoids stale closures). + */ +export function createClearSearch(getSearchQuery: () => HasClearInput): () => void { + return () => { + getSearchQuery()?.clearInput?.(); + }; +}
15-17: Minor typing polish: reuse alias and explicit return type.Keeps the API clear and DRY.
Apply this diff:
-export function clearSearchInput(searchQuery: { clearInput?: () => void } | undefined) { - searchQuery?.clearInput?.(); -} +export function clearSearchInput(searchQuery: HasClearInput): void { + searchQuery?.clearInput?.(); +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
src/lib/helpers/clearSearch.ts(1 hunks)src/lib/layout/responsiveContainerHeader.svelte(3 hunks)src/routes/(console)/organization-[organization]/domains/+page.svelte(4 hunks)src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/auth/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/databases/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/functions/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/messaging/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/sites/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/storage/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte(4 hunks)
🔇 Additional comments (32)
src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte (1)
31-31: LGTM on binding the SearchQuery instanceBinding the component instance enables programmatic clearing as intended.
Quick check: clearing should remove the
searchquery param and trigger data reload so the EmptySearch branch is exited. Please verify on click the URL param is cleared and the list repopulates.src/routes/(console)/project-[region]-[project]/messaging/+page.svelte (2)
160-162: Good: Header exposes searchQuery binding.This correctly wires the SearchQuery instance out of the header.
252-257: Clear search action is correctly hooked to the handler.Empty state now clears via click instead of href. Looks good.
src/lib/layout/responsiveContainerHeader.svelte (2)
102-103: LGTM: Small viewport binding works.Binding the SearchQuery instance via bind:this is correct.
109-110: LGTM: Desktop binding mirrors small viewport.Consistent with the small-viewport path.
src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte (2)
29-30: LGTM: Binding header searchQuery.Correctly binds to the header’s SearchQuery instance.
51-52: LGTM: Clear search uses handler.Button triggers programmatic clear as intended.
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte (4)
7-7: LGTM: Central helper imported.
40-42: LGTM: Clear search wrapper delegates to helper.
138-139: LGTM: SearchQuery bound to local ref.
258-259: LGTM: Empty state clears via handler (no navigation).src/routes/(console)/project-[region]-[project]/functions/+page.svelte (2)
88-89: LGTM: Bound SearchQuery instance.
141-142: LGTM: Clear search from EmptySearch.src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte (2)
31-31: LGTM: Local SearchQuery ref declared.
94-95: LGTM: SearchQuery is correctly bound.src/routes/(console)/organization-[organization]/domains/+page.svelte (4)
5-5: LGTM: Using the shared clearSearch helper.
43-45: LGTM: Local wrapper delegates to helper.
53-54: LGTM: SearchQuery bound to local ref.
189-190: LGTM: Clear search action wired in EmptySearch.src/routes/(console)/project-[region]-[project]/auth/+page.svelte (4)
18-18: LGTM: Central clearSearch helper imported.
47-49: LGTM: Local wrapper uses helper.
111-114: LGTM: SearchQuery bound with explicit placeholder.
224-225: LGTM: Clear search triggers handler in empty state.src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte (2)
81-83: VerifyResponsiveContainerHeader’s newbind:searchQueryAPI.Since this prop is new, confirm it’s exported and correctly forwards to the underlying SearchQuery instance.
107-109: LGTM: Correct Clear Search behavior in EmptySearch.The button correctly delegates to
clearSearch.src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte (3)
15-15: Good: centralized clear behavior via helper.Importing clearSearchInput standardizes the pattern across pages.
44-46: Correct approach: avoid stale refs.Using a wrapper that references searchQuery at call time prevents closure-capture issues.
96-96: LGTM: bind ref for programmatic control.bind:this enables calling the component’s clearInput.
src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte (3)
19-19: Good: reuse shared helper.Brings providers page in line with the new clearing pattern.
23-25: LGTM: safe wrapper.The local clearSearch correctly dereferences the current instance.
30-30: LGTM: bind instance for clearInput access.bind:this is the right mechanism here.
src/lib/helpers/clearSearch.ts (1)
1-17: Drop SearchQuery audit—no such component exists There’s noSearchQuery.sveltefile orSearchQueryexport in the codebase to verify.Likely an incorrect or invalid review comment.
| <EmptySearch hidePages bind:search={data.search} target="certificates"> | ||
| <svelte:fragment slot="actions"> | ||
| <Button | ||
| secondary | ||
| href={`${base}/organization-${page.params.organization}/domains/domain-${page.params.domain}/certificates`}> | ||
| Clear search | ||
| </Button> | ||
| <Button secondary on:click={clearSearch}>Clear search</Button> | ||
| </svelte:fragment> |
There was a problem hiding this comment.
Invalid Svelte binding: bind:search={data.search} binds to an expression.
Svelte bindings must target a local variable, not a property access. This will fail to compile.
Fix:
- <EmptySearch hidePages bind:search={data.search} target="certificates">
+ <EmptySearch hidePages search={data.search} target="certificates">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <EmptySearch hidePages bind:search={data.search} target="certificates"> | |
| <svelte:fragment slot="actions"> | |
| <Button | |
| secondary | |
| href={`${base}/organization-${page.params.organization}/domains/domain-${page.params.domain}/certificates`}> | |
| Clear search | |
| </Button> | |
| <Button secondary on:click={clearSearch}>Clear search</Button> | |
| </svelte:fragment> | |
| <EmptySearch hidePages search={data.search} target="certificates"> | |
| <svelte:fragment slot="actions"> | |
| <Button secondary on:click={clearSearch}>Clear search</Button> | |
| </svelte:fragment> |
🤖 Prompt for AI Agents
In
src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte
around lines 144-147, the bind:search currently uses an expression (data.search)
which Svelte disallows; declare a local component variable (e.g. let search =
data.search) in the <script> and change the binding to bind:search={search}; if
the parent/load data must be kept in sync, add a reactive statement or explicit
handler to propagate changes (for example $: data.search = search or call the
appropriate update function) so the UI stays consistent.
src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte (1)
27-31: Add an explicit type forsearchQuery.Right now
searchQueryis implicitlyany, so TypeScript won’t catch typos likeclearInpt(). Give it the concrete component instance type instead.-let searchQuery; +let searchQuery: InstanceType<typeof SearchQuery> | null = null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte(2 hunks)
🔇 Additional comments (3)
src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte (1)
17-21: Type mismatch breaksclearSearchInputcall
clearSearchInputexpects theInstanceType<typeof SearchQuery>(same pattern used elsewhere in this PR), but the local ref is typed as{ clearInput?: () => void }. Passing that to the helper fails TS structural typing because it’s missing the Svelte component members ($on,$set,$destroy). Please align the ref type with the component instance.-let searchQuery: { clearInput?: () => void } | undefined; +let searchQuery: InstanceType<typeof SearchQuery> | undefined;src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte (2)
38-38: Binding the query component instance looks good.The
bind:thiswiring cleanly exposes the search instance for the clear handler.
144-147: New clear handler fixes the UX.Switching to an
on:clickthat callsclearSearchkeeps the user on the page and reliably clears the query instead of bouncing through a navigation.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte (1)
7-43: Type thesearchQuerybinding for better TS safetyPlease give
searchQueryan explicit instance type so that downstream helpers likeclearSearchInputhave proper type information and we avoidanyleakage in this module.-let searchQuery; -const clearSearch = () => clearSearchInput(searchQuery); +let searchQuery: InstanceType<typeof SearchQuery> | null = null; +const clearSearch = () => clearSearchInput(searchQuery);src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte (1)
51-51: Nit: Align button size casing across pagesTo match other pages (e.g., databases), consider using a small-sized action.
- <Button secondary on:click={clearSearch}>Clear search</Button> + <Button size="s" secondary on:click={clearSearch}>Clear search</Button>src/lib/layout/responsiveContainerHeader.svelte (2)
27-29: Type the bindable prop as the component instancePrefer the instance type to avoid confusion between constructor vs instance. This keeps intellisense for instance methods like
clearInput.}: { @@ - searchQuery?: SearchQuery; + searchQuery?: InstanceType<typeof SearchQuery>; } = $props();Also applies to: 39-40
42-46: Remove no-op effect used to silence TS
bind:this={searchQuery}already marks it as used. The effect adds overhead and can be dropped.- // Ensure searchQuery is considered used by TypeScript - $effect(() => { - searchQuery; - });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/lib/layout/responsiveContainerHeader.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/databases/+page.svelte(3 hunks)src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/storage/+page.svelte(4 hunks)src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/(console)/project-[region]-[project]/storage/+page.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: e2e
🔇 Additional comments (8)
src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte (2)
136-140: Nice job wiring the SearchQuery instanceBinding the
SearchQuerycomponent and keeping the placeholder consistent with the storage context looks solid. This keeps the search UI aligned with the rest of the console pages.
258-260: Clear-search button behavior looks correctSwapping the old link variant for an explicit
on:click={clearSearch}call now ties the empty-state CTA to the helper safely. Much cleaner UX.src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte (2)
28-29: LGTM: Header binding and analytics sourceUsing
bind:searchQueryand settinganalyticsSourcelooks correct and consistent with the new header API.
16-20: Helper fallback doesn’t fix collapsed search clearSearchInput(searchQuery) is identical to searchQuery?.clearInput(), so it still no-ops when undefined—you must clear the URL/query directly (e.g. update the page store or navigation) to reset results on small viewports.Likely an incorrect or invalid review comment.
src/lib/layout/responsiveContainerHeader.svelte (1)
107-107: LGTM: Binding the SearchQuery instance
bind:this={searchQuery}in both layouts correctly exposes the instance to parents viabind:searchQuery.Also applies to: 114-114
src/routes/(console)/project-[region]-[project]/databases/+page.svelte (3)
26-28: LGTM: Local ref and wrapperLocal
searchQueryplusclearSearchdelegating to the helper is clean and safe.
56-58: LGTM: Header binding and placeholder
bind:searchQueryand the updated placeholder are consistent with the new header API.
80-80: LGTM: Clear action now uses the helperButton triggers the centralized clear; matches the intended fix.
| import { Icon } from '@appwrite.io/pink-svelte'; | ||
| import { IconPlus } from '@appwrite.io/pink-icons-svelte'; | ||
| import EmptySearch from '$lib/components/emptySearch.svelte'; | ||
| import { clearSearchInput } from '$lib/helpers/clearSearch'; |
There was a problem hiding this comment.
🧩 Analysis chain
Good: Centralized clear helper
Importing clearSearchInput is the right approach for consistent behavior.
Run the following to confirm the helper clears even when the instance is undefined (e.g., updates URL/search params):
🏁 Script executed:
#!/bin/bash
# Inspect helper implementation for fallback behavior
echo "== helper source =="
sed -n '1,200p' src/lib/helpers/clearSearch.ts || true
echo
echo "== look for fallbacks =="
rg -n -C2 -g 'src/lib/helpers/clearSearch.ts' -e 'goto|URLSearchParams|setSearchParams|history|location|clearInput'Length of output: 1265
Add fallback in clearSearchInput for undefined searchQuery
clearSearchInput currently only calls searchQuery.clearInput; if searchQuery is undefined it no-ops and doesn’t clear URL/search params—add logic to reset search params (e.g. via URLSearchParams or SvelteKit’s goto).
🤖 Prompt for AI Agents
In src/routes/(console)/project-[region]-[project]/databases/+page.svelte around
line 20, the import of clearSearchInput needs its implementation to handle
undefined searchQuery: update clearSearchInput so that if searchQuery is
undefined it still clears the search state by removing the relevant query
param(s) from the current URL (using URLSearchParams and history.replaceState or
SvelteKit's goto with replaceState) and also reset any input value in the DOM if
present; otherwise keep the existing call to searchQuery.clearInput when
searchQuery exists. Ensure the fallback does not trigger a full page reload (use
replace navigation) and preserves other query params.
| let showDelete = false; | ||
| let showAdvancedInfo = false; | ||
| let selectedCertificate = null; //TODO: add type | ||
| let searchQuery; |
| let showDelete = false; | ||
| let showRetry = false; | ||
| let selectedDomain: Models.Domain = null; | ||
| let searchQuery; |
|
|
||
| {#if showSearch && hasSearch} | ||
| <SearchQuery placeholder={searchPlaceholder} /> | ||
| <SearchQuery bind:this={searchQuery} placeholder={searchPlaceholder} /> |
There was a problem hiding this comment.
I think we should avoid this pattern. we have many search inputs and creating a binding instance is not the best DX. we should be somehow able to listen to the changes for clear button and clear queries. We already also have below for queries -
queries.clearAll();not sure if it supports search as well.
What does this PR do?
(Provide a description of what this PR does.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
New Features
UX Improvements