Tag picker onChange event not firing

Question

I'm trying to trigger an event when the user writes something in the input field of Fluent UI Tag Picker but it seems that it's not working for some reason. The documentation provides examples for onFocus event and that one is working fine, however the onChange doesn't seem to work.

I added an onChange callback to the inputProps object

const inputProps: IInputProps = {
  onFocus: () => console.log('onFocus called'),
  onChange: () => console.log('onChange Called'),
};

And then passed the object as inputProps to the tagPicker

<TagPicker
    removeButtonAriaLabel="Remove"
    selectionAriaLabel="Selected colors"
    onResolveSuggestions={filterSuggestedTags}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={pickerSuggestionsProps}
    itemLimit={2}
    disabled={tagPicker}
    inputProps={{
      ...inputProps,
      id: 'picker1',
    }}
  />

here is a code pen with the same example from their documentation showing the issue: https://codepen.io/Attias/pen/mdXbmzL

Answer 1

onChange event triggers when user pick something from suggestions list or remove item from picker. What you can do is to use onInputChange event:

<TagPicker
  ...
  onInputChange={value => {
    // Do something.
    return value;
  }}   
/>

Codepen working example.