aboveyunhai / chakra-dayzed-datepicker

Chakra UI + Dayzed = datepicker
https://aboveyunhai.github.io/chakra-dayzed-datepicker/
MIT License
223 stars 46 forks source link

Duplicated Keys #13

Closed david-morris closed 2 years ago

david-morris commented 2 years ago

I'm getting warnings saying that the days of the month keys, e.g. "72022S", are duplicated, as well as a significant performance hit when I define configs.

david-morris commented 2 years ago

Example:

Warning: Encountered two children with the same key, `62022S`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:18876:20
    at http://localhost:6006/main.iframe.bundle.js:19174:23
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:19347:24
    at VStack
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:19347:24
    at CalendarPanel (http://localhost:6006/main.iframe.bundle.js:109897:26)
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:18835:25
    at RangeCalendarPanel (http://localhost:6006/main.iframe.bundle.js:110048:22)
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:23692:29
    at section
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at VisualElementHandler (http://localhost:6006/main.iframe.bundle.js:291112:42)
    at MotionComponent (http://localhost:6006/main.iframe.bundle.js:291026:24)
    at http://localhost:6006/main.iframe.bundle.js:23234:28
    at div
    at http://localhost:6006/main.iframe.bundle.js:45855:66
    at http://localhost:6006/main.iframe.bundle.js:23638:25
    at Popover (http://localhost:6006/main.iframe.bundle.js:23574:86)
    at RangeDatepicker (http://localhost:6006/main.iframe.bundle.js:110136:29)
    at NDateRangePicker (http://localhost:6006/main.iframe.bundle.js:252939:27)
    at FormProvider (http://localhost:6006/main.iframe.bundle.js:218104:151)
    at I18nextProvider (http://localhost:6006/main.iframe.bundle.js:219907:19)
    at Suspense
    at ThemeWrapper (http://localhost:6006/main.iframe.bundle.js:248365:93)
    at EnvironmentProvider (http://localhost:6006/main.iframe.bundle.js:28787:24)
    at ColorModeProvider (http://localhost:6006/main.iframe.bundle.js:13912:21)
    at ThemeProvider (http://localhost:6006/main.iframe.bundle.js:45894:64)
    at ThemeProvider (http://localhost:6006/main.iframe.bundle.js:34157:27)
    at http://localhost:6006/main.iframe.bundle.js:16168:23
    at ChakraProvider (http://localhost:6006/main.iframe.bundle.js:28084:24)
    at EmptyApolloProvider (http://localhost:6006/main.iframe.bundle.js:261935:24)
    at Providers (http://localhost:6006/main.iframe.bundle.js:261941:26)
    at CommonProviders (http://localhost:6006/main.iframe.bundle.js:261979:27)
    at MockedRouter (http://localhost:6006/main.iframe.bundle.js:259840:24)
    at unboundStoryFn (http://localhost:6006/main.iframe.bundle.js:90771:12)
    at ErrorBoundary (http://localhost:6006/main.iframe.bundle.js:82762:5)
aboveyunhai commented 2 years ago

are u able to replicate the issue in codesandbox https://codesandbox.io/s/?

david-morris commented 2 years ago

@aboveyunhai are there any sandbox templates ready for this project? Otherwise, I'll make one from the Chakra UI sandboxes when I have time and I can give you the link to put in the issue template or something.

david-morris commented 2 years ago

Something that might be useful --- I've noticed that the duplicated keys issue goes away if I memoize the config, but when I do that, and only change them once, new monthNames aren't being honored. Also, the performance hit is still there. This is a problem, since I use react-i18n and want to show customers month names in their native language.

david-morris commented 2 years ago

Ok! I've noticed that you have a key scheme which depends on the string values of days and months, rather than their indexes. I tracked the performance hit down --- I labeled the days of the week S M T W T F S. When I changed it to S M T W D F Sa it worked again. I'll see if I can get PR ready to use index numbers instead of strings, but it will probably end up combined with my existing open PR about the README if that's OK.

david-morris commented 2 years ago

I got it to build, but I don't think it was built successfully. I opened the PR #14 with a word of caution, and I've opened a ticket #15 about documentation for the build process.