diff --git a/tests/view/components/dropdown.js b/tests/view/components/dropdown.js index 1c50fa757a..0cc67cb481 100644 --- a/tests/view/components/dropdown.js +++ b/tests/view/components/dropdown.js @@ -16,6 +16,7 @@ import { mount } from 'enzyme'; import Dropdown from '../../../view/admin/components/common/Dropdown.js'; describe('Dropdown component tests', () => { + const ZERO = 0; const ONE = 1; const DUMMY_STRING = 'COOL'; const DUMMY_FUNCTION = () => {}; @@ -24,9 +25,10 @@ describe('Dropdown component tests', () => { * Sets up the component with dummy prop values. * @param {Object} propAddons Optional object specifying * overrides to the default props + * @param {ReactElem} childElems The react elements * @returns {Object} The rendered component */ - function setup(propAddons) { + function setup(propAddons, childElems) { const defaultProps = { options: [], dropDownStyle: {}, @@ -38,17 +40,55 @@ describe('Dropdown component tests', () => { showSearchIcon: false, onAddNewButton: DUMMY_FUNCTION, onClickItem: DUMMY_FUNCTION, + showInputElem: false, //default }; // update props as needed if (propAddons) { Object.assign(defaultProps, propAddons); } // use monut to test all lifecycle methods, and children - const enzymeWrapper = mount(); - + const enzymeWrapper = mount( + {childElems} + ); return enzymeWrapper; } + it('calling close from props closes the dropdown', () => { + const enzymeWrapper = setup(); + const instance = enzymeWrapper.instance(); + instance.handleFocus(); // show the dropdown + expect(instance.state.open).to.equal(true); + enzymeWrapper.setProps({ close: true }); + expect(instance.state.open).to.equal(false); + }); + + it('when showInputElem is false and there are ' + + 'child element(s), there is no input rendered', () => { + // by default, showInputElem = false + const enzymeWrapper = setup({},
); + expect(enzymeWrapper.find('.slds-lookup__search-input')) + .to.have.length(ZERO); + }); + + it('even when showInputElem is false, if given no child elements, ' + + 'input is rendered', () => { + // by default, showInputElem = false + const enzymeWrapper = setup(); + expect(enzymeWrapper.find('.slds-lookup__search-input')) + .to.have.length(ONE); + }); + + it('when showInputElem is true, an input is rendered with ' + + 'child element(s)', () => { + // by default, showInputElem = false + const enzymeWrapper = setup( + { showInputElem: true }, +
); + expect(enzymeWrapper.find('.slds-lookup__search-input')) + .to.have.length(ONE); + expect(enzymeWrapper.find('#lookForMe')).to.have.length(ONE); + }); + it('input is rendered by default', () => { const enzymeWrapper = setup(); expect(enzymeWrapper.find('.slds-lookup__search-input')) diff --git a/view/admin/components/common/Dropdown.js b/view/admin/components/common/Dropdown.js index c5c45fd6f2..e3f4972b1b 100644 --- a/view/admin/components/common/Dropdown.js +++ b/view/admin/components/common/Dropdown.js @@ -72,6 +72,9 @@ class Dropdown extends React.Component { if (nextProps.options !== this.props.options) { this.setState({ data: nextProps.options }); } + if (nextProps.close) { + this.handleClose(); + } } render () { const { @@ -84,6 +87,8 @@ class Dropdown extends React.Component { showSearchIcon, onAddNewButton, onClickItem, + showInputElem, + children, // react elements } = this.props; const { data } = this.state; let outputUL = ''; @@ -94,7 +99,8 @@ class Dropdown extends React.Component { return (
  • + className={'slds-lookup__item-action ' + + 'slds-media slds-media--center'}>
    - { this.props.children } - { inputElem } + { !children && inputElem} + { children } + { (children && showInputElem) && inputElem }
    -
    - { showSearchIcon &&
    + { showSearchIcon && + } { this.state.open && } @@ -180,6 +196,8 @@ Dropdown.propTypes = { onClickItem: PropTypes.func.isRequired, children: PropTypes.element, showSearchIcon: PropTypes.bool, + showInputElem: PropTypes.bool, + close: PropTypes.bool, // if true, close dropdown }; export default Dropdown; diff --git a/view/perspective/CreatePerspective.js b/view/perspective/CreatePerspective.js index 5ca2fc2c8f..f58f6106d8 100644 --- a/view/perspective/CreatePerspective.js +++ b/view/perspective/CreatePerspective.js @@ -236,10 +236,14 @@ class CreatePerspective extends React.Component { } else { newState[dropdownTitle] = [valueToAppend]; } - } else if (valueInState) { - // for single pill fields with non-empty value, + } else { // single pill input + // close the dropdown + config.close = true; + // field had value, // add replaced value into options - config.options.push(valueInState); + if (valueInState) { + config.options.push(valueInState); + } } // remove selected option from available options in dropdown const arr = filteredArray(config.options || [], valueToAppend); @@ -312,6 +316,9 @@ class CreatePerspective extends React.Component { } // if display value is array, use multi pill // else single pill + // showInputElem {Bool} if true, show additional + // input near dropdown + const showInputElem = dropdownConfig[key].isArray; if (value.length) { if (dropdownConfig[key].isArray) { pillOutput = ; } else if (typeof value === 'string') { + // Do not show input when there's pills pillOutput = ; } } - // show input below dropdown, to filter - const _config = Object.assign( - dropdownConfig[key], { showInputWithContent: true }, - ); + const _config = Object.assign(dropdownConfig[key], { showInputElem }); dropdownObj[key] = ( { pillOutput }