clear(); method not working for React inputs

Question

Most of the application we are developing is made with Angular but we are slowly transitioning to rebuilding it in ReactJS. clear() still works perfectly on Angular inputs but does absolutely nothing on React inputs

I wrote a reusable function long ago:

const clearAndSendKeys = async (input, text) => {
    await input.clear();
    await input.sendKeys(text);
};

The above function works perfectly well on angular elements, but the clear() part does not have any effect on pages made with React.
I also tried not using the function and just go with

await input.clear();
await input.sendKeys(text);

doesn't work either.
I will paste one of the inputs and the method I'm using to locate it

<div widths="equal" class="required field">
    <label>
        "Address"
        ::after
    </label>
    <div class="ui input">
        <input name="address1" placeholder type="text" value="fake address">
    </div>
</div>

Locator:
const addressInput = element(by.name('address1'));

UPDATE
I could work around this by using the backspace key in a loop. It's not the ideal method but it works (the ideal method would be clear() to work

    this.clearInput = async (input) => {
        const inputValue = await input.getAttribute('value');
        const valueLength = await inputValue.length;
        for (let i = 0; i < valueLength; i++) {
            await input.sendKeys(protractor.Key.BACK_SPACE);
        };
    };

Does this answer your question? [Clear and reset form input fields](https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields) — Nuhman, Nov 12 '20 at 13:06

Sergey Pleshakov · Answer 1 · 2020-11-12T14:19:38.623

what if you try to reset the input

let reset = async $elem => 
    browser.executeScript('return arguments[0].reset()', $elem.getWebElement());

Let me know if doesn't work

P.S.

Okay... I know what you'll see below is ugly and stupid... but it did the work for me for for the last year in all 16 apps I test

sendKeys: async ($element, keyCode = '') => {
        let size = await $element.getSize();
        let clickCoordinates = {
            x: Math.round(size.width - 3),
            y: Math.round(size.height / 2),
        };

        let value = await $element.getAttribute('value');
        for (let i = 0; i < value.length; i++) {
            await $element.sendKeys(protractor.Key.BACK_SPACE);
        }
        await $element.clear();

        // see a pic below, for example of where I click
        await browser
            .actions()
            .mouseMove($element, clickCoordinates)
            .click()
            .perform();
        await $element.sendKeys('1');
        await $element.sendKeys(protractor.Key.BACK_SPACE);
        await $element.sendKeys(keyCode);
    },

If I try to execute that on the input I get `arguments[0].reset is not a function`. If I do it on the form as a whole it doesn't do anything — Joaquin Casco, Nov 12 '20 at 13:53
Updated with P.S. I didn't want to post it, but you made me lol — Sergey Pleshakov, Nov 12 '20 at 14:20
lol, I do have a similar method that uses `protractor.Key.BACK_SPACE` in a loop and it does work, I just don't get why `.clear()` won't work on these inputs — Joaquin Casco, Nov 12 '20 at 15:43

score 0 · Accepted Answer · answered Nov 12 '20 at 19:41

0

I could work around this by using the backspace key in a loop. It's not the ideal method but it works (the ideal method would be clear() to work

this.clearInput = async (input) => {
    const inputValue = await input.getAttribute('value');
    const valueLength = await inputValue.length;
    for (let i = 0; i < valueLength; i++) {
        await input.sendKeys(protractor.Key.BACK_SPACE);
    };
};

This is not the best solution but it does the job for now. Although I would love to know why the clear() method does not work in these react input components

answered Nov 12 '20 at 19:41

Joaquin Casco

704
5
14

Oh weird. I have no idea why this is not working. Some more info (in possibly figuring out why this is happening), Protractor element finder uses the direct implementation of `clear` from selenium-webdriver. The list of selenium-webdriver methods is https://github.com/angular/protractor/blob/master/lib/element.ts#L16-L20. The clear method applies input and textarea elements https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/webdriver.js#L2385-L2395. – cnishina Nov 26 '20 at 21:15

clear(); method not working for React inputs

2 Answers2