asked on November 19, 2021 Show version history

I have a table I've create in a form.  There are 4 input fields in the table.  The out of box .form-focused functionality doesn't work well between input fields in my table and fields outside the table.  Its easy enough to use css or jquery to add the highlight coloring to the li of my table when focused inside the table in an input.  But, I cant get the outside element to understand I have focused inside of the table.  The focus highlighting remains on the outside element even after I have clicked into an input in my table and the table focus has kicked in.  When I click away from my table the highlighting on the table goes away, so again the table is triggering the focus function, but the outside element doesn't understand. 

Does anyone have a solution to get the focus functionality working as expected between table inputs and other focused elements outside the table? 

 

Here is the focus highlight working as expected on this element.  Click the element and focus triggers highlight.

 

Here is my problem.  I now focus on the table above.  I have jquery adding the .form-focused class to the table when focused in an input of the table (I wish I didnt have to manually do this, but ok).  So "focus is happening and triggering the add class.  Yet the element below the table doesnt know that focus has shifted, thus the highlighting is still showing.  This only happens when going between a stand alone element, such as a radio selection into a table.  The form focus functionality works as expected going between non table elements.

0 0