Skip to content

Releases: thisbeyond/solid-select

Release 0.6.0

24 Feb 22:38
Compare
Choose a tag to compare

Added

  • Add builtin fuzzy search and sort algorithm. Use as default for filtering in
    createOptions. This replaces the previous filtering logic that could only
    match exact segments and was case sensitive. The new algorithm is case
    insensitive, can match multiple partials and prioritises start of string /
    start of word / consecutive matches. When sorting, if two matches have the
    same score then their original array index is used as the tiebreaker.

    sorted = fuzzySort("spp", ["pineapple", "rose apple",  "star apple"])
    // [{ target: "star apple", ... }, { target: "rose apple", ... }]

    A helper to highlight matches is also included:

    highlighted = fuzzyHighlight(sorted[0])
    // <><mark>s</mark>tar a<mark>pp</mark>le</>

Changed

  • Mark package as side effect free.

Release 0.5.0

20 Feb 09:29
Compare
Choose a tag to compare

Added

  • Provide a new helper, createOptions, to configure the Select component
    with (optional) filtering, dynamic creation of options from input value and
    setting disabled options based on value:

    <Select
      {...createOptions(["apple", "banana", "pear", "pineapple", "kiwi"], {
        filterable: true,
        createable: true,
        disable: (value) => value === "pear",
      })}
    />

    Note: All of the functionality provided by the helper can be implemented
    and/or customised manually. The helper only configures the props to pass to
    the Select component as a convenience.

  • Support disabling individual options in the list. When an option is disabled
    it is still displayed in the option list (differentiated with some styling),
    but it cannot be picked. By default, no options are ever considered disabled.
    Pass a custom isOptionDisabled function to either createSelect or the
    Select component to customise how an option is determined as disabled or
    not:

    <Select
      options={["apple", "pear", "kiwi"]}
      isOptionDisabled={option => option === "pear"}
    />

Changed

  • Breaking Change Replace createFilterable with more generic
    createOptions helper. For the most part this should just be a matter of
    updating imports and name:

    <Select {...createFilterable(["apple", "banana", "pear"])}/>

    becomes

    <Select {...createOptions(["apple", "banana", "pear"])}/>

    As part of this change, <mark> tags are now used for highlighting instead of
    <b> tags (as more appropriate). Default styling also updated to only
    underline matching text for less visual noise.

Release 0.4.1

12 Feb 11:26
Compare
Choose a tag to compare

Fixed

  • Fix remove value buttons being activated on form submission. The W3C HTML5
    Button

    spec defines the default type of a button to be a submit button. This means
    that placing a multi select in a form could cause a remove value button to be
    activated when a form submission was requested by pressing the 'enter' key.
    The visible effect of this was that pressing enter in the form would remove
    multi values one by one until they were all gone. Setting the type of the
    remove button explicity to type="button" avoids this behaviour.

Release 0.4.0

08 Feb 19:43
Compare
Choose a tag to compare

Added

  • Support passing id prop to the Select control. The id will be set on the
    contained input allowing the control to be associated with a corresponding
    label for example.

Release 0.3.0

07 Feb 19:30
Compare
Choose a tag to compare

Added

  • Expose a hasValue property as part of the createSelect returned interface.
    The reactive property handles the differences between 'multiple' and 'single'
    value modes correctly in order to return an accurate boolean value.

Fixed

  • Fix reliance on implicit boolean conversion for control show logic. Use the
    new hasValue check instead to properly account for multi vs single value
    differences.

Release 0.2.0

04 Feb 22:17
Compare
Choose a tag to compare

Added

  • Support picking multiple options in Select component.

    Add a multiple prop that, when true, customises the component to display and
    manage multiple values. Support removing values with keyboard backspace or
    removing an arbitrary value through clicking a remove button on a value.

    <Select multiple options={["one", "two", "three"]} />

    As part of this, expose in the select interface whether it was configured for
    multiple values or not. This makes it easier for consumers to check the mode
    and can be useful for determining whether to expect value as an array or not.

  • Support options generation via function callback. When options is specified
    as a function, call it on input change passing the current input value. The
    function should return the list of options to use. For example:

    (inputValue: string) =>
      ["one", "two", "three"].filter((option) => option.startsWith(inputValue));

    To address the common case of filtering options, also provide a
    createFilterable helper. The helper accepts the initial list of options and
    returns the props required to set up filtering them against the input value,
    complete with highlighting the match in the string. Can be used to filter
    plain strings (or objects by passing a 'key' to the configuration):

    <Select {...createFilterable(["one", "two", "three"])} />
  • Make Select component read only by default (when a static list of options is
    passed). When in read only mode, the input is not editable. This can be
    overridden explicitly by passing the readonly prop to the Select component
    with the preferred value.

  • Support autofocus attribute on Select component (to request the browser to
    auto focus the field on page load).

Changed

  • Toggle options list on click rather always open. This is more natural as
    someone might just be checking the options and then want to close the control
    with another click on the control.

Fixed

  • Fix inconsistent text rendering in the Select input.

    Ensure the input element matches the specified font for the control so that
    there is no difference between displayed value and typed text rendering.

    Also, prevent the input computing a different size due to browser default
    styles (e.g. margin, padding). Force a standard line-height for the control
    as Firefox prevents setting a smaller line-height for inputs (which can cause
    a discrepancy in how the value text is rendered vs the input text).

Release 0.1.0

23 Jan 00:28
Compare
Choose a tag to compare

Initial release featuring core create select logic, accompanying component
blocks and a composed component for convenience.