diff --git a/src/file-picker/src/FilePicker.js b/src/file-picker/src/FilePicker.js index bda62b496..3bfa3c104 100644 --- a/src/file-picker/src/FilePicker.js +++ b/src/file-picker/src/FilePicker.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import Box from 'ui-box' import { Button } from '../../buttons' import { TextInput } from '../../text-input' +import safeInvoke from '../../lib/safe-invoke' export const CLASS_PREFIX = 'evergreen-file-picker' @@ -49,7 +50,12 @@ export default class FilePicker extends PureComponent { /** * Function called when onChange is fired */ - onChange: PropTypes.func + onChange: PropTypes.func, + + /** + * Function called when onBlur is fired + */ + onBlur: PropTypes.func } constructor() { @@ -120,6 +126,7 @@ export default class FilePicker extends PureComponent { height={height} flex={1} textOverflow="ellipsis" + onBlur={this.handleBlur} /> @@ -143,18 +151,20 @@ export default class FilePicker extends PureComponent { } handleFileChange = e => { - const { onChange } = this.props // Firefox returns the same array instance each time for some reason const files = [...e.target.files] this.setState({ files }) - if (onChange) { - onChange(files) - } + safeInvoke(this.props.onChange, files) } handleButtonClick = () => { this.fileInput.click() } + + handleBlur = e => { + if (e && e.target) e.target.files = this.state.files + safeInvoke(this.props.onBlur, e) + } } diff --git a/src/file-picker/test/index.js b/src/file-picker/test/index.js index e9f0ca59f..b7bcba562 100644 --- a/src/file-picker/test/index.js +++ b/src/file-picker/test/index.js @@ -69,6 +69,21 @@ test('calls onChange', t => { t.deepEqual(onChange.firstCall.args[0], e.target.files) }) +test('calls onBlur', t => { + const onBlur = sinon.spy() + const component = shallow() + const e = { + target: { + files: [{ name: 'data.json' }] + } + } + + component.find(`.${CLASS_PREFIX}-file-input`).simulate('change', e) + component.find(`.${CLASS_PREFIX}-text-input`).simulate('blur') + t.true(onBlur.calledOnce) + t.deepEqual(component.state().files, e.target.files) +}) + test('handles 1 file selected', t => { const component = shallow() const e = { diff --git a/src/file-picker/test/snapshots/index.js.md b/src/file-picker/test/snapshots/index.js.md index 667416cbb..1d306a980 100644 --- a/src/file-picker/test/snapshots/index.js.md +++ b/src/file-picker/test/snapshots/index.js.md @@ -26,6 +26,7 @@ Generated by [AVA](https://ava.li). 'aria-invalid'={false} className="css-5ljhhe evergreen-file-picker-text-input 📦color_425A70 📦fnt-fam_b77syt 📦fnt-sze_12px 📦f-wght_400 📦ln-ht_16px 📦ltr-spc_0 📦w_280px 📦h_32px 📦pl_10px 📦pr_10px 📦bblr_3px 📦bbrr_0-important 📦btlr_3px 📦btrr_0-important 📦flx_1 📦txt-ovrf_ellipsis 📦box-szg_border-box" disabled={false} + onBlur={Function {}} placeholder="Select a file to upload…" readOnly={true} required={undefined} @@ -36,6 +37,7 @@ Generated by [AVA](https://ava.li).