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

[Tandy1234]

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

[awarecan]

Do you have placeholder or value attribute set for the input? The ClearElement WebDriver command will reset input value and dirty flag, so that the input text may back to its default value or placeholder. I will say neither protracotor nor selenium-webdriver has control over that, it depends on the browser driver implementation.

See here for more detail: https://w3c.github.io/webdriver/webdriver-spec.html#dfn-clear-algorithm

[Tandy1234]

@awarecan I updated my post. I don't have neither placeholder nor value. But I am not sure if the mask from PRIMENG has any effects on this issue.
And I also read some older issues about Angular model updating. #301 (comment)
#4156
Would that related?

[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);

[Tandy1234]

Does protractor allow elements other than input to do sendKeys()?
From https://www.protractortest.org/#/api?view=webdriver.WebElement.prototype.clear

Schedules a command to clear the value of this element. This command has no effect if the underlying DOM element is neither a text INPUT element nor a TEXTAREA element.

I tried it and it gives me error:
Failed: unknown error: cannot focus element

[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

[evanjmg]

The backspace doesn't work all the time; it definitely helps, but some of the inputs still fail.

[rgurgul]

This work for me:

    const priceInput = element(By.css('input[type=number]'));
    await priceInput.sendKeys(Key.SHIFT, Key.END, Key.BACK_SPACE);
    await priceInput.clear();
    await priceInput.sendKeys(123);

[prakhar-ap]

@rgurgul
The
await priceInput.sendKeys(Key.SHIFT, Key.END, Key.BACK_SPACE);
should be looped through the length of the input(priceInput) value.
input.clear() do not work or of no use.