New Feature: AvForm - focus on error
diegodesouza opened this issue · 9 comments
We're running into an issue where when the user clicks a button to submit a form and there are invalid fields, the invalid fields are not in focus and or view. There's this discussion in regards to formkit here so I know there's a way to accomplish this. Is there a way to get this going for AvForm?
@diegodesouza The link you provided contains the logic to needed to complete this with availity-reactstrap-validation
Add a hook/lifecycle method that reacts to the submit count. When that changes, find the first error in the form and call .focus()on the element.
@nylon22 the issue I'm encountering here is that I don't pass the ref for the form down to a component so that I can check the nextProps like they're doing it. I do have a ref of the form but haven't been able to get it to check for hasError()
I tried the isSubmitted from the form ref.current.state but even that didn't seem to work properly for me.
I was able to get it to work: https://codesandbox.io/s/reactstrap-validation-152-s6jt2?fontsize=14&hidenavigation=1&theme=dark
Please note this solution assumes the name of your inputs matches the id of the inputs. If this is not the case, you will have to map the names to the ids as the errors property that comes through in the submit callback is of the names of the inputs and i'm using document.querySelector(#id) to grab the element to focus.
ah, you're using onSubmit, we've been using onValidSubmit, let me try it that way
It might be me, but after extending your example to have more fields, that way we'd see it focus/ scroll into view. That didn't happen. Can you confirm that's what you're trying to accomplish?
spoke too soon. I used scrollIntoView along with focus lol thanks @nylon22
@nylon22 I noticed that AvSelectField doesn't get the focused, nor the outline. Can you look into it please?
Please see this: JedWatson/react-select#117
Closing as this is an implementation detail and out of scope for the original issue.