.clear() seems not clearing when the cursor is in front of the text

Hi there! I’m not sure if this a bug or intended, please confirm it.

• Node Version: 8.11.1
• Protractor Version: 5.1.2
• Angular Version: 5.1.0
• Browser(s): Chrome
• Operating System and Version macOS 10.13.2

In my case, I have a html input element with its cursor in front of the text. I’m able to do sendKeys() with no problems, but clear() seems not clearing anything. If I do the same thing with other input elements whose cursors are in the end of their text, everything works fine. My code sample is something like this:

 this.zip = element(by.id('zip')).element(by.css('input'));
 await this.zip.clear();
 await this.zip.sendKeys(input);

this.zip is the input element with cursor in front of its text And I also notice if I do a click() before clear(). It does clear the text, but sendKeys(input) would put text back.

 await this.zip.click();
//browser.sleep(2000);
 await this.zip.clear();
//browser.sleep(2000);
 await this.zip.sendKeys(input);

so for example: if the original text in zip is 12345, and input is 6789, after the above execution, it would show 678912345. I put browser.sleep(2000) in between each method and I can see in the browser, it clear the zip field, and when it does sendKeys(input), it puts 6789 in, but for some reason, 12345 comes back. From what I understanding, the clear() function should clear the text regardless of the cursor position. Can someone explain the trick behind it?

EDIT: One thing I forgot to mention, the input element zip is a sub-element of p-inputmask, which is from PRIMENG. Here is what it looks like in Chrome.

<p-inputmask id="zip" mask="?99999-9999999999999" unmask="true" ng-reflect-disabled="false" ng-reflect-unmask="true" ng-reflect-mask="?99999-9999999999999" ng-reflect-is-disabled="false" class="ng-valid ui-inputwrapper-filled ng-touched ng-dirty" ng-reflect-model="928359283592835928">
    <input pinputtext type="text" class="ui-inputtext ui-corner-all ui-state-default ui-widget ui-state-filled">
</p-inputmask>

Thanks

[Tandy1234]

@awarecan I modified that a little bit and now it seems working.

    this.mask = element(by.id('zip));
    this.zip = element(by.id('zip')).element(by.css('input'));
    await this.mask.click();
    await this.zip.sendKeys(Key.SHIFT, Key.END, Key.BACK_SPACE);
    await this.zip.sendKeys(input);

Thanks you much

[awarecan]

Since you have a such powerful inputmask element on above your input, I would suggest you interactive with inputmask instead input.

this.zip = element(by.id('zip'));
await this.zip.click();
await this.zip.sendKeys(Key.SHIFT, Key.END, Key.BACK_SPACE);
await this.zip.sendKeys(input);