0.6.3 - Fix isMultiple SelectInput

deskpro · Nov 16, 2018 · 0d5ad87 · 0d5ad87
1 parent 37ff3fe
commit 0d5ad87
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.6.3 - 2018-11-16
+
+* Fix SelectInput isMultiple keyboard selection
+
 ## 0.6.2 - 2018-11-09
 
 * Update `react-components` to `1.4.1`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deskpro/token-field",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "",
   "main": "dist/index.js",
   "private": false,

diff --git a/src/Components/Input/DateTimeInput.jsx b/src/Components/Input/DateTimeInput.jsx
@@ -36,13 +36,11 @@ export default class DateTimeInput extends TokenInput {
   }
 
   onFocus = () => {
-    console.log('focus');
     this.props.onFocus();
     window.document.addEventListener('keydown', this.handleKeyDown);
   };
 
   onBlur = () => {
-    console.log('blur');
     this.props.onBlur();
     window.document.removeEventListener('keydown', this.handleKeyDown);
   };
@@ -161,7 +159,6 @@ export default class DateTimeInput extends TokenInput {
   };
 
   handleKeyDown = (e) => {
-    console.log(e.key);
     switch (e.key) {
       case 'ArrowDown':
       case 'ArrowUp': {

diff --git a/src/Components/Input/SelectInput.jsx b/src/Components/Input/SelectInput.jsx
@@ -151,6 +151,19 @@ export default class SelectInput extends TokenInput {
         this.disableEditMode();
         break;
       case ' ':
+        if (this.props.isMultiple) {
+          const { selectedOption, value } = this.state;
+          const key = selectedOption.id || selectedOption.value;
+          let checked = false;
+          if (value) {
+            checked = value.indexOf(key) !== -1;
+          }
+          this.handleChangeMultiple(!checked, key);
+        } else {
+          this.handleChange(this.state.selectedOption);
+          this.props.selectNextToken();
+        }
+        break;
       case 'Enter':
         this.handleChange(this.state.selectedOption);
         this.props.selectNextToken();
@@ -260,7 +273,11 @@ export default class SelectInput extends TokenInput {
     return renderHeader;
   };
 
-  renderLoading = () => <ListElement className={styles.loading}><Icon name={faSpinner} size="large" spin /></ListElement>;
+  renderLoading = () => (
+    <ListElement className={styles.loading}>
+      <Icon name={faSpinner} size="large" spin />
+    </ListElement>
+  );
 
 
   renderOptions = () => {
@@ -298,7 +315,7 @@ export default class SelectInput extends TokenInput {
   };
 
   renderMultipleOptions() {
-    const { filter, value, loading } = this.state;
+    const { filter, value, loading, selectedOption } = this.state;
     let options;
     if (loading) {
       return this.renderLoading();
@@ -313,14 +330,15 @@ export default class SelectInput extends TokenInput {
     return (options
       .map((option) => {
         const key = option.id || option.value;
+        const selected = option === selectedOption ? styles.selected : '';
         let checked = false;
         if (value) {
           checked = value.indexOf(key) !== -1;
         }
         return (
           <ListElement
             key={key}
-            className={styles.option}
+            className={this.cx(styles.option, selected, 'option')}
           >
             <Checkbox checked={checked} value={key} onChange={this.handleChangeMultiple}>
               {this.renderItem(option)}

diff --git a/src/Components/TokenField.jsx b/src/Components/TokenField.jsx
@@ -49,6 +49,7 @@ export default class TokenField extends React.Component {
     };
 
     this.inputs = [];
+    this.inputField = null;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -82,6 +83,9 @@ export default class TokenField extends React.Component {
     if (this.pendingBlur) {
       window.clearTimeout(this.pendingBlur);
     }
+    if (this.inputField) {
+      this.inputField.closePopper();
+    }
     this.pendingBlur = window.setTimeout(() => {
       this.setState({
         focused: false
@@ -92,7 +96,7 @@ export default class TokenField extends React.Component {
 
   getInputField = (key, value) => (
     <TokenFieldInput
-      ref={(c) => { this.inputs[key] = c; }}
+      ref={(c) => { this.inputs[key] = c; this.inputField = c; }}
       value={value}
       key={key}
       tokenKey={key}

diff --git a/tests/storybook/components/TokenField.jsx b/tests/storybook/components/TokenField.jsx
@@ -107,7 +107,7 @@ const tokenTypes = [
     }
   },
   {
-    id:     'country',
+    id:     'country-async',
     widget: 'SelectInput',
     props:  {
       dataSource: {
@@ -117,6 +117,18 @@ const tokenTypes = [
       showSearch:   false
     },
   },
+  {
+    id:     'country',
+    widget: 'SelectInput',
+    props:  {
+      dataSource: {
+        getOptions: countries
+      },
+      renderHeader: <h3>Countries</h3>,
+      showSearch:   false,
+      isMultiple:   true,
+    },
+  },
   {
     id:          'user-waiting',
     widget:      'DurationInput',
@@ -136,7 +148,7 @@ const defaultValue = [
   },
   {
     type:  'country',
-    value: 'GB',
+    value: ['GB'],
     meta:  [
       { label: 'United Kingdom', value: 'GB' }
     ],

diff --git a/tests/storybook/components/input/SelectInput.jsx b/tests/storybook/components/input/SelectInput.jsx
@@ -98,7 +98,9 @@ storiesOf('Inputs', module)
         className="test"
       />
       <SelectInput
-        dataSource={{ getOptions: () => fakeAPI('', 30000, optionsWithIcon), findOptions: filter => fakeAPI(filter, 30000, optionsWithIcon) }}
+        dataSource={{ getOptions: () =>
+          fakeAPI('', 30000, optionsWithIcon),
+        findOptions: filter => fakeAPI(filter, 30000, optionsWithIcon) }}
         token={selectTokenIcon}
         label="temperature"
         selectPreviousToken={action('SelectPreviousToken')}