SAP
diff --git a/‎src/ComboboxInput/ComboboxInput.Component.js
Copy file name to clipboard
+13-23Lines changed: 13 additions & 23 deletions b/‎src/ComboboxInput/ComboboxInput.Component.js
Copy file name to clipboard
+13-23Lines changed: 13 additions & 23 deletions
diff --git a/‎src/ComboboxInput/ComboboxInput.js
Copy file name to clipboard
+37-10Lines changed: 37 additions & 10 deletions b/‎src/ComboboxInput/ComboboxInput.js
Copy file name to clipboard
+37-10Lines changed: 37 additions & 10 deletions
diff --git a/‎src/ComboboxInput/ComboboxInput.test.js
Copy file name to clipboard
+45-24Lines changed: 45 additions & 24 deletions b/‎src/ComboboxInput/ComboboxInput.test.js
Copy file name to clipboard
+45-24Lines changed: 45 additions & 24 deletions
diff --git a/‎src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/‎src/ComboboxInput/__snapshots__/ComboboxInput.test.js.snap
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
@@ -1,25 +1,15 @@
+import { ComboboxInput } from '../';
 import path from 'path';
 import React from 'react';
-import { ComboboxInput, List } from '../';
 import { ComponentPage, Example } from '../_playground';
 
 export const ComboboxInputComponent = () => {
-    const list = (
-        <List>
-            <List.Item>
-                <List.Text>List Item 1</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 2</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 3</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 4</List.Text>
-            </List.Item>
-        </List>
-    );
+    const options = [
+        { key: '1', text: 'List Item 1' },
+        { key: '2', text: 'List Item 2' },
+        { key: '3', text: 'List Item 3' },
+        { key: '4', text: 'List Item 4' }
+    ];
 
     return (
         <ComponentPage
@@ -30,31 +20,31 @@ export const ComboboxInputComponent = () => {
                 centered
                 title='Combobox Input'>
                 <ComboboxInput
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit' />
                 <ComboboxInput
                     compact
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit' />
             </Example>
 
             <Example
                 centered
                 title='Validation States'>
                 <ComboboxInput
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit'
                     validationState={{ state: 'error', text: 'Test validation state' }} />
                 <ComboboxInput
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit'
                     validationState={{ state: 'warning', text: 'Test validation state' }} />
                 <ComboboxInput
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit'
                     validationState={{ state: 'success', text: 'Test validation state' }} />
                 <ComboboxInput
-                    list={list}
+                    options={options}
                     placeholder='Select Fruit'
                     validationState={{ state: 'information', text: 'Test validation state' }} />
             </Example>
 
@@ -4,26 +4,30 @@ import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import FormInput from '../Forms/FormInput';
 import FormMessage from '../Forms/_FormMessage';
 import InputGroup from '../InputGroup/InputGroup';
+import List from '../List/List';
 import Popover from '../Popover/Popover';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
 const ComboboxInput = React.forwardRef(({
     placeholder,
-    list,
     compact,
     className,
     disabled,
     disableStyles,
     popoverProps,
     inputProps,
     buttonProps,
+    selectedKey,
     onClick,
+    onSelect,
+    options,
     validationState,
     ...props
 }, ref) => {
 
     let [isExpanded, setIsExpanded] = useState(false);
+    let [selectedOptionKey, setSelectedOptionKey] = useState(selectedKey);
 
     const inputGroupClass = classnames(
         'fd-input-group--control',
@@ -43,6 +47,15 @@ const ComboboxInput = React.forwardRef(({
         setIsExpanded(false);
     };
 
+    const handleSelect = (e, option) => {
+        setIsExpanded(false);
+        setSelectedOptionKey(option.key);
+        onSelect(e, option);
+    };
+
+    const selected = options
+        .find(option => typeof selectedOptionKey !== 'undefined' && option.key === selectedOptionKey);
+
     return (
         <Popover
             {...popoverProps}
@@ -55,7 +68,15 @@ const ComboboxInput = React.forwardRef(({
                         {validationState.text}
                     </FormMessage>
                     }
-                    {list}
+                    <List>
+                        {options.map(option => (
+                            <List.Item
+                                key={option.key}
+                                onClick={(e) => handleSelect(e, option)}>
+                                <List.Text>{option.text}</List.Text>
+                            </List.Item>
+                        ))}
+                    </List>
                 </>)}
             control={
                 <InputGroup
@@ -72,7 +93,9 @@ const ComboboxInput = React.forwardRef(({
                         {...inputProps}
                         compact={compact}
                         disableStyles={disableStyles}
-                        placeholder={placeholder} />
+                        onChange={() => null}
+                        placeholder={placeholder}
+                        value={selected && selected.text} />
                     <InputGroup.Addon isButton>
                         <Button
                             {...buttonProps}
@@ -88,6 +111,7 @@ const ComboboxInput = React.forwardRef(({
             disabled={disabled}
             noArrow
             onClickOutside={handleClickOutside}
+            show={isExpanded}
             useArrowKeyNavigation
             widthSizingType='matchTarget' />
     );
@@ -96,28 +120,31 @@ const ComboboxInput = React.forwardRef(({
 ComboboxInput.displayName = 'ComboboxInput';
 
 ComboboxInput.propTypes = {
-    list: PropTypes.object.isRequired,
     buttonProps: PropTypes.object,
     className: PropTypes.string,
     compact: PropTypes.bool,
     disabled: PropTypes.bool,
     disableStyles: PropTypes.bool,
     inputProps: PropTypes.object,
+    options: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        text: PropTypes.string.isRequired
+    })),
     placeholder: PropTypes.string,
     popoverProps: PropTypes.object,
+    selectedKey: PropTypes.string,
     validationState: PropTypes.shape({
         state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
         text: PropTypes.string
     }),
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    onSelect: PropTypes.func
 };
 
 ComboboxInput.defaultProps = {
-    onClick: () => {}
-};
-
-ComboboxInput.propDescriptions = {
-    list: 'An object containing a `List` component.'
+    options: [],
+    onClick: () => {},
+    onSelect: () => {}
 };
 
 export default ComboboxInput;
@@ -1,38 +1,27 @@
 import ComboboxInput from './ComboboxInput';
-import List from '../List/List';
 import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
 describe('<ComboboxInput />', () => {
-    const defaultList = (
-        <List>
-            <List.Item>
-                <List.Text>List Item 1</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 2</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 3</List.Text>
-            </List.Item>
-            <List.Item>
-                <List.Text>List Item 4</List.Text>
-            </List.Item>
-        </List>
-    );
+    const defaultOptions = [
+        { key: '1', text: 'List Item 1' },
+        { key: '2', text: 'List Item 2' },
+        { key: '3', text: 'List Item 3' },
+        { key: '4', text: 'List Item 4' }
+    ];
 
     const defaultComboBoxInput = (
         <ComboboxInput
-            list={defaultList}
+            options={defaultOptions}
             placeholder='Select Fruit' />
     );
 
     const compactComboBoxInput = (
         <ComboboxInput
             className='blue'
             compact
-            list={defaultList}
+            options={defaultOptions}
             placeholder='Select Fruit' />
     );
 
@@ -50,45 +39,77 @@ describe('<ComboboxInput />', () => {
 
     describe('Prop spreading', () => {
         test('should allow props to be spread to the ComboboxInput component', () => {
-            const element = mount(<ComboboxInput data-sample='Sample' list={defaultList} />);
+            const element = mount(<ComboboxInput data-sample='Sample' options={defaultOptions} />);
 
             expect(
                 element.find('.fd-input-group').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ComboboxInput component\'s Popover component', () => {
-            const element = mount(<ComboboxInput list={defaultList} popoverProps={{ 'data-sample': 'Sample' }} />);
+            const element = mount(<ComboboxInput options={defaultOptions} popoverProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
                 element.find('div.fd-popover').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ComboboxInput component\'s input element', () => {
-            const element = mount(<ComboboxInput inputProps={{ 'data-sample': 'Sample' }} list={defaultList} />);
+            const element = mount(<ComboboxInput inputProps={{ 'data-sample': 'Sample' }} options={defaultOptions} />);
 
             expect(
                 element.find('input').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
 
         test('should allow props to be spread to the ComboboxInput component\'s button element', () => {
-            const element = mount(<ComboboxInput buttonProps={{ 'data-sample': 'Sample' }} list={defaultList} />);
+            const element = mount(<ComboboxInput buttonProps={{ 'data-sample': 'Sample' }} options={defaultOptions} />);
 
             expect(
                 element.find('button.sap-icon--navigation-down-arrow').getDOMNode().attributes['data-sample'].value
             ).toBe('Sample');
         });
     });
+
+    describe('interaction', () => {
+        let onSelect;
+        let element;
+        beforeEach(() => {
+            onSelect = jest.fn();
+            element = mount(
+                <ComboboxInput onSelect={onSelect} options={defaultOptions} />
+            );
+            element.find('button').simulate('click');
+        });
+
+        afterEach(() => {
+            let event = new MouseEvent('mousedown', {});
+            document.dispatchEvent(event);
+        });
+
+        test('should call onSelect when the first checkbox option is clicked', () => {
+            element.find('.fd-list__item').at(0).simulate('click');
+
+            expect(onSelect).toHaveBeenCalledTimes(1);
+            expect(onSelect).toHaveBeenCalledWith(expect.anything(), defaultOptions[0]);
+        });
+
+        test('should call onSelect when the second checkbox option is clicked', () => {
+            element.find('.fd-list__item').at(1).simulate('click');
+
+            expect(onSelect).toHaveBeenCalledTimes(1);
+            expect(onSelect).toHaveBeenCalledWith(expect.anything(), defaultOptions[1]);
+        });
+    });
+
     test('forwards the ref', () => {
         let ref;
         class Test extends React.Component {
             constructor(props) {
                 super(props);
                 ref = React.createRef();
             }
-            render = () => <ComboboxInput list={defaultList} ref={ref} />;
+            render = () => <ComboboxInput options={defaultOptions} ref={ref} />;
         }
         mount(<Test />);
         expect(ref.current.tagName).toEqual('BUTTON');
 
@@ -20,6 +20,7 @@ exports[`<ComboboxInput /> create combobox input 1`] = `
       >
         <input
           className="fd-input fd-input-group__input"
+          onChange={[Function]}
           placeholder="Select Fruit"
           type="text"
         />
@@ -57,6 +58,7 @@ exports[`<ComboboxInput /> create combobox input 2`] = `
       >
         <input
           className="fd-input fd-input--compact fd-input-group__input"
+          onChange={[Function]}
           placeholder="Select Fruit"
           type="text"
         />