search

Availity / availity-reactstrap-validation

Easy to use React validation components compatible for reactstrap.
https://availity.github.io/availity-reactstrap-validation/
MIT License
191 stars 70 forks source link

New Feature: AvForm - focus on error #192

Closed diegodesouza closed 4 years ago

diegodesouza commented 4 years ago

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?

nylon22 commented 4 years ago

@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.

diegodesouza commented 4 years ago

@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()

diegodesouza commented 4 years ago

I tried the isSubmitted from the form ref.current.state but even that didn't seem to work properly for me.

nylon22 commented 4 years ago

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.

diegodesouza commented 4 years ago

ah, you're using onSubmit, we've been using onValidSubmit, let me try it that way

diegodesouza commented 4 years ago

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?

diegodesouza commented 4 years ago

spoke too soon. I used scrollIntoView along with focus lol thanks @nylon22

diegodesouza commented 4 years ago

@nylon22 I noticed that AvSelectField doesn't get the focused, nor the outline. Can you look into it please?

nylon22 commented 4 years ago

Please see this: https://github.com/JedWatson/react-select/issues/117

Closing as this is an implementation detail and out of scope for the original issue.