Backspace not working for input fields

[Chetna Bulbul]

I am using blockly in my project. There are other modules and components in my project where blockly is not being used. Blockly is there in only one component. However, after loading the component which is using blockly, backspace and delete key in all the input box(where type is given as empty string) stops working across the application.

I found this issue #4157.
As suggested in the mentioned thread, I tried to overwrite the Blockly.utils.isTargetInput like this -
const isTargetInput = Blockly.utils.isTargetInput;
Object.defineProperty(Blockly.utils, 'isInputTarget', {
value: (e) => {
if (e.target.tagName === 'MD-TEXT-INPUT' || e.target.tagName === 'MD-SEARCH-FIELD') {
return true;
}

return isTargetInput;

},
});

This did not help.

Then I tried below code
const isTargetInput = Blockly.utils.isTargetInput;
Object.defineProperty(Blockly.utils, 'isTargetInput', {
value: (e) => {
if (e.target.tagName === 'MD-TEXT-INPUT' || e.target.tagName === 'MD-SEARCH-FIELD') {
return true;
}

return isTargetInput;

},
});

This fixed the backspace issue but the blockly functionality is getting disturbed, toolbox and workspace is visible but blocks are not draggable. If we click on toolbox, we can see the blocks but we are not able to drag the block to workspace. There is no error in console.

If we specify the input type in input fields( for eg , backspace is working fine for that input. But this fix we can not do in all the components due to some adverse effects,

Can some one suggest any fix which can be applied to the component which is using blockly so that this backspace issue doesn't happen in any other components/modules of the application.

[Christopher Allen]

Hi Chetna,

Then I tried below code
const isTargetInput = Blockly.utils.isTargetInput;
Object.defineProperty(Blockly.utils, 'isTargetInput', {
value: (e) => {
if (e.target.tagName === 'MD-TEXT-INPUT' || e.target.tagName === 'MD-SEARCH-FIELD') {
return true;
}

return isTargetInput;

},
});

This fixed the backspace issue but the blockly functionality is getting disturbed, toolbox and workspace is visible but blocks are not draggable. If we click on toolbox, we can see the blocks but we are not able to drag the block to workspace. There is no error in console.

Since we migrated Blockly from goog.provide to goog.module (and subsequently to TypeScript modules) it is no longer possible to monkey-patch Blockly in this way (at least: not reliably).  Moreover, the isTargetInput function is no longer on Blockly.utils, so I'm not even sure how your attempt to monkey patch it could have made any difference at all.  What version of Blockly are you using?

If isTargetInput is the cause of your woes (which seems plausible, but I'm not a browser/DOM expert) then the solution will be to ensure that any custom elements that are inputs will pass one of the tests in Blockly.browserEvents.isTargetInput—such as ensuring it has a (truthy) .isContentEditable property or has the data-is-text-input attribute set to true.

I will mention this issue to my colleagues to see if they have any additional advice.

Christopher

[Chetna Bulbul]

Hi Christopher,

We are using version 3.
Will updating the version fix the issue?

[Chetna Bulbul]

Thanks Chris. After upgrading to version 9.3.0, the issue is resolved. 

[Christopher Allen]

We are using version 3.

Yes, that's quite old now—but it would explain why the fix that you tried was partially effective.

 

Will updating the version fix the issue?

I'm glad you tried it and discovered that it does!