How to SendKeys to a div element with coleditable="true" using Selenium and C#

Question

There is an element I can't figure out how to type text into it.

<div class="floatstart gridcell grideditablefield" colname="Items" coltype="string" coleditable="true" val="" style="width: 107px; overflow: hidden; cursor: text; height: 100%;">&nbsp;</div>

Without code (manually) in order to put text in it I need to click on it twice, so in the code If I click on the element once, the class seems to change to:

<div class="floatstart gridcell grideditablefield activecell"...>&nbsp;</div> 

And when I click on the element again it changes once more to

<div class="floatstart gridcell grideditablefield activecell NDColEditableInEdit"...>&nbsp;</div>

Anyway, once I try to send keys to it I get an Error:

OpenQA.Selenium.ElementNotVisibleException: 'element not interactable
  (Session info: chrome=//doesn't matter)
  (Driver info: chromedriver=//doesn't matter (6a5d10861ce8de5fce22564658033b43cb7de047-refs/branch-heads/4896@{#875}),platform=Windows NT 10.0.19042 x86_64)'

Code:

// It does find the right element
var element = driverReUse.FindElementByXPath("//*[@id='CalcOfAmmountsData']/div/div[2]/div/div[1]/div[2]");
element.Click();
element.Click();
element.SendKeys("keys");

Please help

Answer 1

Try the below,

Actions act = new Actions(driver);
 act.moveToElement(driver.findElement(By.xpath("//[@id='CalcOfAmmountsData']/div/div[2]/div/div[1]/div[2]"))).doubleClick().build().perform();

act.sendKeys('Keys');

Please make the changed if any required for c# , in above.

Hope this answer your question.

Answer 2

Generally <div> tags are not interactable unless it contains the attribute contenteditable="true" .

---

Deep Dive

As you mentioned, initially the <div> element is:

<div class="floatstart gridcell grideditablefield" colname="Items" coltype="string" coleditable="true" ...>&nbsp;</div>

After first click:

<div class="floatstart gridcell grideditablefield activecell" colname="Items" coltype="string" coleditable="true" ...>&nbsp;</div>

After second click:

<div class="floatstart gridcell grideditablefield activecell NDColEditableInEdit" colname="Items" coltype="string" coleditable="true" ...>&nbsp;</div>

As per this and this discussion either after the first or second click an <input> / <textarea> gets added, where you need to send the character sequence as follows:

// It does find the right element
var element = driverReUse.FindElementByXPath("//*[@id='CalcOfAmmountsData']/div/div[2]/div/div[1]/div[2]");
element.Click();
element.Click();
var input = driverReUse.FindElementByXPath("xpath_input_textarea");
input.SendKeys("keys");