react-filepond

react-filepond copied to clipboard

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

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.

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.

bump