Blur and Focus Events No Longer Fire for Text Fields

[amber-cd]

Blur event binding which previously worked is no longer working

I've been working on upgrading our Blockly implementation to the newest version, past the formalization of the custom fields API, but I'm running into an issue. In our previous implementation, we were using "blur" events in order to trigger some actions when a field lost focus. (I was doing this more or less as a workaround for this old issue, as we need to run some computation-intensive updates when the value change for a field is "committed." Now, however, the event no longer appears to fire, nor does "focus." I know I'm binding it correctly because a dummy mousedown event fires off correctly.

To Reproduce

1. Create a custom Field which extends FieldTextInput
2. Add the following to bindEvents_:

Blockly.CustomField.prototype.bindEvents_ = function() {
  Blockly.CustomField.superClass_.bindEvents_.call(this);
  this.onBlurWrapper_ =
    Blockly.bindEvent_(this.getClickTarget_(), 'blur', this, function(){
      console.log('Calling on blur');
    });
  this.onFocusWrapper =
    Blockly.bindEvent_(this.getClickTarget_(), 'focus', this, function(){
      console.log('Calling on focus');
    });
  this.onMDWrapper =
    Blockly.bindEvent_(this.getClickTarget_(), 'mousedown', this, function(){
      console.log('Calling mousedown');
    });
};

3. Load the field on a block and then click in and out.

(Note: this replicates using both bindEvent_ and bindEventWithChecks_.)

Expected behavior
I would expect to see "Calling on focus" logged to the console when the field is focused and "Calling on blur" when the field loses focus.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chrome
• Version 85.0.4183.83 (Official Build) (64-bit)

Additional context

This worked before the upgrade. We ran into some other issues involving the select element being hidden until we changed its z-index, so I suspect there was some "under the hood" change made to how text fields were implemented which is interfering with these events. This is, again, basically a workaround in order to fire off functionality only when a change is committed vs, as the user is typing, so if there is some alternate way to do that which I have missed in my reading, please do let me know that.

Thanks!

[amber-cd]

I was able to find a workaround via adding the following to my field definition:

/**
 * Create and show a text input editor that sits directly over the text input.
 * We override the original in order to bind events. This was copied
 * from the original and if field_textinput.js is updated, we should see what it does
 * and update this to match accordingly.
 *
 * @param {boolean} quietInput True if editor should be created without
 *     focus.
 * @private
 */
Blockly.CustomField.prototype.showInlineEditor_ = function(quietInput) {
  Blockly.WidgetDiv.show(
      this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this));
  this.htmlInput_ = this.widgetCreate_();
  this.isBeingEdited_ = true;

  this.onBlurWrapper_ =
    Blockly.bindEvent_(this.htmlInput_, 'blur', this, function(){
      console.log('Calling on blur');
      Blockly.unbindEvent_(this.onBlurWrapper_);
    });

  if (!quietInput) {
    this.htmlInput_.focus({preventScroll:true});
    this.htmlInput_.select();
  }
};

It would be nice to offer some way to bind events directly to the htmlInput for scenarios like this. Not sure if that counts as more of a feature request than a bug, so please recategorize appropriately. Thanks again!

[BeksOmega]

This is, again, basically a workaround in order to fire off functionality only when a change is committed vs, as the user is typing, so if there is some alternate way to do that which I have missed in my reading, please do let me know that.

There may actually be an alternative! I'm not sure if it works for your use case though.

For text input fields (and fields that inherit from them) specifically you can override/define the onFinishEditing_ function. This will get called with the new value of the field whenever the htmlInput gets disposed.

Currently this is a bit of a hack, but there are details about turning this into a better API here. That being said, it is a very stable hack because it is used by the procedure mutator blocks.

Do you think that could work for your scenario?

[amber-cd]

That actually looks like it might work! I'll dig into it tomorrow to see if it's more stable than my current solution, which, while functional, heavily uses an unofficial API which seems likely to change. Thanks!

EDIT: I took a quick look and it looks like my main problem is that the code I'm looking at running uses both the value from before editing and the new value after editing. (Basically, it's a "rename everything which matches this" function.) I can probably work around that using an onFocus listener to set the original value or something similar, though.

[gonfunko]

Note that, nowadays, the instance variable valueWhenEditorWasOpened_ would have the old value in onFinishEditing_, and is available to subclasses. Closing this since the API has changed quite a bit since this was filed and the underlying goal should be achievable.