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).