Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/1 input search select #59

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

jscottsmith
Copy link
Contributor

Addresses #1

<SearchSelect> allows for external options to be provided and selected through a dropdown menu, such as a text input that calls an API endpoint for autocomplete options.

Expected behaviors

  • Opens when focused or clicked
  • Calls an onChange after the debouncedTime has elapsed
  • Calls an onSelect handler with the selected data when an option has been clicked
  • Closes when focus is removed from the main or nested elements
  • Closes when clicked outside of the element
  • Closes when selecting an option
  • Closes when an existing value is cleared from the input
  • Manages focus with arrow keys when the options menu is focused up/left goes to the previous item, down/right goes to the next item and cycles from last to first/first to last

TODO

  • Add example usages to readme
  • Test in existing project like AM

@@ -0,0 +1,185 @@
import React, { Component } from 'react';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i know this is based on the DS component, but i always found it confusing, because when you "select" something it doesn't look like you have chosen the option, and you can delete the text completely and think it's not still selected.

on some apps i've done other variations, like replacing it with a tag, or putting a tag within the input. or on ad manager we clear the input whenever something is selected and someone changes the search term input in any way. what do you think?

this.setState({ searchTerm: '', isOpen: false });
this._removeListeners();
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can be good to have a default search filter, as we have for SearchMultiSelect, to filter the options in the current options list.

@jscottsmith jscottsmith force-pushed the feature/1-input-search-autocomplete branch from 13583a4 to b16cd06 Compare April 16, 2019 01:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants