Cannot type into a datetime-local input field

[matt-psaltis]

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

[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()

[Junaid-Aslam1]

@barryskal I tried your solution. It works fine in the way that I can see my intended date in the input field, however just clicking save after that always takes the older/default date. If only I make any changes to the date by up/down arrow MANUALLY then the date change is accepted. Do you know what might be causing it and how to resolve it.

[kuceb]

I'm looking into this as part of the #1241 cy.type() epic. I'll let you know if a fix for this is coming up in the next patch release

[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'));

[kuceb]

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

@DiederikvandenB you shouldn't need to do this since #2016, we now call the native value method, shown here https://github.com/cypress-io/cypress/blob/decaf-issue-311/packages/driver/src/cy/commands/actions/type.js#L322

[milkman4]

@bkucera Thank you so much for that!

[ghost]

@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'));

Thank you, it works!