diff --git a/packages/junipero/lib/SelectField/index.js b/packages/junipero/lib/SelectField/index.js index 018f787f3..b16829c37 100644 --- a/packages/junipero/lib/SelectField/index.js +++ b/packages/junipero/lib/SelectField/index.js @@ -44,7 +44,9 @@ const SelectField = forwardRef(({ onChange = () => {}, onFocus = () => {}, onToggle = () => {}, + dissociateFieldParsing = false, parseTitle = val => val?.toString?.(), + parseFieldTitle = val => val?.toString?.(), parseValue = val => val, validate = val => !required || typeof val !== 'undefined', ...rest @@ -297,7 +299,12 @@ const SelectField = forwardRef(({ placeholder={placeholder} label={label} empty={!state.value} - value={parseTitle(state.value || '')} + value={ + (dissociateFieldParsing + ? parseFieldTitle + : parseTitle + )(state.value || '') + } valid={state.valid} focused={state.focused} onMouseDown={onMouseDown_} @@ -390,7 +397,9 @@ SelectField.propTypes = { onFocus: PropTypes.func, onToggle: PropTypes.func, opened: PropTypes.bool, + dissociateFieldParsing: PropTypes.bool, parseTitle: PropTypes.func, + parseFieldTitle: PropTypes.func, parseValue: PropTypes.func, placeholder: PropTypes.oneOfType([ PropTypes.string, diff --git a/packages/junipero/lib/SelectField/index.stories.js b/packages/junipero/lib/SelectField/index.stories.js index 70dffb843..96930ebd6 100644 --- a/packages/junipero/lib/SelectField/index.stories.js +++ b/packages/junipero/lib/SelectField/index.stories.js @@ -146,3 +146,13 @@ export const alwaysOpened = () => ( onChange={action('change')} /> ); + +export const withParsedFieldTitle = () => ( + o && `Custom title: ${o}`} + onChange={action('change')} + /> +); diff --git a/packages/junipero/lib/SelectField/index.test.js b/packages/junipero/lib/SelectField/index.test.js index e75b53a81..4e66f4a08 100644 --- a/packages/junipero/lib/SelectField/index.test.js +++ b/packages/junipero/lib/SelectField/index.test.js @@ -42,6 +42,28 @@ describe('', () => { expect(ref.current.internalValue).toBe('Two'); }); + it('should dissociate field title parsing from options parsing', () => { + const ref = createRef(); + const component = mount( + o && `Custom parsed title: ${o}`} + parseTitle={o => o} + /> + ); + expect(ref.current.internalValue).toBe('One'); + expect(component.find('.value').text()).toBe( + 'Custom parsed title: One' + ); + component.find('.base').simulate('focus'); + expect(ref.current.opened).toBe(true); + expect(component.find('.dropdown-item').at(0).find('a').text()) + .toBe('One'); + }); + it('should close menu when disabled prop changes', () => { const ref = createRef(); const component = mount();