[TextField + IconButton] TextField blink (focus > blur > focus...)

[youra-h]

Feature Request

When you press the button inside TextField, the TextField loses focus. But if this button performs an action with text (for example, show a password) and returns the TextField focus, then TextField blinks. Loses and gains focus. It would not be bad if you could manually control the change of the TextField state.

Proposed solution

MDCTextFieldIcon.prototype.owner = undefined;

MDCTextFieldIcon.prototype.click = function(func) {
    this.root.addEventListener('click', (event) => {
        func(this, this.owner, event)
    });
};

MDCTextFieldIcon.prototype.mousedown = function(func) {
    this.root.addEventListener('mousedown', (event) => {
        func(this, this.owner, event)
    });
};

MDCTextFieldIcon.prototype.mouseup = function(func) {
    this.root.addEventListener('mouseup', (event) => {
        func(this, this.owner, event)
    });
};

Object.defineProperty(MDCTextFieldIcon.prototype, "disableRenderBlur", {
    get: function() {
        return this.disableRenderBlur_;
    },
    set: function(value) {
        if (this.disableRenderBlur_ === false && value === true) {
            this.mousedown((icon, owner) => {
                owner.disableRenderDeactivateFocus();
            });
            this.mouseup((icon, owner) => {
                owner.enableRenderDeactivateFocus();
            });
        }
        this.disableRenderBlur_ = value;
    },
    enumerable: true,
    configurable: true
});

class MDCTextField {
disableRenderDeactivateFocus() {
        this.bufDeactivateFocus_ = this.foundation.deactivateFocus;
        this.foundation.deactivateFocus = () => {};
    }

    enableRenderDeactivateFocus() {
        if (this.bufDeactivateFocus_ !== null) {
            this.foundation.deactivateFocus = this.bufDeactivateFocus_;
            this.bufDeactivateFocus_ = null;
        }
    }
}

Alternatives considered

Additional context

[joyzhong]

Hi there, thanks for filing this feature request! Adding to our team backlog.