design-system: DateTimePicker React error maximum depth when setting the value state

Bug report

Required System information

Node.js version: 16.19.0
NPM version: 8.19.3
Strapi version: 4.5.6
Database: Mysql
Operating system: Windows 11

Describe the bug

The DateTimePicker creates a React error Warning: Maximum update depth exceeded when trying to set the value from a state.

Steps to reproduce the behavior

Use the DateTimePicker from '@strapi/design-system' and set the value via another component

Expected behavior

I would expect to be able to set the value of the component.

Code snippets

import React, { useState } from "react";

import { DateTimePicker, Button,  Box } from "@strapi/design-system";

const Component = () => {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <Box>
      <Button type="button" aria-label="Reset" onClick={() => setDate(new Date())}>
        Click me
      </Button>

      <DateTimePicker
        ariaLabel="Label"
        label="Label"
        name="date"
        onChange={(e: Date) => setDate(e)}
        size="S"
        value={date}
      />
    </Box>
  );
};

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 19 (7 by maintainers)

Most upvoted comments

Hi everyone, thank you for your patience I appreciate this is frustrating.

I’ve begun working on this today. It’ll either be released in 1.6.5 or 1.6.6. From there I can give you a better idea of what version of the strapi admin panel it’ll be fixed in.

joshuaellis on Mar 3, 2023

Hello everybody! Good news! Strapi has just released v4.9.0 and includes Design System v1.6.6 😃

eucciferri on Mar 29, 2023

@eucciferri, you have a few choices:

use patch package (or maybe yarn resolutions) to change all your @strapi/design-system dependencies to 1.6.6
keep an eye on this PR https://github.com/strapi/strapi/pull/16113 & there should be an experimental release the next day after it’s merged (it’s on a CRON job)
It’ll be released in 4.8.3 which should be released on the 29th March afaik.

joshuaellis on Mar 16, 2023

Hi guys, This bug was resolved?

Thanks

Nope, there’s a PR we’re working on that solves the issue however 😃

joshuaellis on Mar 10, 2023

Hello guys! Does anyone know if this issue was solved? Thanks!!

eucciferri on Feb 24, 2023

This small change resolved the issue. Removed the value !== dateValue check as well as dateValue from dependency array. I managed to replicate the issue in story book by changing the story - so this really works.

Can someone check this to confirm the fix and prepare a PR? Seems that some people are waiting for this fix - and we are stuck on Strapi 4.5.4 because of this.

useEffect(() => {
    if (value) {
      const parsedData = parseDate(value);
      setDateValue(parsedData);
      setTimeValue(
        parsedData ? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}` : null,
      );
    } else if (!value) {
      setDateValue(undefined);
      setTimeValue(undefined);
    }
  }, [value]);

Change in story to check the error - just added a button to set the value programmatically, which starts the issue.

<Canvas>
  <Story name="base">
    {() => {
      const [value, setValue] = useState(undefined);
      return (
        <>
        <Button variant="danger" onClick={() => setValue(new Date())}>
          Replicate error
        </Button>
        <br/>
        <DateTimePicker
          label={'Date time picker'}
          disabled={false}
          name="datetimepicker"
          onChange={(e) => setValue(e)}
          clearLabel="Clear"
          onClear={() => setValue(undefined)}
          value={value}
          hint="This is a super description"
          selectedDateLabel={() => `Date picker, current is undefined`}
        />
        </>
      );
    }}
  </Story>
</Canvas>

ntarandek on Feb 13, 2023