[7.0.0] material design field label error

[sebbio]

when text field contain listeners config, label return back to field with content, but it wrong

[sebbio]

Look at label in material theme:
{
xtype: 'textfield',
fieldLabel: 'Some field',
value: 'type text',
listeners : {
}
}

[Estadlbauer]

Look at label in material theme:
{
xtype: 'textfield',
fieldLabel: 'Some field',
value: 'type text',
listeners : {
}
}

See https://fiddle.sencha.com/#view/editor&fiddle/3248 with your problem

[fabricio.object]

You can just

[FIDDLE ]3248[/FIDDLE]

to embed your fiddle here.

[mjhaston]

Is there any fix for this bug?

[Estadlbauer]

No, but a workaround.You can add a listener to textfield or combobox in the init code of the view controller.

 init: function (view) {                var combo = view.down("#yourComboBox"); // works also for textfield                combo.addListener({                          change: function (combobox, newValue, oldValue, eOpts) {               // your code                          }                });     }

This prevent this strange behavior

[mjhaston]

That's awesome there is a workaround for such a basic and core piece of the new 7.0 major release.

[sentinelo]

Hi, the problem is here :

Ext.define('Ext.theme.material.form.field.Text', {    
    override: 'Ext.form.field.Text',
    labelSeparator: '',
    listeners: {
        change: function(field, value) {
            if (field.el) {
                field.el.toggleCls('not-empty', value || field.emptyText);
            }
        },
        render: function(ths, width, height, eOpts) {
            if ((ths.getValue() || ths.emptyText) && ths.el) {
                ths.el.addCls('not-empty');
            }
        }
    }
}); 

When you override the listeners config, change & render events are not fired, and the 'not-empty' cls is not added to field

Maybe something like :

Ext.define('Ext.theme.material.form.field.Text', {
  override : 'Ext.form.field.Text',
  labelSeparator : '',
  listeners:{},
  initComponent : function () {
    this.callParent();
    this.on({
      change : function (field, value) {
        if (field.el) {
            field.el.toggleCls('not-empty', value || field.emptyText);
        }
      },
      render : function (ths, width, height, eOpts) {
        if ((ths.getValue() || ths.emptyText) && ths.el) {
            ths.el.addCls('not-empty');
        }
      },
      scope : this
    });
  }
}); 

would work