0

I have weird issue when trying to create a custom autocomplete editor.

Basicly what I've done is I've pulled the built-in AutocompleteEditor class and refactored it to plain ES6, and renamed the class to ProductSelectEditor. No modifications to the code logic.

When I try to use it, I'm getting error "Cannot read property 'onCommit' of undefined" when handleChange() is called:

handleChange() {
  this.props.onCommit(); // props undefined
}

Now if i replace the editor with the real built-in AutocompleteEditor, it works just fine. I can't see any straight reason, why my custom version does not work, when only alterations I'm doing are refactoring the code away from TypeScript, renaming the class, and eventually exporting the class out as default? Any clues on what I'm not understanding here?

Below is the whole refactored code

import React from 'react'
import ReactDOM from 'react-dom'
import ReactAutocomplete from  'ron-react-autocomplete';
import PropTypes from 'prop-types';
import '../css/ron-react-autocomplete.css'
const { shapes: { ExcelColumn } } = require('react-data-grid')

let optionPropType = PropTypes.shape({
  id: PropTypes.required,
  title: PropTypes.string
});

export default class ProductSelectEditor extends React.Component {
  static propTypes = {
    onCommit: PropTypes.func,
    options: PropTypes.arrayOf(optionPropType),
    label: PropTypes.any,
    value: PropTypes.any,
    height: PropTypes.number,
    valueParams: PropTypes.arrayOf(PropTypes.string),
    column: PropTypes.shape(ExcelColumn),
    resultIdentifier: PropTypes.string,
    search: PropTypes.string,
    onKeyDown: PropTypes.func,
    onFocus: PropTypes.func,
    editorDisplayValue: PropTypes.func
  };

  static defaultProps = {
    resultIdentifier: 'id'
  };

  handleChange() {
    this.props.onCommit();
  }

  getValue() {
    let value;
    let updated = {};
    if (this.hasResults() && this.isFocusedOnSuggestion()) {
      value = this.getLabel(this.autoComplete.state.focusedValue);
      if (this.props.valueParams) {
        value = this.constuctValueFromParams(this.autoComplete.state.focusedValue, this.props.valueParams);
      }
    } else {
      value = this.autoComplete.state.searchTerm;
    }
    updated[this.props.column.key] = value;
    return updated;
  }

  getEditorDisplayValue() {
    let displayValue = {title: ''};
    let { column, value, editorDisplayValue } = this.props;
    if (editorDisplayValue && typeof editorDisplayValue === 'function') {
      displayValue.title = editorDisplayValue(column, value);
    } else {
      displayValue.title = value;
    }
    return displayValue;
  }

  getInputNode() {
    return ReactDOM.findDOMNode(this).getElementsByTagName('input')[0];
  }

  getLabel(item) {
    let label = this.props.label != null ? this.props.label : 'title';
    if (typeof label === 'function') {
      return label(item);
    } else if (typeof label === 'string') {
      return item[label];
    }
  }

  hasResults() {
    return this.autoComplete.state.results.length > 0;
  }

  isFocusedOnSuggestion() {
    let autoComplete = this.autoComplete;
    return autoComplete.state.focusedValue != null;
  }

  constuctValueFromParams(obj, props) {
    if (!props) {
      return '';
    }
    let ret = [];
    for (let i = 0, ii = props.length; i < ii; i++) {
      ret.push(obj[props[i]]);
    }
    return ret.join('|');
  }

  render() {
    let label = this.props.label != null ? this.props.label : 'title';
    return (<div height={this.props.height} onKeyDown={this.props.onKeyDown}>
      <ReactAutocomplete search={this.props.search} ref={(node) => this.autoComplete = node} label={label} onChange={this.handleChange} onFocus={this.props.onFocus} resultIdentifier={this.props.resultIdentifier} options={this.props.options} value={this.getEditorDisplayValue()} />
      </div>);
  }
}
L3p1
  • 96
  • 5

1 Answers1

0

Alright, after few hours of poking and mangling found the reason for the props to be undefined. Apparently after stripping out the Typescripts, I needed to re-bind 'this' in order to get the correct context: 

<ReactAutocomplete ... onChange={this.handleChange.bind(this)} ... />
L3p1
  • 96
  • 5