51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 55:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 54:T7bd,"use client"; import React from "react"; import MultipleSelector, { Option, } from "@/app/registry/spectrumui/multiple-selector-dependencies"; import { InlineCode } from "@/app/registry/spectrumui/inline-code"; const OPTIONS: Option[] = [ { label: "nextjs", value: "Nextjs" }, { label: "React", value: "react" }, { label: "Remix", value: "remix" }, { label: "Vite", value: "vite" }, { label: "Nuxt", value: "nuxt" }, { label: "Vue", value: "vue" }, { label: "Svelte", value: "svelte" }, { label: "Angular", value: "angular" }, { label: "Ember", value: "ember" }, { label: "Gatsby", value: "gatsby" }, { label: "Astro", value: "astro" }, ]; const mockSearch = async (value: string): Promise => { return new Promise((resolve) => { setTimeout(() => { if (!value) { resolve(OPTIONS); } const res = OPTIONS.filter((option) => option.value.includes(value)); resolve(res); }, 1000); }); }; const MultipleSelectorWithAsyncSearchAndOnFocus = () => { const [isTriggered, setIsTriggered] = React.useState(false); return (

Is request been triggered?{" "} {String(isTriggered)}

{ setIsTriggered(true); const res = await mockSearch(value); setIsTriggered(false); return res; }} triggerSearchOnFocus placeholder="trying to search 'a' to get more options..." loadingIndicator={

} emptyIndicator={

no results found.

} />

); }; export default MultipleSelectorWithAsyncSearchAndOnFocus; 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["@spectrumui/multiple-selector-dependencies","@spectrumui/inline-code"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.spectrumhq.in/r/multiple-selector-with-async-search-and-onfocus.json","proxyUrl":"https://shadcnregistry.com/r/spectrumui/multiple-selector-with-async-search-and-onfocus","itemId":"@spectrumui/multiple-selector-with-async-search-and-onfocus"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"app/registry/multiple-selector/usage/multiple-selector-with-async-search-and-onfocus.tsx","content":"$54","type":"registry:component","target":"components/spectrumui/multiple-selector-with-async-search-and-onfocus.tsx"}]}]]}],["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L55",null,{"className":"overflow-auto max-h-80 px-2","children":["$L56","$L57","$L58"]}]}]]}],"$L59","$L5a","$L5b"]}]}]]}]]}]

Multiple Selector With Async Search And OnFocus

Installation

Files

components

Styles