diff --git a/src/Select.tsx b/src/Select.tsx index 126ff383..abb34eab 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -33,6 +33,8 @@ export interface ISelectBaseProps { blurOnSelect?: boolean; // blurInputOnSelect closeOnSelect?: boolean; closeOnScroll?: boolean; + + allowCreate?: boolean; } export interface ISelectProps @@ -79,6 +81,8 @@ export const Select: React.FunctionComponent = props => { loadingMessage = 'Loading...', noOptionsMessage = 'No Options', + allowCreate = false, + ...selectProps } = props; @@ -105,7 +109,7 @@ export const Select: React.FunctionComponent = props => { styles: customStyles(), }; - if ('loadOptions' in props && 'onCreateOption' in props) { + if ('loadOptions' in props && ('onCreateOption' in props || allowCreate)) { return ; } @@ -113,7 +117,7 @@ export const Select: React.FunctionComponent = props => { return ; } - if ('onCreateOption' in props) { + if ('onCreateOption' in props || allowCreate) { return ; } diff --git a/src/__stories__/Forms/Select.tsx b/src/__stories__/Forms/Select.tsx index bcfe3aaf..1d8a754c 100644 --- a/src/__stories__/Forms/Select.tsx +++ b/src/__stories__/Forms/Select.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; +import { action } from '@storybook/addon-actions'; import { withKnobs } from '@storybook/addon-knobs'; -import { boolean, number, select, text } from '@storybook/addon-knobs/react'; +import { array, boolean, number, select, text } from '@storybook/addon-knobs/react'; import { storiesOf } from '@storybook/react'; import { Box } from '../../Box'; @@ -25,6 +26,7 @@ export const selectKnobs = (tabName = 'Select'): ISelect => ({ closeOnScroll: boolean('closeOnScroll', false), hideSelectedOptions: boolean('hideSelectedOptions', false), backspaceRemovesValue: boolean('backspaceRemovesValue', true), + onChange: action('onChange'), }); storiesOf('Forms:Select', module) @@ -67,4 +69,38 @@ storiesOf('Forms:Select', module) }} /> + )) + .add('creatable multi', () => ( + + { + return new Promise(resolve => { + setTimeout( + () => + resolve( + [0, 1, 2, 3].map(index => ({ + label: `${inputValue}${index}`, + value: `${index}`, + })) + ), + 250 + ); + }); + }} + /> + ));