react issue - cannot fill react input field

[medv...@gmail.com]

hi,

I have following input field which I would like to fill:

Chrome's react dev tooll shows this field like this:

I tried to click this input field first then fill it, but I always get

org.openqa.selenium.InvalidElementStateException: invalid element state: Element is not currently interactable and may not be manipulated

I tried to click it with perform

   WebElement element = driver.findElement(By.cssSelector('div.rt-tr > .email-cell[tabIndex="-1"] > input'));
   new Actions(driver).moveToElement(element).perform();

but no help.

I try to fill it 

mailFilterInputField.value("customer_temporary")

on the Page (mailFilterInputField{$('div.rt-tr > .email-cell[tabIndex="-1"] > input')})

but the object not accessable.

could please someone help me?

thank you in advance,

Roland

[Martin de laat]

Haven't fully read your message. Sorry.

But if you wish to click it, why not

$("your_selector").click()

Regardless, your statement just moves the mouse there without clicking it, try: 

moveToElement(element).click().perform()

[medv...@gmail.com]

I always get 

org.openqa.selenium.InvalidElementStateException: invalid element state: Element is not currently interactable and may not be manipulated

when I want to fill the input field.

assert($('div.rt-table > div.rt-thead.-filters > div.rt-tr').displayed)

is true, but 

$('div.rt-table > div.rt-thead.-filters > div.rt-tr > div[class="rt-th email-cell"] > input')

is simply not displayed and I get the error message above.

HTML code:

same element using React Dev Tool:

any idea or hint how I could fill this input field?

[Trinidad Esparza]

Silly question but the fields look gray which in many cases this means that this fields are disabled, can you type text manually ? if so I would try something like this.. 

waitFor {

$('div.email-cell > input').displayed 

$('div.email-cell > input') << "yourEmailAddress"

} 

 

good luck

[Martin de laat]

Sorry no experience with react, but:

It looks like the field is disabled. What does the user do to enable it? Click on it? Then do so in your tests. 
I'd argue that your objective is not to fill the field in your test, your objective is to mimic the user's behaviour, and that will solve your problem as well I reckon.