36
Views
3
Comments
tab navigation not working on sidebar
Application Type
Reactive

I have a block1 which have form and the block2 contains the block1 inside sidebar and in block1 i have several custom components just like dropdowns so when i am trying tab navigation inside sidebar it is not working for those custom dropdown components. Just to cross check i have removed sidebar and implemented directly block1 on screen so tab navigation is working fine from top to bottom. I have observed in the sidebar for those tab navigation is not working their tab index is set to -1 so those components have direct attribute property to set but have input to set tab index. So please let me know how can i achieve tab navigation for block1 inside sidebar.

2020-07-21 19-28-50
Rajat Agrawal
Champion

Hi chirag ghaghat,

As per you question, I implemented what I understand and it is working fine of me.

Can you please have a look on below OML what I did exactly that you are looking.

Or if possible you can share your OML.


Regards,

Rajat 

DemoSideBar.oml
UserImage.jpg
chirag ghaghat

@Rajat Agrawal here what i meant for tab navigation we want to set the focus on field as we press tab key from the keyboard from top to bottom inside the sidebar

2025-08-20 12-58-03
ADITI CHATURVEDI
AI Generated

Hi ,

Here are some steps which can help you to solve your problem hopefully

Step 1: Set Tabindex for Custom Components

  • For things like dropdowns and input fields inside block1, make sure that each of these fields has a tabindex set so they can be focused on when you press the Tab key.
  • In OutSystems, you can do this directly in the Properties tab for each widget (like dropdowns).
  • For example, set the tabindex of the first dropdown to 1, then the next input field to 2, and so on.


Step 2: Tabindex for the Sidebar

  • The sidebar (where block1 is inside) needs to be "focusable" too, so it’s important to make sure that the sidebar itself has a tabindex="0". This helps with the focus order when you're moving through the fields in the sidebar.
  • Check if your sidebar is loading properly and if its visibility might be causing issues with tabbing. Sometimes, OutSystems can hide or show elements, which can mess with the tab order, so make sure it’s not affecting the tabbing flow.


Step 3: Make Sure Tab Indexes Follow a Logical Order

  • Inside block1, make sure all the fields (dropdowns, inputs, etc.) are in a logical order for tabbing. For example, after the first dropdown (with tabindex="1"), you’d want to go to the next field, like an input field (tabindex="2"), and so on.


Step 4: Handle Dynamic Content

  • Since block1 is loaded inside the sidebar dynamically, it’s important to ensure that all the tabindex values are correctly set whenever the content is loaded into the sidebar.
  • OutSystems should handle most of this automatically, but you can double-check just to be sure everything is still in the right order when the sidebar shows up.


Step 5: Use the "Focus" Action If Needed

  • If, after opening the sidebar, you want to immediately focus on a specific field (like the first dropdown), you can use a Focus action.
  • This can be done with OutSystems’ built-in actions or, if you need more control, using a little bit of JavaScript. For example, you can run some code to focus on a specific element when the sidebar becomes visible.

Example of JavaScript: document.getElementById("YourDropdownId").focus();


Step 6: Client Actions and JavaScript for Complex Scenarios

  • If the sidebar's visibility or content changes a lot, you might want to use client actions (OutSystems' way of running code on the client side) or a small bit of JavaScript to fix any tabbing issues that pop up after the sidebar shows.


Step 7: Check Sidebar Visibility

  • Sometimes tabbing issues happen because the sidebar isn’t fully visible when the user tries to tab through it. So, make sure the sidebar is fully loaded and visible before you start tabbing. You can use OutSystems' dynamic visibility conditions to control this.

You can go through this and try these steps 

Thank You

This answer was AI-generated. Please read it carefully and use the forums for clarifications
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.