this.refs.inputRef.focus is not a function

I am using customEditor on TableHeaderColumn. The custom editor is a react-select component instead of any HTML input element.

It throw the following error whenever I click on the cell to render the editor:

TableEditColumn.js:129 Uncaught TypeError: this.refs.inputRef.focus is not a function

I am not sure if I am using customEditor correctly. Thanks for any help!

---

table.js

  ...

  const Table = React.createClass({
    ...

    cellEditProp: {
      mode: 'click'
    },

    createLocationCell: function(cellData, row) {
      return <div className="tags">{cellData.join(',')}</div>
    },

    createLocationEditor: function(onSave, props) {
      return (
        <SelectEditor
          multi
          options={ [ { value: 'A', label: 'Loc A' }, { value: 'B', label: 'Loc B' }, { value: 'C', label: 'Loc C' } ] }
          value={props.row.locations}
          onSave={onSave}
          {...props}
        />
      )
    },

    render: function() {
      const rows = [ { id: 1, locations: ['B'] }, { id: 2, locations: ['B', 'C'] } ]
      return (
        <BootstrapTable data={rows} striped={true} bordered={false} hover={true} pagination={true} cellEdit={this.cellEditProp}>
          <TableHeaderColumn dataField="id" isKey={true} hidden={true}>ID</TableHeaderColumn>
          <TableHeaderColumn
              dataField="locations"
              dataFormat={this.createLocationCell}
              dataSort={false}
              customEditor={{getElement: this.createLocationEditor}}
              width="150">
            Locations
          </TableHeaderColumn>
        </BootstrapTable>
      )
    }
  })

  module.exports = Table

---

select-editor.js

import Select from 'react-select'
...

const SelectEditor = React.createClass({
  getInitialState: function() {
    return { value: this.props.value }
  },

  onChange: function(selectedOptions) {
    const value = _.map(selectedOptions, 'value')
    this.setState({ value: selectedOptions })
  },

  onSave: function() {
    this.props.onSave(this.state.value)
  },

  render: function() {
    return (
      <div ref="inputRef" className="select-editor">
        <Select
          multi={this.props.multi}
          placeholder="Pick your options..."
          value={this.state.value}
          options={this.props.options}
          onChange={this.onChange}
        />
        <Button onClick={this.onSave}>Save</Button>
      </div>
    )
  }
})

module.exports = SelectEditor

---

[EnriqueAbricot]

@cytim I did what you pointed out but I still get Uncaught TypeError: this.refs.inputRef.focus is not a function at TableEditColumn.componentDidMount, there is something else to solve this problem…

[AllenFang]

@EnriqueAbricot, which version you use now?