Pricing Blog

Select with search using spark one

  • fe_rojas-1389347124948238356

    FeRojas

    12 days ago

    Has anyone successfully created a searchable dropdown using the Spark One Kit's select component?

    My idea is to replace the default trigger button with a text input. However, my first try didn't worked.

    My ultimate goal is to have a searchable dropdown that filters a data table. The user should be able to type into the input to filter the dropdown options themselves.

    Any help, examples, or references to accelerate development would be greatly appreciated!
  • max.kayr-1389418168568643637

    Max

    11 days ago

    Yes, I have built some 😊 also, the style panel values selects have the Spark Core popover under the hood.
    What are your challenges?
  • fe_rojas-1389598256144842964

    FeRojas

    11 days ago

    Hi! I was trying to trigger the opening of the options in the so-select component by changing the so-button with an input field in the slot as trigger and modifying the input to "emulate" similar click event as so-button, but without success... For now I'll use it as a regular so-select component to filter a table and maybe in the future I'll dive in to achieve that 👍 .
    👍1
  • hiro_swe_1116-1389651758464106606

    takaDev92

    11 days ago

    Select in Spark One Kit is just a styled Radix UI Select. Radix's Select component has no built-in filtering or text input slot, so swapping the trigger for an <input> won't work.
    Instead, build a combobox with Propver + Command (both shipped in SparkOne Kit) - that gives you search, keyboard nav, and the same styling tokens.
  • fe_rojas-1389988477063663827

    FeRojas

    10 days ago

    Thanks for that response! I'll check that combo 👍
  • hiro_swe_1116-1390075996375613471

    takaDev92

    10 days ago

    It's my pleasure.