Q: How do you want text input validation to look?

[BeksOmega]

Problem statement

I'm trying to move the fields over to the new validation discussed here but the FieldInput is giving me trouble because of this:

if (newValue !== null) { // No change if null.
    if (this.sourceBlock_) {
      var validated = this.callValidator(newValue);
      // If the new value is invalid, validation returns null.
      // In this case we still want to display the illegal result.
      if (validated !== null) {
        newValue = validated;
      }
    }
    Blockly.Field.prototype.setValue.call(this, newValue);
  }

I'm a bit unsure of what illegal results we want to display, where, and also when the input div should turn red.

Here's an example of a validator that always returns null:

This makes sense, the value is invalid so it turns red, but it still keeps expanding the htmlInput so you can see what you're typing.

Here's an example of a validator that removes any a's:

As you can see it does neither of the above things.

I'm not sure if it should:
A) Remain white, but remove the a's from the htmlInput as well as the field (i.e. even if you typed an 'a' it wouldn't appear on screen).
B) Turn red, and leave the a's in both the htmlInput and the field until the user stops editting (replicating how the null validator works).

Or maybe you want both of them to work completely differently! I'm open to anything since I'm tearing out all of the validation stuff anyway.

Steps to Reproduce

1. Define the following blocks in the test_blocks file:

Blockly.Blocks['test_text_null_validator'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("null validator")
        .appendField(new Blockly.FieldTextInput("default", this.validate), "NAME");
    this.setColour(230);
  },
  validate: function(newValue) {
    return null;
  }
};

Blockly.Blocks['test_text_A_validator'] = {
  init: function() {
    this.appendDummyInput()
      .appendField("\'a\' validator")
      .appendField(new Blockly.FieldTextInput("default", this.validate), "NAME");
    this.setColour(230);
  },
  validate: function(newValue) {
    return newValue.replace(/\a/g, '');
  }
};

2. Add a new subcategory to the fields test category in the playground:

<category name="Text">
  <block type="test_text_null_validator"></block>
  <block type="test_text_A_validator"></block>
</category>

3. Drag the blocks out of the flyout and type into their inputs.

[RoboErikG]

I think they're two separate use cases, so the different color behavior makes sense to me. It does look like a bug that the text field doesn't expand in the second case. I guess it's measuring the validated text instead of the displaying text?

Another example of the 2nd case is the number input when it has a precision. It's still valid to type numbers with more precision, but they will get truncated by the validator.