v29.32.1

May 24, 2021

Autosuggest: Fix missing/invalid group headings in some cases

v29.21.1

Jan 21, 2021

Autosuggest: Ensure input occupies the full width of its container

v29.20.1

Jan 6, 2021

Autosuggest: Fix bug where async suggestions may not be visible

This fixes a bug where suggestions wouldn't become visible if the suggestions prop was initially empty and then populated asynchronously, only becoming visible on the next user interaction, e.g. typing in the field.

v29.18.0

Dec 8, 2020

Autosuggest: Add support for custom messages when no suggestions are present

If no suggestions are available and you'd like to provide an explanation to the user, you can now pass an object with a messages property to the suggestions prop.

EXAMPLE USAGE

<Autosuggest
  suggestions={{ message: 'No suggestions available.' }}
  {...restProps}
/>

v29.17.0

Nov 18, 2020

Autosuggest: Add filterSuggestions function, allow suggestions prop to be a function

The logic for filtering suggestions typically lives on the server rather than the client because it’s impractical to send all possible suggestions over the network. However, when prototyping in Playroom or working with smaller datasets, you may want to perform this filtering on the client instead. For this case, we now provide a filterSuggestions function to make this as painless as possible.

To better support this behaviour, you can now pass a function to the suggestions prop. When executed, this function will be passed the current value of the field.

EXAMPLE USAGE

import { Autosuggest, filterSuggestions } from 'braid-design-system';

<Autosuggest
  suggestions={filterSuggestions([
    { text: 'Apples', value: 1 },
    { text: 'Bananas', value: 2 }
  ])}
  {...restProps}
  />

v29.15.0

Nov 9, 2020

Autosuggest: Support custom label text for suggestions

You can now optionally provide different suggestion text from the value that gets inserted into the text field.

EXAMPLE USAGE

<Autosuggest
  suggestions={[{ text: 'apples', label: 'Add "apples"' }]}
  {...restProps}
/>

v29.14.0

Nov 6, 2020

Autosuggest: Forward ref prop to input element

v29.11.0

Oct 13, 2020

Autosuggest: Add hideSuggestionsOnSelection prop

Typically we hide the suggestion list when a selection is made, assuming that the field is now populated with the desired value. However, if the surrounding application clears the text field when a selection is made, this clashes with the user expectation that the field has been reverted back to its initial state with suggestions visible. To cater for this, we now allow you to opt out of this behaviour via the hideSuggestionsOnSelection boolean prop.

EXAMPLE USAGE

<Autosuggest hideSuggestionsOnSelection={false} {...rest} />

v29.8.0

Oct 1, 2020

Autosuggest, Dialog: Lighten backdrop opacity from 0.7 to 0.4

v29.7.0

Sep 17, 2020

TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby

v29.6.0

Sep 16, 2020

Autosuggest: Add translations prop to enable internationalisation

v29.6.0

Sep 16, 2020

Autosuggest: Improve screen reader experience

Add description informing user that suggestions will appear below field. Also, notify users about how many suggestions are available, and about automatic selections.

v29.5.0

Sep 10, 2020

Autosuggest: Update to ARIA 1.2 combobox spec

v28.3.0

Jul 1, 2020

Autosuggest: Fix suggestion double tap bug on iOS

Tapping a suggestion on iOS triggers the hover state rather than a selection, forcing users to tap a second time to select the suggestion.

This is due to the way that iOS simulates mouse events in a touch environment. If the document is updated during a mouseover, mouseenter or mousemove event, the subsequent click event is never fired. While it may seem counterintuitive, this ensures that touch users are able to see hover effects that make changes to the page.

To fix this, we now trigger our suggestion hover logic on touchstart so that the document doesn't change during mouse events, which then allows the click event to fire uninterrupted.

v27.3.0

May 21, 2020

Autosuggest: Apply darker background when disabled

When disabled, Autosuggest elements didn't have the same dark background as other disabled fields. This has now been fixed.

v25.7.1

May 11, 2020

TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions.

The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.

Affects the following components:

  • PasswordField: visibility toggle button
  • TextField: clear button
  • Autosuggest: clear button

v25.7.1

May 11, 2020

TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click

Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.

Affects the following components:

  • PasswordField: visibility toggle button
  • TextField: clear button
  • Autosuggest: clear button

v25.6.0

May 1, 2020

Autosuggest: Support suggestion descriptions

You can now provide a description as part of each suggestion item, e.g.:

<Autosuggest
  suggestions={[
    {
      text: 'Apples',
      value: 123,
      description: 'Juicy and delicious',
    },
  ]}
  {...rest}
/>

v25.5.1

Apr 28, 2020

Autosuggest: Don't select suggestions onBlur when using automaticSelection and suggestions are closed

v25.4.1

Apr 22, 2020

Autosuggest: When using the automaticSelection prop, we now prevent automatic selection from ocurring if the input value hasn't changed since focusing the field

v23.0.2

Mar 10, 2020

Hide webkit native clear field on search type inputs