diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx
new file mode 100644
index 00000000000..e7e17b99bf5
--- /dev/null
+++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-plugin-search.spec.tsx
@@ -0,0 +1,22 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vite-plus/test'
+import { renderWithNuqs } from '@/test/nuqs-testing'
+import MarketplacePluginSearch from '../marketplace-plugin-search'
+
+describe('MarketplacePluginSearch', () => {
+ it('updates the catalog query as the user types without opening suggestions', async () => {
+ const user = userEvent.setup()
+ const { onUrlUpdate } = renderWithNuqs()
+
+ const input = screen.getByRole('searchbox', { name: 'Search plugins' })
+ await user.type(input, 'google')
+
+ expect(input).toHaveValue('google')
+ await waitFor(() => {
+ expect(onUrlUpdate.mock.calls.at(-1)?.[0].searchParams.get('q')).toBe('google')
+ })
+ expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
+ expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
index b683cf2ac22..bf2aec9a0bd 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/marketplace-search-autocomplete.spec.tsx
@@ -176,6 +176,46 @@ describe('MarketplaceSearchAutocomplete', () => {
expect(mockTemplateSearch).not.toHaveBeenCalled()
})
+ it('submits the route search form when a suggestion is chosen', async () => {
+ mockPluginSearch.mockResolvedValue({
+ data: {
+ plugins: [
+ {
+ type: 'plugin',
+ org: 'langgenius',
+ name: 'google-search',
+ label: { en_US: 'Google Search' },
+ brief: { en_US: 'Search the web from your workflow.' },
+ category: 'tool',
+ },
+ ],
+ total: 1,
+ },
+ })
+ const user = userEvent.setup()
+ const handleSubmit = vi.fn((event: Event) => {
+ event.preventDefault()
+ })
+
+ const { container } = render(
+ ,
+ { wrapper: Wrapper },
+ )
+
+ container.querySelector('form')?.addEventListener('submit', handleSubmit)
+
+ await user.type(screen.getByRole('combobox'), 'google')
+ await user.click(await screen.findByText('Google Search'))
+
+ expect(handleSubmit).toHaveBeenCalledOnce()
+ })
+
it('does not offer the previous term suggestions while a new search is pending', async () => {
const googleResponse = {
data: {
diff --git a/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx b/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx
index 8ea8619594b..8c0fbd97043 100644
--- a/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx
+++ b/web/app/components/plugins/marketplace/home/marketplace-plugin-search.tsx
@@ -1,28 +1,37 @@
'use client'
-import { useLocale } from '@/context/i18n'
-import { useActivePluginType, useSearchPluginText } from '../atoms'
-import { MarketplaceSearchAutocomplete } from './marketplace-search-autocomplete'
+import { useSearchPluginText } from '../atoms'
type MarketplacePluginSearchProps = {
placeholder: string
}
export default function MarketplacePluginSearch({ placeholder }: MarketplacePluginSearchProps) {
- const locale = useLocale()
- const [category] = useActivePluginType()
const [value, setValue] = useSearchPluginText()
return (
- {
- void setValue(nextValue)
+
)
}
diff --git a/web/app/components/plugins/marketplace/templates/index.tsx b/web/app/components/plugins/marketplace/templates/index.tsx
index b8c45014b49..eb0909b9325 100644
--- a/web/app/components/plugins/marketplace/templates/index.tsx
+++ b/web/app/components/plugins/marketplace/templates/index.tsx
@@ -18,7 +18,7 @@ import HomeHero from '../home/home-hero'
import HomeSearch from '../home/home-search'
import { HomeShell } from '../home/home-shell'
import styles from '../home/home-sticky.module.css'
-import { MarketplaceSearchForm } from '../home/marketplace-search-autocomplete'
+import MarketplaceLiveSearch from '../home/marketplace-live-search'
import { GRID_CLASS } from '../list/collection-constants'
import TemplateCard from './template-card'
import TemplateCategoryNavigation from './template-category-navigation'
@@ -211,14 +211,11 @@ export async function EmbeddedTemplatesMarketplace({
}
search={
- $['newAppFromTemplate.searchAllTemplate'], { ns: 'app' })}
query={query}
- scope="templates"
/>
}