16
Views
1
Comments
[Shortcut Keys Reactive] Issue with ShortcutKeysReactive component for Destroying the event
shortcut-keys-reactive
Reactive icon
Forge asset by Rafael Fantato
Application Type
Reactive

Hello Team,

Thanks for this great component.

We are using 'ShortcutKeysReactive' component for keyboard shortcuts. On main landing page we navigate through screen using tab and press enter on focused element and that link/button gets clicked and it opens the sidebar. When we go to the sidebar, there we have shortcut 'Ctrl+R' for enabling checkbox and after that we use 'Enter' key to toggle the checkbox values. When we close the sidebar and comes on landing page, highlighted elements(focused) are not clickable using enter. 

Because when some key shortcut is hit, it's event gets registered with page's DOM, closing the sidebar, doesn't clear it's event for enter, overriding that with Javascript doesn't work since only one action is allowed for one key. Can we make some changes in component to destroy the event for enter key.

 Thanks and Regards,

Suraj Borade

2023-10-06 09-55-49
achref salmi

Dans OutSystems, vous pouvez manipuler des événements JavaScript pour ajouter ou supprimer des gestionnaires d'événements lorsque vous ouvrez ou fermez des éléments comme une barre latérale (sidebar). Pour résoudre votre problème, il faut ajouter un peu de code JavaScript pour désactiver l'écoute de la touche Enter lorsque la barre latérale se ferme, afin qu'elle ne soit plus active sur la page principale.

Voici une approche adaptée à OutSystems :

  1. Créer un bloc JavaScript pour gérer les événements clavier : Vous pouvez utiliser une action JavaScript (dans un JavaScript Block) dans OutSystems pour ajouter ou supprimer les événements de manière conditionnelle. Par exemple, lorsque la sidebar est ouverte, vous ajoutez un écouteur pour le raccourci clavier Ctrl + R et lorsque la sidebar se ferme, vous désactivez ce même événement.

  2. Ajouter et supprimer l'écouteur d'événements pour la touche Enter : Vous pouvez utiliser les fonctions suivantes dans un bloc JavaScript d'OutSystems.

Code JavaScript dans le bloc JavaScript d'OutSystems :

javascriptCopy code// Fonction pour activer les raccourcis clavierfunction enableKeyboardShortcuts() {    

document.addEventListener('keydown', handleKeyPress);}

// Fonction pour désactiver les raccourcis clavierfunction disableKeyboardShortcuts() {    document.removeEventListener('keydown', handleKeyPress);}

// Gestion de la touche 'Enter' (ou autres touches spécifiques)

function handleKeyPress(event) {    if (event.key === 'Enter') {       

 // Logique pour gérer l'action de la touche 'Enter'        

// Par exemple, vérifier si le focus est sur un élément cliquable et simuler un clic        

// event.preventDefault();  

// Si vous voulez empêcher l'action par défaut    }}

// Appeler `enableKeyboardShortcuts` lorsque la sidebar est ouverte

// Appeler `disableKeyboardShortcuts` lorsque la sidebar est fermée

Ajout dans les actions d'OutSystems :

  • Lors de l'ouverture de la sidebar (lorsque vous ouvrez la fenêtre ou le panneau), vous pouvez appeler enableKeyboardShortcuts via une Action JavaScript.
  • Lors de la fermeture de la sidebar, vous appelez disableKeyboardShortcuts pour supprimer l'écouteur d'événements.

Exemple dans un événement de bouton ou d'action :

javascriptCopy codeif (isSidebarOpen) {    

enableKeyboardShortcuts(); 

// Active les raccourcis clavier} 

else {   

 disableKeyboardShortcuts(); // Désactive les raccourcis clavier}

Cela garantit que, lorsque la sidebar est fermée, l'événement lié à la touche Enter ne sera plus actif sur la page principale.

N'hésitez pas à me faire savoir si vous avez besoin de plus de détails pour l'intégration dans votre application OutSystems !

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.