Filepicker onblur event (segmentio#533)

* Emulate onblur properly

* Add filepicker blur test

* Fix styling preferences

* Update FilePicker.js

* Provide files on the event

* Fix test

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}
         />
 
         <Button
@@ -131,6 +138,7 @@ export default class FilePicker extends PureComponent {
           height={height}
           flexShrink={0}
           type="button"
+          onBlur={this.handleBlur}
         >
           {buttonText}
         </Button>
@@ -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)
+  }
 }

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(<FilePicker onBlur={onBlur} />)
+  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(<FilePicker />)
   const e = {

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).
       <button
         className="css-69cngj evergreen-file-picker-button 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_32px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_0px 📦bblr_0px 📦pt_0px 📦pb_0px 📦pr_16px 📦pl_16px 📦ml_0px 📦mr_0px 📦mb_0px 📦h_32px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦flx-srnk_0 📦box-szg_border-box"
         disabled={undefined}
+        onBlur={Function {}}
         onClick={Function {}}
         type="button"
       >