WAI-ARIA compliant React autosuggest component

Overview

Build Status Contributors Coverage Status

npm Downloads npm Version gzip size

React Autosuggest

Project Status

Looking for maintainers!

Unfortunately, I don't have the time to maintain this project anymore. If you are interested to help, please reach out to me on Twitter @moroshko.

Demo

Check out the Homepage and the Codepen examples.

Features

Installation

yarn add react-autosuggest

or

npm install react-autosuggest --save

You can also use the standalone UMD build:

<script src="https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js"></script>

Basic Usage

import React from 'react';
import Autosuggest from 'react-autosuggest';

// Imagine you have a list of languages that you'd like to autosuggest.
const languages = [
  {
    name: 'C',
    year: 1972
  },
  {
    name: 'Elm',
    year: 2012
  },
  ...
];

// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : languages.filter(lang =>
    lang.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

class Example extends React.Component {
  constructor() {
    super();

    // Autosuggest is a controlled component.
    // This means that you need to provide an input value
    // and an onChange handler that updates this value (see below).
    // Suggestions also need to be provided to the Autosuggest,
    // and they are initially empty because the Autosuggest is closed.
    this.state = {
      value: '',
      suggestions: []
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { value, suggestions } = this.state;

    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: 'Type a programming language',
      value,
      onChange: this.onChange
    };

    // Finally, render it!
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

Props

Prop Type Required Description
suggestions Array These are the suggestions that will be displayed. Items can take an arbitrary shape.
onSuggestionsFetchRequested Function Will be called every time you need to recalculate suggestions.
onSuggestionsClearRequested Function * Will be called every time you need to set suggestions to [].
getSuggestionValue Function Implement it to teach Autosuggest what should be the input value when suggestion is clicked.
renderSuggestion Function Use your imagination to define how suggestions are rendered.
inputProps Object Pass through arbitrary props to the input. It must contain at least value and onChange.
containerProps Object Pass through arbitrary props to the container. Useful if you need to override the default props set by Autowhatever, for example, for accessibility.
onSuggestionSelected Function Will be called every time suggestion is selected via mouse or keyboard.
onSuggestionHighlighted Function Will be called every time the highlighted suggestion changes.
shouldRenderSuggestions Function When the input is focused, Autosuggest will consult this function when to render suggestions. Use it, for example, if you want to display suggestions when input value is at least 2 characters long.
alwaysRenderSuggestions Boolean Set it to true if you'd like to render suggestions even when the input is not focused.
highlightFirstSuggestion Boolean Set it to true if you'd like Autosuggest to automatically highlight the first suggestion.
focusInputOnSuggestionClick Boolean Set it to false if you don't want Autosuggest to keep the input focused when suggestions are clicked/tapped.
multiSection Boolean Set it to true if you'd like to display suggestions in multiple sections (with optional titles).
renderSectionTitle Function
when multiSection={true}
Use your imagination to define how section titles are rendered.
getSectionSuggestions Function
when multiSection={true}
Implement it to teach Autosuggest where to find the suggestions for every section.
renderInputComponent Function Use it only if you need to customize the rendering of the input.
renderSuggestionsContainer Function Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves.
theme Object Use your imagination to style the Autosuggest.
id String Use it only if you have multiple Autosuggest components on a page.

suggestions (required)

Array of suggestions to display. The only requirement is that suggestions is an array. Items in this array can take an arbitrary shape.

For a plain list of suggestions, every item in suggestions represents a single suggestion. It's up to you what shape every suggestion takes. For example:

const suggestions = [
  {
    text: "Apple"
  },
  {
    text: "Banana"
  },
  {
    text: "Cherry"
  },
  {
    text: "Grapefruit"
  },
  {
    text: "Lemon"
  }
];

For multiple sections, every item in suggestions represents a single section. Again, it's up to you what shape every section takes. For example:

const suggestions = [
  {
    title: "A",
    suggestions: [
      {
        id: "100",
        text: "Apple"
      },
      {
        id: "101",
        text: "Apricot"
      }
    ]
  },
  {
    title: "B",
    suggestions: [
      {
        id: "102",
        text: "Banana"
      }
    ]
  },
  {
    title: "C",
    suggestions: [
      {
        id: "103",
        text: "Cherry"
      }
    ]
  }
];

onSuggestionsFetchRequested (required)

This function will be called every time you might need to update suggestions. It has the following signature:

function onSuggestionsFetchRequested({ value, reason })

where:

  • value - the current value of the input
  • reason - string describing why onSuggestionsFetchRequested was called. The possible values are:
    • 'input-changed' - user typed something
    • 'input-focused' - input was focused
    • 'escape-pressed' - user pressed Escape to clear the input (and suggestions are shown for empty input)
    • 'suggestions-revealed' - user pressed Up or Down to reveal suggestions
    • 'suggestion-selected' - user selected a suggestion when alwaysRenderSuggestions={true}

onSuggestionsClearRequested (required unless alwaysRenderSuggestions={true})

This function will be called every time you need to clear suggestions.

All you have to do in this function is to set suggestions to [].

Note: When alwaysRenderSuggestions={true}, you don't have to implement this function.

getSuggestionValue (required)

When user navigates the suggestions using the Up and Down keys, the input value should be set according to the highlighted suggestion. You design how suggestion is modelled. Therefore, it's your responsibility to tell Autosuggest how to map suggestions to input values.

This function gets the suggestion in question, and it should return a string. For example:

function getSuggestionValue(suggestion) {
  return suggestion.text;
}

renderSuggestion (required)

Use your imagination to define how suggestions are rendered.

The signature is:

function renderSuggestion(suggestion, { query, isHighlighted })

where:

  • suggestion - The suggestion to render
  • query - Used to highlight the matching string. As user types in the input, query will be equal to the trimmed value of the input. Then, if user interacts using the Up or Down keys, the input will get the value of the highlighted suggestion, but query will remain to be equal to the trimmed value of the input prior to the Up and Down interactions.
  • isHighlighted - Whether or not the suggestion is highlighted.

It should return a string or a ReactElement. For example:

function renderSuggestion(suggestion) {
  return <span>{suggestion.text}</span>;
}

Important: renderSuggestion must be a pure function (we optimize rendering performance based on this assumption).

inputProps (required)

Autosuggest is a controlled component. Therefore, you MUST pass at least a value and an onChange callback to the input. You can pass any other props as well. For example:

const inputProps = {
  value, // usually comes from the application state
  onChange, // called every time the input value changes
  onBlur, // called when the input loses focus, e.g. when user presses Tab
  type: "search",
  placeholder: "Enter city or postcode"
};

inputProps.onChange (required)

The signature is:

function onChange(event, { newValue, method })

where:

  • newValue - the new value of the input
  • method - string describing how the change has occurred. The possible values are:
    • 'down' - user pressed Down
    • 'up' - user pressed Up
    • 'escape' - user pressed Escape
    • 'enter' - user pressed Enter
    • 'click' - user clicked (or tapped) on suggestion
    • 'type' - none of the methods above (usually means that user typed something, but can also be that they pressed Backspace, pasted something into the input, etc.)

inputProps.onBlur (optional)

The signature is:

function onBlur(event, { highlightedSuggestion })

where:

  • highlightedSuggestion - the suggestion that was highlighted just before the input lost focus, or null if there was no highlighted suggestion.

containerProps

Provides arbitrary properties to the outer div container of Autosuggest. Allows the override of accessibility properties.

const containerProps = {
  dataId: 'my-data-id'
  // ... any other properties
};

onSuggestionSelected (optional)

This function is called when suggestion is selected. It has the following signature:

function onSuggestionSelected(event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method })

where:

  • suggestion - the selected suggestion
  • suggestionValue - the value of the selected suggestion (equivalent to getSuggestionValue(suggestion))
  • suggestionIndex - the index of the selected suggestion in the suggestions array
  • sectionIndex - when rendering multiple sections, this will be the section index (in suggestions) of the selected suggestion. Otherwise, it will be null.
  • method - string describing how user selected the suggestion. The possible values are:
    • 'click' - user clicked (or tapped) on the suggestion
    • 'enter' - user selected the suggestion using Enter

onSuggestionHighlighted (optional)

This function is called when the highlighted suggestion changes. It has the following signature:

function onSuggestionHighlighted({ suggestion })

where:

  • suggestion - the highlighted suggestion, or null if there is no highlighted suggestion.

shouldRenderSuggestions (optional)

By default, suggestions are rendered when the input isn't blank. Feel free to override this behaviour.

This function gets the current value of the input and the reason why the suggestions might be rendered, and it should return a boolean.

For example, to display suggestions only when input value is at least 3 characters long, do:

function shouldRenderSuggestions(value, reason) {
  return value.trim().length > 2;
}

You can use the second reason argument to finely control exactly when the suggestions are rendered. The possible values are closely related to those for onSuggestionsFetchRequested, plus a few extra cases:

  • 'input-changed' - user typed something
  • 'input-focused' - input was focused
  • 'input-blurred' - input was un-focused
  • 'escape-pressed' - user pressed Escape to clear the input (and suggestions are shown for empty input)
  • 'suggestions-revealed' - user pressed Up or Down to reveal suggestions
  • 'suggestions-updated' - the suggestions were updated
  • 'render' - the component is re-rendering

When shouldRenderSuggestions returns true, suggestions will be rendered only when the input is focused.

If you would like to render suggestions regardless of whether the input is focused or not, set alwaysRenderSuggestions={true} (shouldRenderSuggestions is ignored in this case).

alwaysRenderSuggestions (optional)

Set alwaysRenderSuggestions={true} if you'd like to always render the suggestions.

Important: Make sure that the initial value of suggestions corresponds to the initial value of inputProps.value. For example, if you'd like to show all the suggestions when the input is empty, your initial state should be something like:

this.state = {
  value: "",
  suggestions: allSuggestions
};

highlightFirstSuggestion (optional)

When highlightFirstSuggestion={true}, Autosuggest will automatically highlight the first suggestion. Defaults to false.

focusInputOnSuggestionClick (optional)

By default, focusInputOnSuggestionClick={true}, which means that, every time suggestion is clicked (or tapped), the input keeps the focus.

On mobile devices, when the input is focused, the native keyboard appears. You'll probably want to lose the focus when suggestion is tapped in order to hide the keyboard.

You can do something like this:

<Autosuggest focusInputOnSuggestionClick={!isMobile} ... />

where isMobile is a boolean describing whether Autosuggest operates on a mobile device or not. You can use kaimallea/isMobile, for example, to determine that.

multiSection (optional)

By default, Autosuggest renders a plain list of suggestions.

If you'd like to have multiple sections (with optional titles), set multiSection={true}.

renderSectionTitle (required when multiSection={true})

When rendering multiple sections, you need to tell Autosuggest how to render a section title.

This function gets the section to render (an item in the suggestions array), and it should return a string or a ReactElement. For example:

function renderSectionTitle(section) {
  return <strong>{section.title}</strong>;
}

If renderSectionTitle returns null or undefined, section title is not rendered.

getSectionSuggestions (required when multiSection={true})

When rendering multiple sections, you need to tell Autosuggest where to find the suggestions for a given section.

This function gets the section to render (an item in the suggestions array), and it should return an array of suggestions to render in the given section. For example:

function getSectionSuggestions(section) {
  return section.suggestions;
}

Note: Sections with no suggestions are not rendered.

renderInputComponent (optional)

You shouldn't specify renderInputComponent unless you want to customize the rendering of the input.

To keep Autosuggest accessible, renderInputComponent MUST:

  • render an input
  • pass through all the provided inputProps to the input

Example:

const renderInputComponent = inputProps => (
  <div>
    <input {...inputProps} />
    <div>custom stuff</div>
  </div>
);

Note: When using renderInputComponent, you still need to specify the usual inputProps. Autosuggest will merge the inputProps that you provide with other props that are needed for accessibility (e.g. 'aria-activedescendant'), and will pass the merged inputProps to renderInputComponent.

renderSuggestionsContainer (optional)

You shouldn't specify renderSuggestionsContainer unless you want to customize the content or behaviour of the suggestions container beyond rendering the suggestions themselves. For example, you might want to add a custom text before/after the suggestions list, or to customize the scrolling behaviour of the suggestions container.

The signature is:

function renderSuggestionsContainer({ containerProps, children, query })

where:

  • containerProps - props that you MUST pass to the topmost element that is returned from renderSuggestionsContainer.
  • children - the suggestions themselves. It's up to you where to render them.
  • query - Same as query in renderSuggestion.

For example:

function renderSuggestionsContainer({ containerProps, children, query }) {
  return (
    <div {...containerProps}>
      {children}
      <div>
        Press Enter to search <strong>{query}</strong>
      </div>
    </div>
  );
}

When renderSuggestionsContainer returns a composite component (e.g. <IsolatedScroll ... /> as opposed to a DOM node like <div ... />), you MUST call containerProps.ref with the topmost element that the composite component renders.

For example:

import IsolatedScroll from "react-isolated-scroll";

function renderSuggestionsContainer({ containerProps, children }) {
  const { ref, ...restContainerProps } = containerProps;
  const callRef = isolatedScroll => {
    if (isolatedScroll !== null) {
      ref(isolatedScroll.component);
    }
  };

  return (
    <IsolatedScroll ref={callRef} {...restContainerProps}>
      {children}
    </IsolatedScroll>
  );
}

theme (optional)

Autosuggest comes with no styles.

It uses react-themeable that allows you to style your Autosuggest component using CSS Modules, Radium, Aphrodite, JSS, Inline styles, and global CSS.

For example, to style the Autosuggest using CSS Modules, do:

/* theme.css */

.container { ... }
.input { ... }
.suggestionsContainer { ... }
.suggestion { ... }
.suggestionHighlighted { ... }
...
import theme from "theme.css";
<Autosuggest theme={theme} ... />

When not specified, theme defaults to:

{
  container:                'react-autosuggest__container',
  containerOpen:            'react-autosuggest__container--open',
  input:                    'react-autosuggest__input',
  inputOpen:                'react-autosuggest__input--open',
  inputFocused:             'react-autosuggest__input--focused',
  suggestionsContainer:     'react-autosuggest__suggestions-container',
  suggestionsContainerOpen: 'react-autosuggest__suggestions-container--open',
  suggestionsList:          'react-autosuggest__suggestions-list',
  suggestion:               'react-autosuggest__suggestion',
  suggestionFirst:          'react-autosuggest__suggestion--first',
  suggestionHighlighted:    'react-autosuggest__suggestion--highlighted',
  sectionContainer:         'react-autosuggest__section-container',
  sectionContainerFirst:    'react-autosuggest__section-container--first',
  sectionTitle:             'react-autosuggest__section-title'
}

The following picture illustrates how theme keys correspond to Autosuggest DOM structure:

DOM structure

id (required when multiple Autosuggest components are rendered on a page)

The only reason id exists, is to set ARIA attributes (they require a unique id).

When rendering a single Autosuggest, don't set the id (it will be set to '1', by default).

When rendering multiple Autosuggest components on a page, make sure to give them unique ids. For example:

<Autosuggest id="source" ... />
<Autosuggest id="destination" ... />

Development

npm install
npm start

Now, open http://localhost:3000/demo/dist/index.html and start hacking!

License

MIT

Comments
  • Support for onSuggestionFocused and onSuggestionUnfocused options

    Support for onSuggestionFocused and onSuggestionUnfocused options

    Hi @moroshko , I'm just submitting this tiny pull request to add support for a onSuggestionFocused callback option as I mention in #7

    Let me know what you think

    opened by jstejada 24
  • Always render suggestions – fix #133

    Always render suggestions – fix #133

    Hey hey,

    this is a PR to fix #133. It implements a new alwaysRenderSuggestions boolean prop, as we discussed. When alwaysRenderSuggestions={true}, the checks to decide whether to render the suggestions are bypassed. Also comes with some documentation on this new prop, and relevant tests.

    I'd be keen to get a review of whether the tests are relevant and thorough enough, and make sure this new prop is used in the right places.

    Also two things occurred to me while writing this PR:

    • Having an example for this would only be relevant if it came with the kind of UI this is useful for. Do we want to make one? (another way to see this would be to have a list of "projects react-autosuggest is used on" somewhere).
    • It might or might not be be obvious that in order for this to be useful, you need to have a list of suggestions to display even when the user hasn't typed anything yet (otherwise there's nothing to display, doh). Does this need to be stated in the docs?
    opened by thibaudcolas 23
  • State handling

    State handling

    Hi, we have encountered issue with component state. The component hold current value of input in it's internal state, so when the property inputAttributes.value is changed the change is ignored by Autosuggest component.

    Here is the demo https://jsfiddle.net/1y4v9pw6/3/

    The fix is remove state from component https://github.com/keboola/react-autosuggest/commit/d13008c27e2148205855b0a2fea70dfdc03eaeef and let it behave as controlled component https://facebook.github.io/react/docs/forms.html#controlled-components

    Here is the demo same demo but with patched Autosuggest https://jsfiddle.net/2cuf1mzu/1/

    This fix BC break, maybe also component which only holds the state could be provided for BC compatiblity.

    Our use case where we discovered this issue is form where the initial value of Autosuggest component is dependent on some select value which is used before autosuggest.

    Also passing a value instead of event to handler inputAttributes.onChange is bit strange. thanks.

    opened by Halama 20
  • Add focusFirstSuggestion setting

    Add focusFirstSuggestion setting

    Overview

    This PR adds a setting selectFirstSuggestion which, when true, automatically selects the first suggestion in the list. Note: this PR also fixes a bug where when you hover over an option and hit enter the selected item was not completed.

    Closes https://github.com/moroshko/react-autosuggest/issues/147

    Details

    • Adds a selectFirstSuggestion prop which defaults to false
    • Adds a method maybeSelectFirstSuggestion which selects the first selection when applicable
    • Calls the above method in onChange and onFocus
    • Adds a call to getSuggestionValue on Enter events to ensure the value for the selected element is input.
    • Adds a call to maybeCallOnChange on Enter events to ensure that clients get the onChange event (this is for instances where the element was hovered or auto-selected but the client never got an onChange event).
    • Adds tests for all related functionality

    Screen

    Selecting and entering first item

    Selecting and entering first item in multi-sections

    Bug fix - now selects on hover with enter:

    opened by rickhanlonii 19
  • Add aria-label for accessibility

    Add aria-label for accessibility

    When I ran accessibility test on AutoSuggest I received issues that the combobox and input fields don't have descriptions. To fix these issues I added aria-labels which are optional and the users can pass the values of it through props. This would also fix (#485 ), (#283 ), (#642 ). I'm also creating a pull request for react-autowhatever to pass down the aria-label to the suggestions container.

    opened by judygab 18
  • redux.creatStore is not a function

    redux.creatStore is not a function

    Hi,

    I just install the latest version. Then copied the code from basic sample and make a component (compoent Auto) with that code. Then I import Auto into my project. Run, then I got this error

    AutosuggestContainer.js:100Uncaught TypeError: (0 , _redux.createStore) is not a function(…)
    

    Here is the code for Auto of component https://jsfiddle.net/craigcosmo/ju43d66a/

    opened by craigcosmo 18
  • On First Focus, Suggestions Don't Render if a Value is Present

    On First Focus, Suggestions Don't Render if a Value is Present

    I'm running into an issue where an Autosuggest field is not rendering suggestions on first focus if the field is initially rendered with a value. For instance, if you change the 'Basic' Codepen example to initialize state with a value of "C", no suggestion will be rendered when the field first gains focus (when it should give the suggestions "C, C++, C#, and Clojure). Editing the field kicks the suggestions into gear, and they begin appearing after that without issue.

    I'm building a form that at times might have some fields initialized with values that are partial matches for suggestions, and would like to see the suggestions show up on first focus.

    Is this a bug, or am I doing something wrong? Thank you in advance!

    opened by BigPrimeNumbers 17
  • publish v3 to npm?

    publish v3 to npm?

    Hey, thank you for this excellent react component!

    I would really like to include v3 in my project, also because of the redux integration, do you think it is ready for prime time?

    Would you mind putting it up on npm?

    Keep up the great work!

    opened by janusch 16
  • Change input value by props

    Change input value by props

    Hi there.

    I have a problem: I use suggestor as element of user-edit form. After first user is edited, I open second user. Now I have old value from first user in suggester input.

    I need to change input value by props, not by any user interactions. How can I do that?

    opened by Diokuz 16
  • Suggestions list via props instead of callback for flux data flow?

    Suggestions list via props instead of callback for flux data flow?

    Is there any way of doing this? I really like the component because it's the easiest autocomplete I tried, looks great, and has full ARIA support - lots of things to like!

    What would be even better is a lightweight version that simply takes in the suggestions as a prop, but everything else remains as is. I originally tried putting a flux action call in the suggestions function, but since fluxible returns the results of actions onto props, I didn't have a good way of calling the callback after the props became available. I was trying to fool around in the source a bit to see if I could get it working but didn't quite get there... is this something you would think about adding in the future? For now I'm adding my calls to the server directly into the component, but I'd really like to take those out in the future.

    Thanks!

    opened by anyong 16
  • Always render suggestions

    Always render suggestions

    Hey hey,

    I have a specific use case where I need the list of suggestions to always be rendered. I expected this to be the case if shouldRenderSuggestions always returned true, but things are a bit more complicated.

    In reality, for suggestions to be rendered the criteria are:

    • isFocused, and
    • !isCollapsed, and
    • suggestions.length > 0, and
    • Result from shouldRenderSuggestions

    (see https://github.com/moroshko/react-autosuggest/blob/master/src/Autosuggest.js#L177)

    I think it makes perfect sense to check for "are there suggestions" and I don't know what isCollapsed is about. For isFocused however, this seems like a sensible default but not necessarily something that this component should have opinions about. react-autosuggest strikes me as rather unopinionated in other parts of its API.

    I can see at least three ways to tackle this:

    • Have a configuration option to define whether isFocused (and isCollapsed?) should be checked. This seems like the simplest choice because it's fully backward compatible, but not the best IMHO because shouldRenderSuggestions's name suggests that it should be responsible for this.
    • Pass isFocused to shouldRenderSuggestions, and let the component's user decide whether they want to take it into account or not. Seems like the option that aligns best with the existing API. It's just an extra parameter, and its logic is somewhat similar to that of giving a reason for onSuggestionsUpdateRequested and leaving it up to the user to decide what they want to do. However this isn't backwards compatible.
    • If you don't think this use case is worth supporting, then at least update shouldRenderSuggestions's documentation to make it clear that suggestions are only rendered when input field is focused.

    In those three cases I'm happy to contribute a PR, but I think this is worth discussing in advance :)

    feature request 
    opened by thibaudcolas 15
  • Bump flat and mocha

    Bump flat and mocha

    Bumps flat to 5.0.2 and updates ancestor dependency mocha. These dependencies need to be updated together.

    Updates flat from 4.1.0 to 5.0.2

    Commits
    • e5ffd66 Release 5.0.2
    • fdb79d5 Update dependencies, refresh lockfile, format with standard.
    • e52185d Test against node 14 in CI.
    • 0189cb1 Avoid arrow function syntax.
    • f25d3a1 Release 5.0.1
    • 54cc7ad use standard formatting
    • 779816e drop dependencies
    • 2eea6d3 Bump lodash from 4.17.15 to 4.17.19
    • a61a554 Bump acorn from 7.1.0 to 7.4.0
    • 20ef0ef Fix prototype pollution on unflatten
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by timoxley, a new releaser for flat since your current version.


    Updates mocha from 7.1.1 to 10.2.0

    Release notes

    Sourced from mocha's releases.

    v10.2.0

    10.2.0 / 2022-12-11

    :tada: Enhancements

    • #4945: API: add possibility to decorate ESM name before import (@​j0tunn)

    :bug: Fixes

    :book: Documentation

    v10.1.0

    10.1.0 / 2022-10-16

    :tada: Enhancements

    :nut_and_bolt: Other

    v10.0.0

    10.0.0 / 2022-05-01

    :boom: Breaking Changes

    :nut_and_bolt: Other

    ... (truncated)

    Changelog

    Sourced from mocha's changelog.

    10.2.0 / 2022-12-11

    :tada: Enhancements

    • #4945: API: add possibility to decorate ESM name before import (@​j0tunn)

    :bug: Fixes

    :book: Documentation

    10.1.0 / 2022-10-16

    :tada: Enhancements

    :nut_and_bolt: Other

    10.0.0 / 2022-05-01

    :boom: Breaking Changes

    :nut_and_bolt: Other

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Cannot read properties of undefined (reading 'focus') error on console on mobile use

    Cannot read properties of undefined (reading 'focus') error on console on mobile use

    Hello,

    our test automation on Selenium and some of our users are sometimes hitting this mentioned error with version "react-autosuggest": "^10.1.0".

    Sentry provides this code as the place where it happens: image

    Only happens on mobile, desktop seems to be fine.

    Hope this helps.

    Br, Mikko

    opened by mikkopori 0
  • React 18: `getSectionSuggestions` is called with `undefined` after selecting suggestion on mobile device

    React 18: `getSectionSuggestions` is called with `undefined` after selecting suggestion on mobile device

    Are you reporting a bug?

    https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-qi2jdy?file=src%2FApp.js

    On a mobile/touch device, select a suggestion.

    Observed behaviour: Runtime exception: TypeError: Cannot read properties of undefined (reading 'languages'). It seems that getSectionSuggestions is called after onSuggestionsClearRequested with a value of undefined.

    Expected behaviour: No runtime exception

    https://user-images.githubusercontent.com/921609/194027452-a9bbd9e5-e809-48f5-a892-e82e623c1fa6.mov

    Here's another reduced test case using exactly the same code but running with React 17 instead of React 18: https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-ajv2xi?file=src%2FApp.js. This one doesn't have the same problem. The problem only seems to occur when using React 18 and the new createRoot API.

    Note also that this problem does not occur when we're not using multiSection: https://stackblitz.com/edit/oliverjash-react-autosuggest-clear-and-focus-w7yg7r?file=src%2FApp.js

    opened by OliverJAsh 1
Releases(v10.0.2)
Owner
Misha Moroshko
I build products that make humans happier. Previously Front End engineer @facebook. Now, Design Systems, working on https://basis.now.sh
Misha Moroshko
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 25.6k Jan 3, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Jan 3, 2023
Everything you wish the HTML