search

final-form / final-form-focus

🏁 Final Form "decorator" that will attempt to apply focus to the first field with an error upon an attempted form submission
MIT License
83 stars 15 forks source link

Providing a custom findInput method #2

Closed nik-lampe closed 6 years ago

nik-lampe commented 6 years ago

Are you submitting a bug report or a feature request?

Feature Request

What is the current behavior?

I am using custom components in my form (react-select components in this case). They don'r render any input components, so they aren't found with the findInput method that is currently implemented.

What is the expected behavior?

I suggest adding an optional parameter to the createDecorator function, which is used to find the input if provided. Just like the getInputs parameter.

What's your environment?

final-form: "^4.8.3", react-final-form: "^3.3.1", Chrome Version 67.0.3396.99 on MacOS 10.13.6 node v10.7.0

Other information

I have forked this and implemented it for my own use. I can create a PR out of it, if needed. But it's only a very simple change.

https://github.com/nik-lampe/final-form-focus/tree/feature/find-input

erikras commented 6 years ago

I'd love to see a PR. 👍

erikras commented 6 years ago

Update the README, too, please.

nik-lampe commented 6 years ago

Done. This is my first PR ever, so I'd love feedback if I made any mistakes. 🙂

erikras commented 6 years ago

Published fix in v1.1.0.

tylergaugler16 commented 6 years ago

@nik-lampe, would you mind giving an example on how to implement passing in GetInputs and FindInput?

Gzbox commented 5 years ago

@nik-lampe Hello, I don't know if I use the select component, how to make the interface slide to the corresponding position when the validation fails. Can you tell me how to use findInput? Can it fulfill my needs? PS: It is best to have a demo demo, thank you very much.

nik-lampe commented 5 years ago

Hey,

sure here is a fork of the original codesandbox example:

https://codesandbox.io/s/react-final-form-focus-on-first-error-egxcq

Hope this helps