@thisbeyond/solid-select

• Built for Solid: leverages fine-grained reactivity primitives for coordination.
• Flexible: built to support a wide range of cases, from single selects to multi-select autocomplete lists.
• Extendable: use the pre-fabricated components or build your own from the core primitives.
• Zero dependencies: Just pair with Solid and good to go.

How do I get started? 🧭

Install it:

npm install @thisbeyond/solid-select

Use it:

import { Select } from "@thisbeyond/solid-select";
import "@thisbeyond/solid-select/style.css";

const App = () => {
  return (
    <div>
      <Select options={["apple", "banana", "pear", "pineapple", "kiwi"]} />
    </div>
  );
};

export default App;

See more examples at https://solid-select.com

What's implemented? ✔️

• A high level Select component that can be configured with either a static or dynamic list of options.
• Support for single value selection or multiple value selection.
• createOptions helper for configuring filterable options based on input value (complete with match highlighting). Works with lists of plain strings or can be passed a 'key' to filter against lists of objects. Can also be used to configure creating new options on the fly.
• Opt-in sensible default styling. Customise easily or style from scratch.
• Composable building blocks to create your own control.
• Lower level createSelect primitive if you just want the core logic.

Who made this? ✍

Martin Pengelly-Phillips

Why did you make it?

I've been part of the SolidJS community for a while now and one of the things I really like is the emphasis on trying things out and sharing them (https://hack.solidjs.com). The ecosystem is small which creates a lot of opportunity and a lower barrier to entry for sharing I find.

I published my first Solid library (https://solid-dnd.com) a short while back as a first dabble in sharing what I had learnt on a personal project. That went well so when I had to create a multi-select autocomplete control for another personal project I knew I'd be sharing that too - and so Solid Select came to be :)

Changelog

[0.15.0] - 2024-07-06

A focus on improving the ergonomics of createOptions to cover more use cases whilst maintaining a good level of opinionated sensible defaults. Check out the updated https://solid-select.com for examples of the new behaviour in action.

Added

• Support passing a ref to Select. Useful for explicitly controlling focus on the control. Passed down to input rather than control/container as the input is the focusable element.

• Add ability to customise filtering logic by passing a function as filterable parameter for createOptions.

• Support custom formatting in createOptions by passing a format function as a new parameter. This can be used to control the created option labels as well as how the value is displayed when selected.

  As part of this, metadata is also passed to the format function to allow customising aspects that were previously hardcoded (such as the "Create" string when creatable is used or the highlighted elements from filterable).

  It is now possible to fully localise all text using this approach as well as mix highlighted text with other option elements (such as icons) for a richer filtering experience.

  A defaultFormat function is also exported for reuse / blending into custom logic.

• Add control over how text is extracted from an option's value in createOptions. Pass a custom extractText function to handle the extraction. It's result will be stored on the option under the text parameter and then used for existence comparison as well as filtering comparison.

• Support returning an array of options from createable in createOptions for cases where multiple options might be candidates for creation from a single input string.

Changed

• Move to custom createable function in createOptions the decision on when to show a "create" option based on existing options.

  As a convenience, the createable function will be passed an exists boolean parameter (computed by checking the extracted text of each option against the current input string), but it will be up to the createable function what to do with this. In other words, the createable function will now always be called on input value change, whereas previously it was only called if the exist check passed internally. The function is also passed the current options to be displayed if custom checks are desired.

  The creatable function can then return undefined (or an empty list) to prevent a "create" option being added.

  To avoid this being a backwards incompatible change that could cause unintended issues (duplicate values being created), solid-select will attempt to detect if the createable function passed has been updated to accept the new exists parameter. If it hasn't, then a warning is issued and the exist check internally will prevent calling the function.

• Pass disable function on createOptions the keyed value rather than full object when a key parameter is also supplied.

• Improve out-of-the-box styling so that Select renders nicer without customisation. For example, background colour of select and option list now defaults to white and children of select have sensible border and sizing defaults.

• Support extracting fuzzySort target ("key") via function. Useful when a consumer wants to sort on a nested key directly rather than use the extracted text of an option.

• Attempt to improve typings and make more explicit the differntiation between different similarly named types (e.g. the Select option and createOptions option). Some of these typing are not also exported for direct reuse.

• Modernise tooling for library build and packaging. Notably use pnpm as default packagae manager, switch from rollup to tsup for builds, drop commonjs support and use plain CSS rather than unnecessarily generate style.css through the now sunsetted windicss tool.

Fixed

• Fix some styling issues such as focus outlines not being properly applied and border radius being clipped by container.

• Update typings to correctly represent the supported functionality of returning elements from a custom format function. Thanks to LouisLuBrain for the fix.

• Avoid Apple devices stealing focus through autocorrect suggestions by setting autoCorrect to off on Input component. Thanks to MaAlkhalaf for the fix.