QUESTION: Pressing Backspace or Delete key in traits panel removes element from canvas

[keithstric]

I'm using grapesJS within a Polymer 3.x Element and everything is working beautifully, awesome project. However, I'm experiencing an issue:

When I select an element in the canvas, navigate to the traits panel, put my cursor in a trait field enter some text (or not) and then press the delete or backspace keys, it deletes the selected element from the canvas.

This happens in chrome for Mac OS and Windows (haven't tried other browsers yet).

My question: Is there a way to intercept the backspace/delete key in the traits manager or am I missing a configuration setting somewhere?

Here is my init:

const that = this;
this.editor = grapesjs.init({
    noticeOnUnload: false,
    container: this.$.gjs,
    fromElement: true,
    height: '594px',
    width: 'auto',
    storeManager: { type: null },
    layerManager: {
        appendTo: this.$.layersContainer
    },
    panels: {
        defaults: [{
            id: 'panel-top',
            el: this.$.panelTop,
        },{
            id: 'panel-switcher',
            el: this.$.panelSwitcher,
            buttons: [{
                id: 'show-blocks',
                label: 'Blocks',
                active: true,
                command: 'show-blocks',
                togglable: false
            },{
                id: 'show-style',
                label: 'Styles',
                command: 'show-styles',
                togglable: false
            },{
                id: 'show-traits',
                label: 'Traits',
                command: 'show-traits',
                togglable: false
            }]
        },{
            id: 'basic-actions',
            el: this.$.basicActions,
            buttons: [{
                id: 'visibility',
                active: true, // active by default
                className: 'btn-toggle-borders',
                label: '<u>B</u>',
                command: 'sw-visibility', // Built-in command
                title: 'Toggle container border visibility'
            },{
                id: 'export',
                className: 'btn-open-export',
                label: 'Exp',
                command: 'export-template',
                context: 'export-template', // For grouping context of buttons from the same panel
                title: 'Show HTML'
            },{
                id: 'save',
                active: false,
                className: 'btn-save',
                label: 'Save',
                title: 'Publish this HTML to the Card',
                command(editor: any) {
                    that.set('card.html', editor.getHtml());
                    that._patchCardHtml();
                }
            }]
        },{
            id: 'layers',
            el: this.$.panelRight
        }]
    },
    blockManager: {
        appendTo: this.$.blocksContainer
    },
    selectorManager: {
        appendTo: this.$.stylesContainer
    },
    styleManager: {
        appendTo: this.$.stylesContainer,
        sectors: [{
            name: 'General',
            open: false,
            buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
        },{
            name: 'Dimension',
            open: false,
            buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding']
        },{
            name: 'Typography',
            open: false,
            buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow']
        },{
            name: 'Decorations',
            open: false,
            buildProps: [
                'border-radius-c',
                'background-color',
                'border-radius',
                'border',
                'box-shadow',
                'background'
            ],
        },{
            name: 'Extra',
            open: false,
            buildProps: ['opacity', 'transition', 'perspective', 'transform'],
            properties: [{
                type: 'slider',
                property: 'opacity',
                defaults: 1,
                step: 0.01,
                max: 1,
                min: 0,
            }]
        }]
    },
    traitManager: {
        appendTo: this.$.traitsContainer,
    },
    storageManager: {type: null},
    plugins: [
        'gjs-blocks-basic',
        'dig-elements'
    ],
    pluginsOpts: {
        'gjs-blocks-basic': {
            blocks: ['column1', 'column2', 'column3', 'column3-7', 'text']
        },
        'dig-elements': {
            fields: that.card.fields,
            doc: that.doc
        }
    }
});

[artf]

Sounds like an old issue to me, are you using the latest version?

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.