Pressing Up or Down Key App crashing with undefined items

[Rajdeepc]

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 {suggestion.label}; }

/**

• 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;

[iranmarcius]

I'm having kind of the same problem, but when I click on items with mouse.

[Zachku]

Having same problem. My onChange looks like this: onChange(event, { newValue }) { this.setState({ value: newValue }); } When I'm pressing down, value of newValue is number 91 and this error occurs.

[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.

[farablanco]

Any solution ? I get the same problem when I try to select via the up and down keys. In addition to the trim error I also get: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

[farablanco]

Any solution ? I get the same problem when I try to select via the up and down keys. In addition to the trim error I also get: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Yeah, the problem for me was in getSuggestionsValue. I was returning the default label property which my suggestion object does not support. I changed that to a supported property and it worked well afterwards.

[khrome83]

I have something similar.

I have a multi-index search. When results from both indexes are present, works just fine. When results from index1 are present only, works just fine. When results from index2 are present, it breaks when hitting the down arrow, giving the error above.

The strange thing is, newValue was populated correctly. But the suggestion/hit was empty for getSuggestionValue. It just received an undefined for no reason.

If I hit up key, it works fine. If I mouse over it works fine.

If you do either of the above (up or mouse), then down starts to behave as you expect.

[khrome83]

I can validate for me, that turning highlightFirstSuggestion is the cause. When this is off, it works as expected. That being said, I need the first item highlighted...

[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.