Handling keyboard shortcuts in applications

If your application is using keyboard shortcuts, they might interfere with some Product Fruits elements. For instance, the adoption meter or feedback widgets require some user input, but if your application uses single key shortcuts, there might be a clash.

Solutions might vary, but the general principle is to check the composedPath array of the keypress event you probably use for detecting keyboard shortcuts.

This is a simple example of checking the event path:

window.addEventListener('keypress', e => {
    if(e.composedPath()
    	.some(el => el.classList && el.classList.contains('productfruits--container'))) {
        console.log('This event comes from a PF element, do not execute the shortcut')
    }
})

As you can see, we're filtering through composedPath() and checking if there is an element with the productfruits--container class. If it is, you shouldn't trigger the shortcut.