purescript-react / purescript-lumi-components

Library of our UI components
https://lumihq.github.io/purescript-lumi-components/#/
Apache License 2.0
105 stars 5 forks source link

Ability to pass validation state to the input element #189

Closed i-am-the-slime closed 3 years ago

i-am-the-slime commented 3 years ago

I'd like to add the aria invalid attribute to the input component when validation fails. However, when rendering and there's a possible validation error the input has turned into opaque JSX. Is there a way to do this with a custom render function or any other way?

hdgarrood commented 3 years ago

You might be able to write your own version of validated, or maybe you’ll want to use the FormBuilder constructor directly and handle the rendering of the form element directly alongside the validation state. I’m not sure if there’s a good way of doing this without poking around inside Form.Internal.

i-am-the-slime commented 3 years ago

Thank you for your prompt response @hdgarrood ! I've been struggling with this for a while now. I don't mind poking around Form.Internal, but even then I'm not able to really get it by myself. I get the feeling that my attempts are the wrong way around. I need to un FormBuilder the input component in order to run validations on its result but I want to also pass it different props based on the validation result. It seems that the only possible thing after running the validations is to modify the JSX tree but the time of passing props is over at that point. Could you outline an idea of how you'd adjust Form.Internal to achieve this?

i-am-the-slime commented 3 years ago

Okay I got something ugly to work. It's probably too specific a need to warrant a ticket here and my solution changes too many things in the library. I'll close for now.