Keyboard arrow up/down key always preselects the first option on the list when pressed

[juan0087]

I'm using AutoSuggest to search for a clients and autocomplete a form. When searching shows the results and I can select any by clicking, but when I hit the arrow up/down key on my keyboard to navigate the items it always auto selects the first option on the list.

Steps to reproduce

Click on the input field Type a, and wait for suggestions to appear Press Up/Down arrow key to navigate through the suggestions Observed behavior: When up/down keys are pressed it auto selects the first/last option on the list

Has anyone experience the same issue?

[FroggDev]

Hi, i have exactly the same issue.

Event more strange : i added a props named search (function) used to trigger the search on key press enter ( bind on the input). The search is launched on keybord down/up when the suggestion is focused without passing on the key press event ( bind on the input).

ATM i have no explaination how the suggestion trigger the selection + the search.

It seems the suggestion have events i should inspect...?

[SZharkov]

I am experiencing the same issue

[SZharkov]

@juan0087 @FroggDev I've solved the issue. Initially in my case I've passed onChange prop to Autosuggest input. When this onChange event was fired - I've dispatched an event to set a value for input plus some additional events. Instead I've added a type argument and then check whether the type is "change". Otherwise - I do nothing.

const onChange = (event, { newValue }) => {
     dispatch({
      type: "set_value",
      payload: { id: prescription.id, step: 4, value }
    });
    if (eventType === "change" && value && value.length > 1) {
        .....
    }
    updateSearchValue(newValue, event.type);
};
<Autosuggest inputProps={{onChange}} />

[BirgitPohl]

I'm working with hooks. You can also listen to the method.

const onChange = (event, { newValue, method }) => {
    if (method === 'type' || method === 'enter') {
      setNewValue(newValue);
    //class component stuff:
    //this.setState({
    //  value: newValue
    //});
    }
  };

I wonder why you work with value and value.length > 1. It has caused me some problems re-entering a string.

For the issue topic: I came across the same. The getSuggestionValue return value is probably fueling the issue as well.

Now I wonder how can I pre-fill the input field without narrowing the suggestions just because I used key down and up.