Added a workaround for a bug in (react-select 1.0.0-rc2).

Clicking on the placeholder item now successfully creates new options.
See issue #33.

Author: Brian Vaughn

CHANGELOG.md

@@ -1,6 +1,11 @@
 Changelog
 ------------
 
+##### 2.1.1
+Added a workaround for a bug in `Creatable` (react-select 1.0.0-rc2).
+Clicking on the placeholder item now successfully creates new options.
+See issue #33.
+
 ##### 2.1.0
 Added `listProps` prop to enable pass-through of additional, custom properties to the underlying react-virtualized `List`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-virtualized-select",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Drop-down menu for React with windowing to support large numbers of options.",
   "main": "dist/commonjs/index.js",
   "jsnext:main": "dist/es/index.js",
@@ -106,7 +106,7 @@
     "react-addons-shallow-compare": "^15.2.1",
     "react-addons-test-utils": "^15.2.1",
     "react-dom": "^15.2.1",
-    "react-select": "^1.0.0-rc.1",
+    "react-select": "^1.0.0-rc.2",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.2",
     "react-virtualized": "^7.23.0",

source/VirtualizedSelect/VirtualizedSelect.js

@@ -50,12 +50,18 @@ export default class VirtualizedSelect extends Component {
   }
 
   // See https://github.com/JedWatson/react-select/#effeciently-rendering-large-lists-with-windowing
-  _renderMenu ({ focusedOption, focusOption, labelKey, options, selectValue, valueArray }) {
+  _renderMenu ({ focusedOption, focusOption, labelKey, onSelect, options, selectValue, valueArray }) {
     const { listProps, optionRenderer } = this.props
     const focusedOptionIndex = options.indexOf(focusedOption)
     const height = this._calculateListHeight({ options })
     const innerRowRenderer = optionRenderer || this._optionRenderer
 
+    // react-select 1.0.0-rc2 passes duplicate `onSelect` and `selectValue` props to `menuRenderer`
+    // The `Creatable` HOC only overrides `onSelect` which breaks an edge-case
+    // In order to support creating items via clicking on the placeholder option,
+    // We need to ensure that the specified `onSelect` handle is the one we use.
+    // See issue #33
+
     function wrappedRowRenderer ({ index, key, style }) {
       const option = options[index]
 
@@ -65,10 +71,11 @@ export default class VirtualizedSelect extends Component {
         focusOption,
         key,
         labelKey,
+        onSelect,
         option,
         optionIndex: index,
         options,
-        selectValue,
+        selectValue: onSelect,
         style,
         valueArray
       })