Skip to Content (Press Enter)
2023-02-28 08-44-38
Vasudevan Natesan
295Views
4Comments
Solved
[OutSystems UI] Navigation tabs disable switching by arrow keys
Question
JavaScript
Reactive
Forge
OutSystems 11
OutSystems UI
outsystems-ui
Reactive icon
OutSystems UI (O11)
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.53.40 (Build 61951)

Hi !,

I am using Navigation Tabs in reactive  web application, I have been trying to disable switching of tabs "onkeypress" of left and right arrow keys,

I have tried this thread https://www.outsystems.com/forums/discussion/82128/outsystems-ui-is-there-a-way-to-disable-arrow-keys-from-changing-tabs-in-reacti/  but when the input box in tab content is focused on , the arrow key allows to switch tabs,


I have achieved the expected result by overwriting the javascript for entire screen by changing the condition, Any alternative to disable the particular Outsystem event or disable or override, 

Thanks team.

0
0
28 Feb 2023
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Vasudevan Natesan,

Can you please mention the OS UI version you're using?
About adding the code to a specific Tab instance you can do it by getting the object instance (Tabs are javascript objects and each component on a screen has its own instance).

In order to achieve that you can add the following code to the OnReady event of the screen/block where you're using the Tabs (in the future almost all components will have the Initialized event where we should do this, but until then we need to add in the OnReady):

var x = OutSystems.OSUI.Patterns.TabsAPI.GetTabsById($parameters.TabsWidgetId);
x._handleKeypressEvent = (e) => {
          if(e.code === "ArrowLeft" || e.code === "ArrowRight") 
          {
                e.preventDefault();  
          } 
}


Update: This was fixed in version 2.15.0, in the context of ROU-4198 for reference on the release notes.

Cheers,
GM


See solution in context
0
0
11 Apr 2023
Copy Link
2023-02-03 11-00-49
Ruben Bernardo

You could take a look at this approach by Bernardo Cardoso: OutSystems UI Extensibility: Part II

What you need to do is findding a way to overwrite the "_handleKeypressEvent" callback within the Tabs class.

1
0
01 Mar 2023
Copy Link
2024-09-12 02-43-38
Deepsagar Dubey

HI Vasudevan,

Would you provide some screenshots to better understanding what you want to achieve.


Regards

Deep

1
0
01 Mar 2023
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Vasudevan Natesan,

Can you please mention the OS UI version you're using?
About adding the code to a specific Tab instance you can do it by getting the object instance (Tabs are javascript objects and each component on a screen has its own instance).

In order to achieve that you can add the following code to the OnReady event of the screen/block where you're using the Tabs (in the future almost all components will have the Initialized event where we should do this, but until then we need to add in the OnReady):

var x = OutSystems.OSUI.Patterns.TabsAPI.GetTabsById($parameters.TabsWidgetId);
x._handleKeypressEvent = (e) => {
          if(e.code === "ArrowLeft" || e.code === "ArrowRight") 
          {
                e.preventDefault();  
          } 
}


Update: This was fixed in version 2.15.0, in the context of ROU-4198 for reference on the release notes.

Cheers,
GM


0
0
11 Apr 2023
Copy Link
2022-10-31 11-16-22
Tamour Ahmad
Staff

In case someone stumbles upon this issue.
This was fixed in 2.15.0 version of OutSystemsUI.

https://www.outsystems.com/forge/component-versions/1385/version/0/platform/

ROU-4198 - Fixed an issue that caused the Tabs component to change tabs when pressing the arrow keys when the focus is on the Tabs content. 

Now, the Tabs component just changes tabs when the active Tab Header is focused and the right/left arrow keys are pressed.


0
1
21 Jun 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.