Disable key bindings

, ,
1

I am developing a custom interface that contains an input field that implements autocomplete. My current issue is that when I try to delete the text in the field, the backspace key triggers the undo event and goes back to the previous task. Is it possible to disable certain or all key bindings through prodigy.json or some js code that can overwrite Prodigy's defaults?

Thanks!

2

Hi! Are you using the latest version of Prodigy? It should already respect input fields etc. and not trigger the keyboard shortcuts. If it doesn't that's definitely something we want to fix in the core app.

You can also always do something like this in "javascript" in the "config" returned by your recipe:

document.addEventListener('prodigyupdate', event => {
    // fired when Prodigy's UI is updated
    var input = document.querySelector('.input')
    input.onkeydown = function(event) {
      // stop keydown event from propagating and triggering other actions
      event.stopPropagation()
    }
})
3

Thank you so much! Adding event.stopPropagation() solved the problem.

I am using version 1.7.1, not sure if it's the latest. FYI, I am building the custom interface using Vue.js. The autocomplete component is added to the html attribute as an html template.

<div id='vue-app'>
    <!-- content to be added by Vue -->
</div>
<template id='autocomplete'>
    <div>
    <input
                type="text"
                id="input-autocomplete"
                v-model="label"
                placeholder="Search label"
                @input="onChange"
                @keydown.delete.prevent.stop="onDelete"
                @focus="onFocus"
    />
    </div>
</template>

The js code creates a Vue app that handles all the rendering and manages state changes.

1 Like