Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot type into a datetime-local input field #1366

Closed
matt-psaltis opened this issue Feb 23, 2018 · 7 comments · Fixed by #2016
Closed

Cannot type into a datetime-local input field #1366

matt-psaltis opened this issue Feb 23, 2018 · 7 comments · Fixed by #2016
Assignees
Labels
pkg/driver This is due to an issue in the packages/driver directory
Milestone

Comments

@matt-psaltis
Copy link

matt-psaltis commented Feb 23, 2018

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
@jennifer-shehane jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory stage: needs investigating Someone from Cypress needs to look at this labels Feb 23, 2018
@barryskal
Copy link

barryskal commented Apr 29, 2018

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
Copy link

@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
Copy link
Contributor

kuceb commented Jun 29, 2018

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

@kuceb kuceb self-assigned this Jun 29, 2018
@jennifer-shehane jennifer-shehane added stage: investigating Someone from Cypress is looking into this and removed stage: needs investigating Someone from Cypress needs to look at this labels Jun 29, 2018
@jennifer-shehane jennifer-shehane added this to the 3.0.3 milestone Jun 29, 2018
@kuceb kuceb removed the stage: investigating Someone from Cypress is looking into this label Jul 16, 2018
brian-mann pushed a commit that referenced this issue Jul 23, 2018
this grew to a large PR fixing many cy.type issues.

fix #365
fix #420
fix #586 
fix #593 
fix #596 
fix #610 
fix #651
fix #940
fix #1002 
fix #1108
fix #1171
fix #1209 
fix #1234 
fix #1366
fix #1381 
fix #1684 
fix #1686
fix #1926 
fix #2056
fix #2096 
fix #2110 
fix #2173
fix #2187
@jennifer-shehane jennifer-shehane added stage: pending release and removed stage: needs review The PR code is done & tested, needs review stage: needs investigating Someone from Cypress needs to look at this stage: in progress labels Jul 23, 2018
@DiederikvandenB
Copy link

DiederikvandenB commented Nov 12, 2018

@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
Copy link
Contributor

kuceb commented Nov 14, 2018

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
Copy link

@bkucera Thank you so much for that!

@ghost
Copy link

ghost commented May 6, 2019

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg/driver This is due to an issue in the packages/driver directory
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants