Ionic 2 clearInput Attribute


#1

Is anyone having trouble with the clearInput Attribute? According to the docs the attribute is suppose to go on the ion-item tag which doesn’t seem to work. Although putting on the ion-input seems to works as far as that it appears, but all it seems to do is try and submit the forum. Is there something more I would have to do to use this feature properly? thanks you in advanced.


#2

I’m having the same problem - I specify the clearInput attribute on the ion-input element and a button appears but clicking on this button does not actually clear the input!


#3

Furthermore the usage specified in the source code is as follows:

<ion-item clearInput> <ion-input placeholder="Username"></ion-input> </ion-item>

look where they have put the attribution on the ion-item element!

Please shed some light on this ionic! And a workaround would be nice too - if there is one…


#5

Well I was poking around in the ionic code and it found out that clearTextInput() {} function in the input-base script file. I added a simple this._value = ‘’ and then it worked. Although the problem is that if you updated Ionic the change would be erased.


#7

I don’t if is a bug or just unfinished, because the function is already there. As far as it being fixed in a future release, think should put that in along with put a type=“button” on the button in the template. It would simple enough.


#8

Hi, can you put a little code? I don’t understand how turn it on.


#9

In the input-base.js file at line 340.

InputBase.prototype.clearTextInput = function () { void 0; this._value = ''; };

In input.js file at line 100.
core_1.Component({ selector: 'ion-input', template: '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' + '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' + '<button clear *ngIf="clearInput && value" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' + '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>', directives: [ common_1.NgIf, native_input_1.NextInput, native_input_1.NativeInput, button_1.Button ], encapsulation: core_1.ViewEncapsulation.None, }),


#10

Ah, so I need overwrite the bugged clearTextInput method. Thank you.


#11

This doesn’t work at beta7. Now it is moved to TextInput class which extend InputBase.

export declare class TextInput extends InputBase {
    constructor(config: Config, form: Form, item: Item, app: IonicApp, platform: Platform, elementRef: ElementRef, scrollView: Content, nav: NavController, ngControl: NgControl);
    /**
     * @private
     */
    inputBlurred(event: any): void;
    /**
     * @private
     */
    inputFocused(event: any): void;
    /**
     * @private
     */
    clearTextInput(): void;
}

Default implementation looks ok:

/**
     * @private
     */
    TextInput.prototype.clearTextInput = function () {
        void 0;
        this._value = '';
        this.onChange(this._value);
        this.writeValue(this._value);
    };

Here is commit where functionality has been added:

Anyone facing issue with this in beta7 ?


#12

I thin they built the fix into beta 7 because it is working just fr me without changing anything. So it should work be default, although the button doesn’t appear until the corresponding field has left focus.


#13

In my case all input fields are already pre-filled with values from model.
Even if I use empty input without any value, type something, change focus, return - doesn’t work :frowning: