Focus on first invalid component in form

I have a form with several components inside, I would like to auto focus to the first component in the form which caused it to be invalid on submit

Hello @smorris!

Great idea, I can file a Feature Request for this and will keep you updated on any news I hear on it :+1:

@Jack_T I understand this feature is not yet available but is there a workaround I can implement for the time being? Currently it seems I am forced to write a script to check each and every field, determine whether its invalid, then focus on it. Does Retool not provide reference to the document on the DOM so I could make use of the querySelector?

Hello @smorris,

I just checked the feature request status and it is "ready for work" for our UI team.

Currently Retool does not have a built in way to access the DOM for components, you would just need to write custom Javascript logic to use methods such as querySelector as our components are subject to change and this will impact future DOM trees and therefore we recommend using component state for best practices as that will remain consistent as we add in more parts to components.

You can use form1.data and iterate over these to check when there is invalid data.