fix(select): multiselect options stay selected

* fix(select): multiselect options stay selected * feat(icons): add contact-card-active_24 [skip ci] * feat(icons): add contact-card-active_20 [skip ci] * chore(release): [skip ci] @momentum-ui/icons@7.28.0 @momentum-ui/core@19.4.15 @momentum-ui/react@23.8.1 @momentum-ui/angular@11.7.3 @momentum-ui/angularjs@13.1.12 @momentum-ui/vue@1.0.0-beta.76 * feat(icons): add contact-card-active_24 [skip ci] * chore(release): [skip ci] @momentum-ui/icons@7.29.0 @momentum-ui/core@19.4.16 @momentum-ui/react@23.8.2 @momentum-ui/angular@11.7.4 @momentum-ui/angularjs@13.1.13 @momentum-ui/vue@1.0.0-beta.77 * fix(select): multiselect options stay selected * chore(multiselect): minor change to trigger Percy Co-authored-by: Kevin Hyde <kehyde@cisco.com> Co-authored-by: Momentum UI Bot <collab-ui-bot.gen@cisco.com>
momentum-design · May 13, 2020 · eb0b528 · eb0b528
1 parent 6802cc6
commit eb0b528
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 38 deletions.
diff --git a/react/src/lib/List/index.js b/react/src/lib/List/index.js
@@ -237,6 +237,7 @@ class List extends React.Component {
     // Don't do anything if onSelect Event Handler is present
     if (onSelect) {
       return onSelect(e, {
+        keyboardKey: this.getValue(items, index, 'keyboard'),
         eventKey: this.getValue(items, index, 'event'),
         label,
         value,

diff --git a/react/src/lib/Select/index.js b/react/src/lib/Select/index.js
@@ -42,7 +42,7 @@ class Select extends React.Component {
     e.preventDefault();
     const { selected, selectedIndex } = this.state;
     const { isMulti } = this.props;
-    const { value, label, eventKey } = opts;
+    const { value, label, eventKey, keyboardKey } = opts;
     const isActive = find(selected, {value, label});
 
     !isMulti && this.setState({ isOpen: false });
@@ -54,7 +54,7 @@ class Select extends React.Component {
         selected: filter(selected, item =>
           !isEqual(item, {value, label})
         ),
-        selectedIndex: selectedIndex.filter(i => i !== eventKey)
+        selectedIndex: selectedIndex.filter(i => i !== keyboardKey)
       });
     } else if (!isActive && !isMulti) {
       return this.setState({
@@ -64,7 +64,7 @@ class Select extends React.Component {
     } else {
       return this.setState({
         selected: [...selected, {value, label}],
-        selectedIndex: [...selectedIndex, eventKey]
+        selectedIndex: [...selectedIndex, keyboardKey]
       });
     }
   }
@@ -228,4 +228,4 @@ Select.defaultProps = {
 
 Select.displayName = 'Select';
 
-export default Select;
+export default Select;  
diff --git a/react/src/lib/SelectOption/index.js b/react/src/lib/SelectOption/index.js
@@ -3,31 +3,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import {
-  Checkbox,
-  Icon,
-  ListItem,
-  ListItemSection,
-} from '@momentum-ui/react';
+import { Checkbox, Icon, ListItem, ListItemSection } from '@momentum-ui/react';
 import SelectContext from '../SelectContext';
 import ListContext from '../ListContext';
 import { UIDConsumer } from 'react-uid';
 
 class SelectOption extends React.Component {
   render() {
-    const {
-      className,
-      active,
-      children,
-      label,
-      title,
-      ...props
-    } = this.props;
+    const { className, active, children, label, title, ...props } = this.props;
 
     const separateChildren = (isMulti, cxtActive, uniqueId) => {
-      return (
-        isMulti
-      ? (
+      return isMulti ? (
         <Checkbox
           htmlId={`${uniqueId}__checkbox`}
           label={label}
@@ -36,34 +22,35 @@ class SelectOption extends React.Component {
         />
       ) : (
         [
-          <ListItemSection key='child-0' position='center'>
+          <ListItemSection key="child-0" position="center">
             {label || children}
           </ListItemSection>,
-          <ListItemSection key='child-1' position='right'>
-            {cxtActive && <Icon color='blue-50' name='check_20'/>}
-          </ListItemSection>
+          <ListItemSection key="child-1" position="right">
+            {cxtActive && <Icon color="blue-50" name="check_20" />}
+          </ListItemSection>,
         ]
-       ) );
+      );
     };
 
+    const keySource = isMulti => `data-md-${isMulti ? 'keyboard' : 'event'}-key`;
+
     return (
       <UIDConsumer name={id => `md-select-option-${id}`}>
         {id => (
           <SelectContext.Consumer>
             {isMulti => (
               <ListContext.Consumer>
                 {listContext => {
-                  const cxtActive = active
-                    || listContext
-                    && listContext.active
-                    && ReactDOM.findDOMNode(this)
-                    && ReactDOM.findDOMNode(this).attributes['data-md-event-key']
-                    && ReactDOM.findDOMNode(this).attributes['data-md-event-key'].value
-                    && listContext.active.includes(
-                      ReactDOM.findDOMNode(this)
-                        .attributes['data-md-event-key']
-                        .value
-                    );
+                  const cxtActive =
+                    active ||
+                    (listContext &&
+                      listContext.active &&
+                      ReactDOM.findDOMNode(this) &&
+                      ReactDOM.findDOMNode(this).attributes[keySource(isMulti)] &&
+                      ReactDOM.findDOMNode(this).attributes[keySource(isMulti)].value &&
+                      listContext.active.includes(
+                        ReactDOM.findDOMNode(this).attributes[keySource(isMulti)].value
+                      ));
 
                   const uniqueId = this.props.id || id;
 
@@ -112,7 +99,7 @@ SelectOption.defaultProps = {
   id: '',
   label: '',
   title: '',
-  value:'',
+  value: '',
 };
 
 SelectOption.displayName = 'SelectOption';