downshift-js / downshift-js/downshift

Add onSelect prop to hooks

Open
#1,139 11 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

TLDR:

Ok, I understand. You need onSelect. Let's develop it, we will use this issue to track it.

You probably need to work in hooks/utils.js on callOnChangeProps. Call onChange if there if newState has selectedItem and we have onChange prop.

Also add unit tests, Typescript and documentation. See Downshift README for the last part. Good luck!

P.S. maybe you can also take #1042 to finish it if you feel like adding features? It should only need documentation and tests.

-----Initial Issue ----

- `downshift` version: 6.0.2
- `node` version: 12.18.3
- `npm` (or `yarn`) version: 6.14.6

**Relevant code or config**

```javascript
import React, { useState } from "react";
import "./styles.css";
import Downshift from "downshift";

export default function App() {
const options = [
{ id: 1, value: "Steak" },
{ id: 2, value: "Pasta" },
{ id: 3, value: "Rice" },
{ id: 4, value: "Cookie" }
];

const [selectedOption, setSelectedOption] = useState(null);

const onChangeAutocompleteInputField = selection => {
console.log(selection);
setSelectedOption(selection);
};

return (


{
onChangeAutocompleteInputField(selection);
}}
itemToString={item => (item ? item.value : "")}
>
{({
getInputProps,
getMenuProps,
getItemProps,
isOpen,
inputValue,
reset
}) => (



{isOpen && (

{options
.filter(
item =>
!inputValue ||
item.value
.toLowerCase()
.includes(inputValue.toLowerCase())
)
.map((item, index) => (

{item.value}

))}

)}


)}

{

You ate: {selectedOption ? selectedOption.value : null}

}

);
}
```

**What you did**: I try to make the input field value turns blank after selecting an option from the list. I read the documentation and searched for previous issues in this repo and found that some examples in https://github.com/downshift-js/downshift/issues/177#issuecomment-327575402, so I call reset in input onChange prop with an intention to reset the input state back to the starting point (which is the inputValue is blank and the selectedItem is null).

**What happened**: The inputValue doesn't reset back to blank. Now I'm not sure what do I miss.

**Reproduction repository**:

CodeSandbox URL:
https://codesandbox.io/s/downshift-how-to-reset-inputvalue-after-running-onselect-0ew1w

**Problem description**: How to reset inputValue state after running onSelect while letting Downshift handles its own state all of the time except for the custom action I defined to clear inputValue when an option is selected.

**Suggested solution**: More examples on how to use each prop would be helpful

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.