title: Unable to validate Klarna Payment, Value typed for Date Of Birth is not retained on checkout (Selenium, Chrome Driver)
body: <p>Update::
  I tried using sendKeys() I get some weird 5 or 66 alone being typed inside the text box. Attached image.</p>
  <p>sendKeys(&quot;Feb 11 2001 (Central European Summer Time)&quot;);
  sendKeys(&quot;2001-02-23&quot;)</p>
  <p><a href="https://i.stack.imgur.com/WXDmC.png" rel="nofollow noreferrer">Screenshot of text box with 66.* value on sendkeys(&quot;2011-02-23&quot;)</a></p>
  <p>The date of birth input element (as shown in the attached images) is being filled properly. However, on moving to the next control the value of the DOB field, is either hidden or masked. Then on click of the continue button the validation error throws. I have attached screenshots of these three steps from the screen recording. Below is the selenium method where I am trying to access the control inside the iframe. Any help in this regard would be appreciated.</p>
  <pre><code>public void confirmsPaymentWithKlarnaInvoice(){
  
          klarnaInstantBuyButton.waitUntilEnabled().click();
          switchToIFrame();
          WebDriver driver = getDriver();
          WebElement selectElem = driver.findElement(By.id(&quot;invoice_kp-purchase-approval-form-user-title&quot;));
          WebElement selectOpt = selectElem.findElements(By.tagName(&quot;option&quot;)).get(1);
          selectElem.click();
          selectOpt.click();
  
          if(driver instanceof JavascriptExecutor) {
            ((JavascriptExecutor)driver).executeScript(&quot;arguments[0].value='23.01.2012'&quot;, klarnaInvoiceDOB);
          }
          klarnaInvoiceKpContinueButton.click();
          klarnaInstantCheckoutSuccess.shouldBeVisible();
      }
  
  
        @FindBy(id=&quot;invoice_kp-purchase-approval-form-date-of-birth&quot;)
          private WebElementFacade klarnaInvoiceDOB;
  </code></pre>
  <p>The input element inside the inframe is as follows,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="invoice_kp-purchase-approval-form-date-of-birth" name="dateOfBirth" type="tel" mask="DD.DD.DDDD" placeholder="" maxlength="10" size="10" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; box-shadow: none; caret-color: rgb(72, 123, 148); color: rgb(23, 23, 23); -webkit-text-fill-color: rgb(23, 23, 23); opacity: 1; font-family: &amp;quot;Klarna Text&amp;quot;, &amp;quot;Klarna Sans&amp;quot;, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; height: 60px; overflow: hidden; padding-left: 0px; padding-top: 18px; position: absolute; text-overflow: ellipsis; top: 0px; margin-left: -1px; margin-top: 2px; white-space: nowrap; width: 100%; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision;"/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/7v76X.png" rel="nofollow noreferrer">Screenshot of the control with value </a></p>
  <p><a href="https://i.stack.imgur.com/tNJln.png" rel="nofollow noreferrer">Text box value hidden when it moves to next control</a></p>
  <p><a href="https://i.stack.imgur.com/inBNq.png" rel="nofollow noreferrer">Validation error thrown on button click</a></p>
  <p>P.S: Even If I try to type into the input box after the dropdown, its the same. I have the same validation error.</p>