fix: fix onChange value when click option (#756)

integration/specs/Modal/modal-11.spec.js

@@ -1,6 +1,6 @@
 const PageModal = require('../../../src/components/Modal/pageObject');
 const PageLookup = require('../../../src/components/Lookup/pageObject');
-const { ESCAPE_KEY, ENTER_KEY } = require('../../constants');
+const { ESCAPE_KEY, ENTER_KEY, ARROW_DOWN_KEY } = require('../../constants');
 
 const BUTTON = '#button-11';
 const MODAL = '#modal-11';
@@ -42,19 +42,9 @@ describe('Modal with redux form example', () => {
         datePickerInput.click();
         modal.waitUntilOpen();
         browser.keys(ESCAPE_KEY);
+        browser.waitUntil(() => !$('.rainbow-date-picker_modal').isDisplayed());
         expect(datePickerInput.isFocused()).toBe(true);
     });
-    // it('should return focus to date picker input when both modals are opened and click outside the modals', () => {
-    //     const modal = new PageModal(MODAL);
-    //     const triggerButton = $(BUTTON);
-    //     triggerButton.click();
-    //     modal.waitUntilOpen();
-    //     const datePickerInput = $(DATE_PICKER_INPUT);
-    //     datePickerInput.click();
-    //     modal.waitUntilOpen();
-    //     modal.clickOutside();
-    //     expect(datePickerInput.isFocused()).toBe(true);
-    // });
     it('should return focus to time picker input when both modals are opened and select a time', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
@@ -68,6 +58,7 @@ describe('Modal with redux form example', () => {
         browser.keys('0');
         browser.keys('0');
         browser.keys(ENTER_KEY);
+        browser.waitUntil(() => !$('.rainbow-time-picker_modal').isDisplayed());
         expect(timePickerInput.isFocused()).toBe(true);
     });
     it('should not close the modal when is opened and press ESC if the lookup has value typed', () => {
@@ -96,4 +87,34 @@ describe('Modal with redux form example', () => {
         browser.keys(ESCAPE_KEY);
         expect(modal.isOpen()).toBe(false);
     });
+    it('should close the modal when select an option and then press ESC', () => {
+        const modal = new PageModal(MODAL);
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
+        modal.waitUntilOpen();
+        const lookup = new PageLookup(MODAL_LOOKUP);
+        lookup.click();
+        lookup.setQuery('l');
+        lookup.waitUntilOpen();
+        const option3 = lookup.getOption(2);
+        option3.click();
+        expect(lookup.getSelectedOptionLabel()).toBe('La Habana');
+        browser.keys(ESCAPE_KEY);
+        expect(modal.isOpen()).toBe(false);
+    });
+    it('should close the modal when select an option with keyboard and then press ESC', () => {
+        const modal = new PageModal(MODAL);
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
+        modal.waitUntilOpen();
+        const lookup = new PageLookup(MODAL_LOOKUP);
+        lookup.click();
+        lookup.setQuery('l');
+        lookup.waitUntilOpen();
+        browser.keys(ARROW_DOWN_KEY);
+        browser.keys(ENTER_KEY);
+        expect(lookup.getSelectedOptionLabel()).toBe('Barcelona');
+        browser.keys(ESCAPE_KEY);
+        expect(modal.isOpen()).toBe(false);
+    });
 });

src/components/Lookup/index.js

@@ -284,6 +284,7 @@ class Lookup extends Component {
             searchValue: '',
         });
         onChange(value);
+        setTimeout(() => this.containerRef.current.focus(), 0);
     }
 
     /**

src/components/Lookup/options/index.js

@@ -5,30 +5,16 @@ import SearchIcon from '../icons/searchIcon';
 import './styles.css';
 
 function MenuItems(props) {
-    const {
-        items,
-        onClick,
-        focusedItemIndex,
-        onHover,
-    } = props;
+    const { items, onClick, focusedItemIndex, onHover } = props;
 
     return items.map((item, index) => {
-        const {
-            label,
-            description,
-            icon,
-            type,
-        } = item;
+        const { label, description, icon, type } = item;
         const isActive = index === focusedItemIndex;
         const key = `lookup-item-${index}`;
 
         if (type === 'header') {
             return (
-                <li
-                    key={key}
-                    className="rainbow-lookup_menu-item_header"
-                    role="separator"
-                >
+                <li key={key} className="rainbow-lookup_menu-item_header" role="separator">
                     <span className="rainbow-lookup_menu-item_header-label">{label}</span>
                 </li>
             );
@@ -43,7 +29,7 @@ function MenuItems(props) {
                 isActive={isActive}
                 index={index}
                 onHover={onHover}
-                onClick={onClick}
+                onClick={() => onClick(item)}
             />
         );
     });
@@ -88,21 +74,22 @@ export default class Options extends React.PureComponent {
         }
 
         const resultContainerStyles = {
-            height: (itemHeight * items.length) + 17,
+            height: itemHeight * items.length + 17,
             maxHeight: 256,
         };
 
         return (
             <ul
                 className="rainbow-lookup_options-container"
                 style={resultContainerStyles}
-                ref={this.containerRef}>
-
+                ref={this.containerRef}
+            >
                 <MenuItems
                     items={items}
                     focusedItemIndex={focusedItemIndex}
                     onClick={onSelectOption}
-                    onHover={onHoverOption} />
+                    onHover={onHoverOption}
+                />
             </ul>
         );
     }

src/components/Lookup/options/menuItem.js

@@ -8,7 +8,6 @@ export default class MenuItem extends Component {
     constructor(props) {
         super(props);
         this.itemRef = React.createRef();
-        this.handleClick = this.handleClick.bind(this);
         this.handleHover = this.handleHover.bind(this);
     }
 
@@ -19,29 +18,19 @@ export default class MenuItem extends Component {
         });
     }
 
-    handleClick() {
-        const { label, description, icon, onClick } = this.props;
-        const option = {
-            label,
-            description,
-            icon,
-        };
-        onClick(option);
-    }
-
     handleHover() {
         const { onHover, index } = this.props;
         onHover(index);
     }
 
     render() {
-        const { label, description, icon } = this.props;
+        const { label, description, icon, onClick } = this.props;
 
         return (
             <li
                 className={this.getContainerClassNames()}
                 role="presentation"
-                onClick={this.handleClick}
+                onClick={onClick}
                 onMouseEnter={this.handleHover}
             >
                 <a href="javascript:void(0);" role="menuitem" ref={this.itemRef}>

src/components/Modal/readme.md

@@ -466,11 +466,16 @@
         }
 
         handleOnClick() {
-            return this.setState({ isOpen: true });
+            return this.setState({
+                isOpen: true,
+            });
         }
 
         handleOnClose() {
-            return this.setState({ isOpen: false });
+            return this.setState({
+                isOpen: false,
+                options: null,
+            });
         }
 
         search(value) {