3

I am using 'Creatable' props of react-virtualized-select. When I write a custom option(e.g. Test code 4), It shows the text 'create option "Test code 4". But, When I click on that option, dropdown becomes blank and that option also not added in option list.

Library Link to demo : https://bvaughn.github.io/react-virtualized-select/

Library Link to demo Source-code : https://github.com/bvaughn/react-virtualized-select/blob/master/source/VirtualizedSelect/VirtualizedSelect.example.js

Options: Below list is coming from database. dataSource = [ {name: "Test1", label: "Test code 1", type: "text"}, {name: "Test2", label: "Test code 2", type: "text"}, {name: "Test3", label: "Test code 3", type: "text"} ]

Component:

import { Creatable } from 'react-select'

handleOptionChange( selectedValue ) {
   this.setState({
     selectedValue: selectedValue
   });
}

<VirtualizedSelect
   labelKey='label'
   clearable={ clearable }
   disabled={ disabled }
   multi={multi}
   handleOptionChange={this.handleOptionChange}
   options={ dataSource }
   searchable={ searchable }
   selectedValue={ selectedValue }          
   selectComponent={Creatable}
   valueKey='name'
/>

I could not figure out what else I am missing here ?

Thanks in advance.

Alpesh Prajapati
  • 1,593
  • 2
  • 18
  • 38
  • Please provide your own code. Both links are to the `react-virtualized-select` project, and its demo page seems to work fine for the `Creatable` option. – bvaughn Dec 19 '17 at 15:46

1 Answers1

0

I had the same issue. In my case the problem was caused by the version of react-select. I upgraded react-select from 0.9.2 to v1.2.1 and this did the trick:

"react-select": "v1.2.1"

I also added following imports which are present in some examples (I don't know if this is crucial):

import React, { Component, PropTypes  } from 'react';
Piotr Ładyżyński
  • 103
  • 7