Cannot type into a datetime-local input field

Current behavior:

The input field doesn’t update with a value when you type in text

Desired behavior:

The value should appear in the input

How to reproduce:

Test code:

Typescript:

cy.get("input[type='datetime-local']").type("1");

Additional Info (images, stack traces, etc)

I can see from the log it correctly “yields” the input element. It just doesn’t visually display anything in the input box (when the type command executes).

• Operating System: Win 10
• Cypress Version: 2.0.3
• Browser Version: Chrome 64

[DiederikvandenB]

@cypressProj I am going to make a wild guess here, and assume you use ReactJS. I had the same issue you described. I figured that this was caused by React, because we are using React controlled inputs.

This Stackoverflow answer pointed me in the right direction: https://stackoverflow.com/a/46012210/1221091

My code:

support/setDate.js

export default (input, value) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  nativeInputValueSetter.call(input, value);

  const event = new Event('input', { bubbles: true });
  input.dispatchEvent(event);
};

And then I use it like this:

import setDate from 'support/setDate';

cy.get('@key_dropoff_at')
      .then(input => setDate(input[0], '2018-12-12T00:00'));

[barryskal]

This was pretty frustrating to fix, but I managed to come up with the following work around that played nicely with redux form.

        cy
          .get('#dateField')
          .click()
          .then(input => {
            input[0].dispatchEvent(new Event('input', { bubbles: true }))
            input.val('2017-04-30T13:00')
          })
          .click()