Using the up/down arrow keys to select one of the options does not fire onChange

Version

5.0.0.rc3 and then downgraded to 4.2.3 (both act the same way)

Steps to reproduce

TypeAhead is filled with an array of objects, labelKey is set to the name property. One mouse click inside focuses the input and the options drop down. Use the arrow keys to select one of the options. Note in console.log (in the onChange handler) that the event does not fire.

// this is a snippet
    const onKeyDown = (event: any): void => {
    if (event.keyCode === 13) {
      // TODO: Using the arrow keys to select an item does not fire an onTypeAheadChange
      if(selectedTypeAheadItem!==undefined){
        //use the item and close the popup
        onSelectContext(selectedTypeAheadItem)
      }
    }
  }

  const onTypeAheadChange = (event: any): void => {
    // the selection is an array, but we only want 1
    console.log(event)
    setSelectedTypeAheadItem(event[0])
  }
            <Typeahead
                options={typeAheadOptions}
                labelKey='name'
                clearButton={false}
                id='context-menu-typeahead'
                onKeyDown={onKeyDown}
                onChange={onTypeAheadChange}
                placeholder={t('Search compound by typing')}
              />

Expected Behavior

onChange should be called for each arrow key event

Actual Behavior

onChange is not called

[ericgio]

@ayush-mandowara-bst: Yours sounds like an unrelated issue. If you think you’re encountering a bug, please open a separate issue with relevant code and repro steps. A working sandbox is ideal.

@srigi: As a workaround, you can pass a render function as a child of the typeahead component that receives the internal state. You can use activeItem to get the currently highlighted item.

<Typeahead ... >
  {({ activeItem }) => {
    // Do something with the value.
  }}
</Typeahead>

[jhvanderven]

I now think you are completely right. I was misled by my use case. I have the typeahead in a context menu and the second enter is needed to indicate that the user wants to use the value in the input rather than one of the other items. Maybe I should rethink my GUI. Sorrry for the trouble and thanks for answering.