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

Type into datetime-local input: seconds not accepted #22884

Closed
Zarmakuizz opened this issue Jul 21, 2022 · 3 comments · Fixed by #22901
Closed

Type into datetime-local input: seconds not accepted #22884

Zarmakuizz opened this issue Jul 21, 2022 · 3 comments · Fixed by #22901
Assignees

Comments

@Zarmakuizz
Copy link

Current behavior

When typing into an input datetime-local field, the only datetime format tolerated by Cypress doesn't accept seconds. 2022-03-04T10:11 is accepted (yyyy-MM-ddThh:mm) but 2022-03-04T10:11:12 is declined.

Although the Cypress type page doesn't give any format for datetime-local, some Cypress runner warnings say that yyyy-MM-ddThh:mm is supported with optional :ss or :ss.SSS suffixes, which isn't the case.

In the example code, Cypress throws the following if we want to type a DateTime with seconds:

Typing into a datetime input with cy.type() requires a valid datetime with the format YYYY-MM-DDThh:mm, for example 2017-06-01T08:30. You passed: 2022-03-03T10:11:12

Desired behavior

When typing a datetime, Datetime formats should accept seconds.

Test code to reproduce

context('Datetime-Local picker', () => {
  it('insert a date with seconds', () => {
    cy.visit(
      'https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_datetime-local',
    );

    cy.get('#iframeResult', { timeout: 10000 })
      .its('0.contentDocument')
      .should('exist')
      .its('body')
      .should('not.be.undefined')
      .then((body) => {
        cy.wrap(body)
          .find('#birthdaytime')
          // Ensure that the DateTime input lets the user choose seconds
          .invoke('attr', 'value', '2022-01-02T01:02:03');
      });

    cy.get('#iframeResult', { timeout: 10000 })
      .its('0.contentDocument')
      .should('exist')
      .its('body')
      .should('not.be.undefined')
      .then((body) => {
        cy.wrap(body).find('#birthdaytime').clear().type('2022-03-03T10:11:12');
      });
  });
});

Cypress Version

9.7.0

Other

I did not try on Cypress 10.x.x because our company did not migrate to it yet.

The real project uses React and more dependencies, as such I cannot set the input field's value using invoke.

@cypress-bot cypress-bot bot added the stage: investigating Someone from Cypress is looking into this label Jul 21, 2022
@marktnoonan
Copy link
Contributor

Thanks for this report @Zarmakuizz. It appears our regex to validate the allowed value for this type of input is too restrictive. Should have a PR up for this shortly.

@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: routed to ct and removed stage: investigating Someone from Cypress is looking into this stage: needs review The PR code is done & tested, needs review stage: routed to ct labels Jul 22, 2022
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jul 25, 2022

The code for this is done in cypress-io/cypress#22901, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Aug 2, 2022

Released in 10.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.4.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Aug 2, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants