Add support for onFocus and onBlur props

[billfienberg]

Is your feature request related to a problem? Please describe.

I'm always frustrated when I can't add imperatively add a focus state to the wrapper when the input is focused.

Describe the solution you'd like
Update the render method to accept onFocus and onBlur props, and pass those props to the input element.

For example:

render() {
    const {
      id,
      name,
      className,
      allowMultiple,
      required,
      captureMethod,
      acceptedFileTypes
      onFocus, 
      onBlur, 
    } = this.props;
    return createElement(
      'div',
      { className: 'filepond--wrapper' },
      createElement('input', {
        type: 'file',
        name,
        id,
        accept: acceptedFileTypes,
        multiple: allowMultiple,
        required: required,
        className: className,
        capture: captureMethod,
        onFocus: onFocus,
        onBlur: onBlur,
        ref: element => (this._element = element)
      })
    );
  }

Describe alternatives you've considered

• Refs
• Adding event listeners in the onInit handler

Additional context
Issues search results for focus: https://github.com/pqina/react-filepond/issues?q=is%3Aissue+focus
Issues search results for blur: https://github.com/pqina/react-filepond/issues?q=is%3Aissue+blur

[rikschennink]

Thanks for the detailed issue report. This would be useful I think, I'm on a short trip, can probably pick this up later this month, PR is welcome as well.

[rikschennink]

I experimented with this a bit. The above solution wouldn't work.

We'd need to add custom onblur and onfocus callbacks to the FilePond core (you can enter the FilePond drop area and navigate over multiple files before leaving). Then we can expose the above onFocus and onBlur handlers on the react adapter and link them to the custom core callbacks.

[sitch]

bump

[sombek]

bump