[🐛 Bug]: clear() method not clearing input on react component

[mrpet88]

What happened?

It seems that clear() method is not working properly with latest version of selenium, in React components. Since I can not provide much details from my company's project, I created a repository, where the issue is reproducible.

Steps:

1. Navigate to a page that has a react input component
2. clear() the input and sendKeys()

Result:
Characters are being send next to the previous input.

More Info:

• I don't need a workaround such as Js executor etc, I just need to know if this can be fixed from selenium side, or not.
• I am able to reproduce with selenium 3 as well
• I am not able to reproduce it to an input that is not react component
• Using serenity-BDD (older version - which is using selenium 3.x.x) seems to also resolve the issue

Image:

• 
• 

How can we reproduce the issue?

Here is a link of the repository, where the issue can be reproduced.

https://github.com/mrpet88/check-sendkeys-issue

Relevant log output

N/A

Operating System

macOS

Selenium version

selenium-java-4.8.0

What are the browser(s) and version(s) where you see this issue?

Chrome 110.0.5481.77

What are the browser driver(s) and version(s) where you see this issue?

N/A

Are you using Selenium Grid?

N/A

[github-actions]

@mrpet88, thank you for creating this issue. We will troubleshoot it as soon as we can.

---

Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

[aahmed-dfe]

Looks like issue is you've cached IWebElement in a variable rather than locating it again - after you've sent keys to it.

Try finding it again through Driver.FindElement

Some pseudo code below....

Func<IWebElement> getElement = () => driver.FindElement(By.name("email")); 
if(!getElement().getAttribute("value").isEmpty()){
  getElement().Clear();
}
getElement().SendKeys("Selenium");

Could also be that you're not locating the right element - that takes input

[mrpet88]

Looks like issue is you've cached IWebElement in a variable rather than locating it again - after you've sent keys to it.

Try finding it again through Driver.FindElement

Some pseudo code below....

Func<IWebElement> getElement = () => driver.FindElement(By.name("email")); 
if(!getElement().getAttribute("value").isEmpty()){
  getElement().Clear();
}
getElement().SendKeys("Selenium");

Could also be that you're not locating the right element - that takes input

If you mean something like this:

         Supplier<WebElement> getElement = () -> driver.findElement(By.name("email"));
            if (!getElement.get().getAttribute("value").isEmpty()) {
              getElement.get().clear();
            }
            getElement.get().sendKeys("Selenium");
        }```

Still same issue.
If the locator was wrong wouldn't that mean that I wouldn't be able to type into it?

[aahmed-dfe]

Thanks for the follow up - Dug into the example;

In the screenshot the clear() doesn't work because Email is required it looks like it has minimum field length set on the DOM and there's an email error that appears when you try to clear the input...

There's also the autocomplete attribute on there - which has some references here as being problematic --- https://stackoverflow.com/questions/50677760/selenium-clear-command-doesnt-clear-the-element

There's ways around this using javascript when needed; https://stackoverflow.com/questions/17237772/html-how-to-clear-input-using-javascript

setting element.value = "" or adding a placeholder attribute

Working example below;
Driver.ExecuteJavaScript("arguments[0].value = ''", element);

Hope this solves!

Keen to hear if there's better solutions :)

[titusfortner]

We recently made a change to the atom for this — #11504 which I think will address this issue?
But it hasn't yet been implemented in chromedriver, yet.

@diemol did we reach out to Google about this?

[diemol]

Using serenity-BDD (older version - which is using selenium 3.x.x) seems to also resolve the issue

@mrpet88 I did not understand this part. If you use Serenity-BDD works? But above you mentioned it did not work with Selenium 3.

[mrpet88]

Using serenity-BDD (older version - which is using selenium 3.x.x) seems to also resolve the issue

@mrpet88 I did not understand this part. If you use Serenity-BDD works? But above you mentioned it did not work with Selenium 3.

Yes, so I found out, that it was working with Serenity BDD because Serenity was using for clear() input Keyboard commands. Which is not the case with the newest versions of Serenity.
Ofc I found this out, after reporting this issue here. So you can ignore this comment.

[diemol]

@titusfortner no, I did not, I forgot, sorry. Anyway, I just shared the information with them

• https://bugs.chromium.org/p/chromedriver/issues/detail?id=4388
• clear() was updated in the atoms, please update them in GeckoDriver mozilla/geckodriver#2094
• clear() was updated in the atoms, please update them in MDEdgeDriver MicrosoftEdge/EdgeWebDriver#73
• https://bugs.webkit.org/show_bug.cgi?id=253704

[diemol]

@mrpet88 Thank you for providing your repository to triage this.

I was able to reproduce it for Chrome, Edge, and Safari. But it works in Firefox. This shows that Selenium is sending the command and something in the browser is not doing the right thing when it comes to a React component. Maybe updating the atoms over there will help, but I recommend reporting this issue to those browsers. I will leave some links below where you can report it.

[github-actions]

Hi, @mrpet88.
This issue has been determined to require fixes in ChromeDriver.

You can see if the feature is passing in the Web Platform Tests.

If it is something new, please create an issue with the ChromeDriver team.
Feel free to comment the issues that you raise back in this issue. Thank you.

[github-actions]

Hi, @mrpet88.
This issue has been determined to require fixes in SafariDriver.

You can see if the feature is passing in the Web Platform Tests.

If it is something new, please create an Issue with the Safari team.

Feel free to comment the issues that you raise back in this issue. Thank you.

[github-actions]

Hi, @mrpet88.
This issue has been determined to require fixes in MSEdgeDriver
or in the IE Mode in Edge.

You can see if the feature is passing in the Web Platform Tests.

If it is something new, please create an Issue with the MSEdgeDriver team.

Feel free to comment the issues that you raise back in this issue. Thank you.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.