[BUG] - Cannot focus Select component errors inside an edit grid via clicking the form validation errors

[llaurentiu]

Cannot navigate via form validation errors to an invalid select field inside an edit grid, when submiting draft submissions.

1. Having a form with an edit grid edited in modal, that has components of type select that are required (or any type of validation that can be triggered)
2. Save a submission in draft state
3. Edit the submission & try to submit it ( state = submitted)
4. Click on the validation error related to the select component

Expected behavior: edit grid row modal is opened and the invalidSelect field is focused.

Current behavior: nothing happens.

JS fiddle here (for latest stable version, but also for lower versions): https://jsfiddle.net/llaurentiu/kg1odh4s/26/

Notice that navigating to a text field works, or navigating to the Select after previously focusing the a Text field error for instance.

[Shivansh shukla]

Hi, can you post a loom regarding the issue, bit unclear and would be happy to take this up.

[llaurentiu]

Hi, can you post a loom regarding the issue, bit unclear and would be happy to take this up.

Hi, sorry for the late reply.

There is already a jsfiddle attached. Try to submit the form and click on the validation error for the "Country" field. It should open the modal and focus the component, but it doesn't.

Basically the select component should call beforeFocus of the parent component. Below is an extended select component that overrides the focus method - which fixes the issue.

`
focus() {

     if (typeof this.parent?.beforeFocus === 'function' && !this['focusableElement']) {

        this.parent.beforeFocus(this);

     }

     return super.focus();

}
`

[Shivansh shukla]

Hi, Thanks for the reply, can you assign this to me so that i can work on this?

[llaurentiu]

Hi, Thanks for the reply, can you assign this to me so that i can work on this?

Don't seem to be able to do that - but I don't see why anyone else cannot come with MRs on this :)