onChange is triggered when typing in AsyncTypeahead single input

Hopefully this bug report makes sense! It might also just be me misunderstanding the API, but I managed to set up the multiple input version of the component just fine and so I’m not sure what’s going wrong when I try to use the single input version…

Version

5.0.0-alpha.1

Steps to reproduce

Use an AsyncTypeahead single input component:

<AsyncTypeahead
  multiple={false}
  onChange={selected => {
    console.log('// onChange')
  }}
  onInputChange={text => {
    console.log('// onInputChange')
  }}
  options={autocompleteOptions}
  onSearch={queryString => {
    console.log('// onSearch')
  }}
  selected={selectedItem}
/>

Expected Behavior

When I type in the input, I would expect onInputChange and onSearch to trigger, but not onChange (which I would expect to only trigger once a selection is actually made).

Actual Behavior

onChange is triggered immediately when typing, which updates selectedItem and prevents the controlled component from actually changing.

[SachaG]

Right, I was just hardcoding it as a quick example. But your reply helped me figure out the issue! In my actual code the flow looks like this:

1. the component receives selected from its parent
2. the user types in the component, which should trigger a query to the server
3. when the user picks an option, this then calls a function to update that original selected in the parent’s state

Basically I was missing a step to update the parent component’s state to clear the value. I’ve added this to the onChange and it seems to work:

        onChange={selected => {
          if (selected.length === 0) {
            clearValue();
          } else {
            updateValue(selected[0].value);
          }
        }}

Thanks for helping me work this out! Great component btw, I’m planning to include it as one of the default Vulcan.js components 😃

[ericgio]

Awesome! Glad you were able to solve the issue 😃