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

Wrong value of isValid() when using DE #1895

Closed
TomekStaszkiewicz opened this issue Jun 15, 2020 · 3 comments · Fixed by dmtrKovalenko/date-io#406
Closed

Wrong value of isValid() when using DE #1895

TomekStaszkiewicz opened this issue Jun 15, 2020 · 3 comments · Fixed by dmtrKovalenko/date-io#406
Labels
bug 🐛 Something isn't working component: DatePicker good first issue Great for newcomers

Comments

@TomekStaszkiewicz
Copy link

Environment

Tech Version
@material-ui/pickers 4.0.0-alpha.8
material-ui 4.10.2
TypeScript
React 16.12.0
Browser
Peer library

Steps to reproduce

Open code sandbox link: https://codesandbox.io/s/billowing-snowflake-gfgts?file=/package.json

  1. Use English, then edit it using input(NOT THE POPOVER)
    Screenshot from 2020-06-15 11-46-03

  2. When it's an invalid date, the textfield is shown as red
    Screenshot from 2020-06-15 11-46-14
    if you change it back to correct date it turns green.
    Screenshot from 2020-06-15 11-46-21

  3. Change to de and do the same things

Screenshot from 2020-06-15 11-46-29

  1. When it's an invalid date, it's red (as expected).
    Screenshot from 2020-06-15 11-46-36
    But when it's valid again, it remains red.
    If you check the console, you will see that the isValid() returns false for the correct date.

Screenshot from 2020-06-15 11-46-45

Expected behavior

isValid() returning true for correct date

Actual behavior

What is important is that this bug occurs only when changing the date by typing in the date. It does not occur when you change the date by clicking on the popover.

@oliviertassinari
Copy link
Member

@TomekStaszkiewicz Thanks for the detailed reproduction. Did you have a chance to look at why it behaves wrongly like this?

@oliviertassinari oliviertassinari added the good first issue Great for newcomers label Jun 15, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 15, 2020

I have simplified the reproduction down to:

import "dayjs/locale/de";
import dayjs from "dayjs";
import * as React from "react";
import DayJsAdapter from "@material-ui/pickers/adapter/dayjs";

const util = new DayJsAdapter({ locale: "de" });
console.log("1", util.parse("Januar 2020", "MMMM YYYY")); // KO
console.log("2", dayjs("Januar 2020", "MMMM YYYY", "de")); // OK
console.log("3", dayjs("Januar 2020", "MMMM YYYY")); // KO

export default function App() {
  return <div />;
}

https://codesandbox.io/s/dreamy-goldstine-xty48?file=/src/App.jsx

The problem is in https://github.com/dmtrKovalenko/date-io/blob/400e9f60f0990995c374978b3be4867aecea539c/packages/dayjs/src/dayjs-utils.ts#L105

We should be doing:

  public parse(value: any, format: any) {
    if (value === "") {
      return null;
    }

-   return this.dayjs(value, format);
+   return this.dayjs(value, format, this.locale);
  }

@TomekStaszkiewicz Do you want to work on a pull request :)?

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 1, 2020

Could it be worth adding a test case for? It seems that we should.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something isn't working component: DatePicker good first issue Great for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants