Pressing Up or Down Key App crashing with undefined items

Are you reporting a bug?

@moroshko

• The steps to reproduce the issue, e.g.:

  1. Focus on the input field
  2. Type c, and wait for suggestions to appear
  3. Press Up or Down Key

  Observed behaviour: If i press Up the Last key is selected and vice versa

  Expected behaviour: Suggestions should be Open and it should highlight the selected one once i scroll will Up arrow key

  In my application, when user types ‘c’ it is filtering and it should open the filtered list and when user presses up arrow it should scroll highlighting the keys.

Currently i am getting the below error:

My code is as below:

import axios from “axios”; import * as myConstClass from “…/utils/constants”; import React, { Component } from “react”; import Autosuggest from “react-autosuggest”; import getDropDownData from “…/services/dropdown_service”; import Chatroom from “…/components/Chatroom”;

class AutoCompleteDAS extends Component { constructor(props) { super(props); this.state = { value: “”, suggestions: [], placeholderTxt: “” }; this.sendValue = “”; this.showValue = “”; }

componentDidMount() { this.getDropdownList(this.props.onDropdownType); }

/**

• function to fetch suggestions object array according to user input */ getSuggestions(value, languages) { const escapedValue = this.escapeRegexCharacters(value.trim()); if (escapedValue === “”) { return languages.filter(language => language.label); } const regex = new RegExp(“^” + escapedValue, “i”); return languages.filter(language => regex.test(language.label)); }

/**

• function to ignore escape regex characters / escapeRegexCharacters(str) { return str.replace(/[.+?^${}()|[]\]/g, “\$&”); }

/**

• function to get a label key of the list array */ getSuggestionValue(suggestion) { return suggestion.label; }

/**

• function which returns JSX template of autocomplete elements which is to be shown to user as dropdown items */ renderSuggestion(suggestion) { return <span>{suggestion.label}</span>; }

/**

• axios call to get all country list and send it to chatroom component */ getDropdownList(onDropdownType) { let apiName = “”; let apiMethod = “”; let apiBody = {}; switch (onDropdownType) { case “getCountryCode”: this.showValue = “label”; this.sendValue = “value”; this.setState({ placeholderTxt : “Select Your Country…” }); apiName = “fetch_country_codes”; apiMethod = “GET”; apiBody = {}; break; case “getRejectionCode”: this.showValue = “rejectiondescription”; this.sendValue = “rejectioncode”; this.setState({ placeholderTxt : “Select Your Rejection Code…” }); apiName = “get_rejection”; apiMethod = “POST”; apiBody = { userId: this.props.passParams.userId, region: this.props.passParams.userRegion, uniqueId: this.props.passParams.uniqueId, rejectionCode: “Y” }; break; default: break; }

getDropDownData(apiName, apiMethod, apiBody)
  .then(
    response => {
      this.languages = response.data.data || response.data;
      this.transformResponse();
      this.props.onCountryListFetch(this.languages);
    },
    err => {}
  )
  .catch(err => {});

}

transformResponse() { this.languages = this.languages.map(language => { return { label: language[this.showValue], value: language[this.sendValue] }; }); }

/**

• Function which is called when user selects any item from dropdown ad change event gets fired */ onChange = (event, { newValue, method }) => { this.setState({ value: newValue }); };

/**

• function which is called when user types something to autocomplete input box */ onSuggestionsFetchRequested = ({ value }) => { this.setState({ suggestions: this.getSuggestions(value, this.languages) }); };

/**

• Function which is called when it is required to clear all suggestions */ onSuggestionsClearRequested = () => { this.setState({ suggestions: [] }); };

/**

• Function which notify if suggestions to be rendered
• this function indicates that even if there is no user input, suggestions needs to be rendered */ // shouldRenderSuggestions(value) { // return value.trim().length >= 0; // } render() { const { value, suggestions } = this.state; console.log((this.state.suggestions = this.state.value)); const inputProps = { placeholder: this.state.placeholderTxt, value, onChange: this.onChange, onFocus: this.onFocus }; return ( <Autosuggest suggestions={suggestions} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} getSuggestionValue={this.getSuggestionValue} renderSuggestion={this.renderSuggestion} inputProps={inputProps} /> ); } }

export default AutoCompleteDAS;

[ttsirkia]

I had the same problem and the reason was that my getSuggestionValue did not return a value for every possible suggestion. It used a field that did not exist for all items.

[khrome83]

For me the issue was the some of the multi indexes could be empty. And highlightFirstSuggestion was set to true.

The solution was to filter suggestions to omit anything with a empty hits array. Once I never sent a empty array of a individual index, it worked as expected.