DatepickerField: Does not work with latest flowbite (0.10.2)

[MiroslavPetrik]

• the defaultDate prop is no longer there, defaultValue seems the way
• the 0.10.2 datepicker is broken, see Datepicker is generating TextInput contains an input of type text with both value and defaultValue  themesberg/flowbite-react#1511 (comment)

[MuellerConstantin]

It's still broken, I observed a similar behavior... Depending on which options you're using (e.g. value, onChange, defaultValue, label) the behavior is slightly different, but it leads always to unwanted side effects.

Initial Situation

First, sorry for the long text, but that's the detailed analysis. As far as I can tell, I'm happy to disagree, but that's the problem. Basically, the component works even as controlled input, meaning the state can be controlled with value and onChange. However, warnings still occur.

// Test.tsx

import { useState } from "react";
import { Datepicker } from "flowbite-react";

export default function Test() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <form>
      <Datepicker
        value={date}
        onChange={(newDate) => setDate(newDate)}
        placeholder="Select date"
      />
    </form>
  );
}

In this scenario we have a controlled component (See Controlled Date/Datepicker.) and no date should be selected by default, hence the selected value should be null. At first glance, it seems to work. The internally used text field component is empty and instead the placeholder is shown. But when you select a date using the picker, a warning is thrown.

First Warning

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

The reason for this seems to be that the value for the internal text field is recalculated internally (See Datepicker.tsx:261). If value is null, which is the case, then label is used as value of the internal text field component. But label is undefined, an in consequence the warning is thrown after selecting a date (Switching from undefined to defined). FYI: label seems to be used as some kind of placeholder here, but I don't understand why it doesn't use the placeholder property instead.

// Datepicker.tsx

const displayValue = value === null ? label : getFormattedDate(language, selectedDate || new Date());

...

<TextInput
  ...
  value={displayValue}
/>

Anyways, if you decide to add the label property (e.g. label="Select date") it still seem to work technically and it resolves the former error but it also results in a new one.

Aftereffect

Warning: TextInput contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components

The reason here is that the component internally calculates the initialDate based on the defaultValue (Not provided, hence undefined). In case of defaultValue is undefined, which is the case, initialDate becomes null (See Datepicker.tsx:129). initialDate is later used to set the internal text field's defaultValue field, which becomes the the label's value in case that initialDate is null (See Datepicker.tsx:296), which is the case. Because we have set label to "Select date", defaultValue is obviously set (!= undefined) at the same time as value is and that leads to the aftereffect.

// Datepicker.tsx

const initialDate = defaultValue ? getFirstDateInRange(defaultValue, minDate, maxDate) : null;

...

<TextInput
  ...
  defaultValue={initialDate ? getFormattedDate(language, initialDate) : label}
/>

PS: I would also be willing to fix the issue myself or rewrite the code once the solution has been discussed.

[MiroslavPetrik]

the flowbite 0.10.2 has unusable datepicker, its like total trash.
Its ok with 0.10.1

In my app, I've started using react-day-picker which is awesome. I'm against UI libraries to re-create datepickers over and over again.

There is big inactivity in flowbite-react. I guess they work on TW4 as seems from discord? Or is it dead?

[MuellerConstantin]

@MiroslavPetrik Just realized I switched the repository when I followed your link in the themesberg/flowbite-react#1511 post. I didn't notice that, my bad. The analysis probably belongs in the original post, even though the error probably also affects this issue. I'll move it.