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.

Sign up for GitHub

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

Jump to bottom

[BUGFIX] Fill input with selected value #52

Merged
merged 3 commits into from
Dec 28, 2020
Merged

[BUGFIX] Fill input with selected value #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce49c4d
Set input value on selection
PatrickDesign Dec 10, 2020
0f76849
Simplify README examples
PatrickDesign Dec 17, 2020
14237ae
Add documentation for `maxResults`
PatrickDesign Dec 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ const list = [{
list={list}
keys={['author', 'title']}
width={430}
onSelect={action('selected')}
onSelect={(newSelectedItem) => {
// Local state setter defined elsewhere
setSelectedItem(newSelectedItem)
}}
/>
```

Expand All @@ -38,7 +41,10 @@ const list = [{
list={list}
keys={['author', 'title']}
width={430}
onSelect={action('selected')}
onSelect={(newSelectedItem) => {
// Local state setter defined elsewhere
setSelectedItem(newSelectedItem)
}}
resultsTemplate={(props, state, styles, clickHandler) => {
return state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
Expand Down Expand Up @@ -77,6 +83,7 @@ onSelect| noop | Function to be executed on selection of any result.
keyForDisplayName|title|The key which should be used for list item text.
keys|all[Array]|List of properties that will be searched. This also supports nested properties.
list|null|Array of properties to be filtered.
maxResults|10|Max number of results to show at once.
placeholder|'Search'|Placeholder of the searchbox
resultsTemplate| Func | Template of the dropdown divs
shouldShowDropdownAtStart|false|Allow the searchbox to act as a `filter` dropdown with initial values. Yields all results when the search value is blank.
Expand Down
33 changes: 16 additions & 17 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@ export default class FuzzySearch extends Component {
isOpen: !this.props.shouldShowDropdownAtStart,
results: [],
selectedIndex: 0,
selectedValue: {},
value: '',
};
this.handleChange = this.handleChange.bind(this);
Expand Down Expand Up @@ -201,33 +200,33 @@ export default class FuzzySearch extends Component {

// Handle ENTER
} else if (e.keyCode === 13) {
if (results[selectedIndex]) {
this.props.onSelect(results[this.state.selectedIndex]);
this.setState({
selectedValue: results[this.state.selectedIndex],
});
}
this.setState({
results: [],
selectedIndex: 0,
value: results[this.state.selectedIndex].item ? results[this.state.selectedIndex].item.value : '',
});
this.selectItem();
}
}

handleMouseClick(clickedIndex) {
selectItem(index) {
const { results } = this.state;

if (results[clickedIndex]) {
this.props.onSelect(results[clickedIndex]);
const selectedIndex = index || this.state.selectedIndex;
const result = results[selectedIndex];
if (result) {
// send result to onSelectMethod
this.props.onSelect(result);
// and set it as input value
this.setState({
value: result[this.props.keyForDisplayName],
});
}
// hide dropdown
this.setState({
results: [],
selectedIndex: 0,
value: results[this.state.selectedIndex].item ? results[this.state.selectedIndex].item.value : '',
});
}

handleMouseClick(clickedIndex) {
this.selectItem(clickedIndex);
}

render() {
const {
autoFocus,
Expand Down