When using <input> as children this condition does not allow the calendar to autoHide

[rogeliorv]

https://github.com/OMikkel/tailwind-datepicker-react/blob/56e1b146c7fec108584802e029204042b68ba8ce/src/Components/DatePicker.tsx#L34

[nadamai]

Having the same issue. You can overcome it by adding the ID to your datepicker container and new window event listener in your custom datepicker component.

Typescript example within the functional component:

useEffect(() => {
  window.addEventListener('click', (e: Event) => {
    const target = e.target as HTMLElement;
    
    if (document.getElementById(props.container_id)?.contains(target)) {
      return;
    }
    
    setShow(false);
  })
}, [setShow]);

[OMikkel]

Works fine in the demo. https://omikkel.github.io/tailwind-datepicker-react/

[jorgror]

I have the same issue. If using the Advanced - Custom input field example , then the datepicker will not hide if clicking outside it.

[SpergelB94]

Works fine in the demo. https://omikkel.github.io/tailwind-datepicker-react/

Demo is not "Advanced - Custom input field"

[morou34]

here is a solution for you guys based on replies above

import Datepicker from "tailwind-datepicker-react";
import React, { useState, useEffect } from "react";

const MyDatePicker = ({ onChange, canSelectDate, contractDate, disabled }) => {
  const [show, setShow] = useState(false);

  const CLEAR_BUTTON_TEXT = "Effacer"; // Text for the clear button

  // Handle the change of the selected date
  const handleChange = (selectedDate) => {
    if (selectedDate === null) {
      onChange(null); // Clear the selected date if null
    } else if (!disabled) {
      onChange(selectedDate); // Update the selected date if not disabled
    }
  };

  // Handle close of datepicker popup
  const handleClose = (state) => {
    if (!disabled) {
      setShow(state); // Only toggle the popup if not disabled
    }
  };

  // Detect click events and check if the "Clear" button is clicked
  useEffect(() => {
    const handleClickOutside = (e) => {
      const target = e.target;

      // If clicking inside the datepicker, check if it’s the clear button
      if (
        target.tagName.toLowerCase() === "button" &&
        target.innerHTML === CLEAR_BUTTON_TEXT
      ) {
        console.log("Clear button clicked");
        handleChange(null); // Clear the date when the "Effacer" button is clicked
      }
    };

    // Add event listener for outside clicks
    window.addEventListener("click", handleClickOutside);

    // Cleanup event listener when component unmounts
    return () => {
      window.removeEventListener("click", handleClickOutside);
    };
  }, []);

  const options = {
    autoHide: true,
    todayBtn: true,
    clearBtn: true,
    todayBtnText: "Aujourd'hui",
    clearBtnText: CLEAR_BUTTON_TEXT, // Set the clear button text
    maxDate: new Date("2311-12-31"),
    minDate: new Date("1900-01-01"),
    theme: {
      background: "",
      todayBtn: "",
      clearBtn: "",
      icons: "",
      disabledText: "",
      text: "",
      input: "pl-10", // Adds padding-left for input
      inputIcon: "left-3",
      selected: "",
    },
    datepickerClassNames: "top-30",
    defaultDate: contractDate ? new Date(contractDate) : null,
    language: "fr",
    disabledDates: [],
    weekDays: ["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
    inputNameProp: "date",
    inputIdProp: "date",
    inputPlaceholderProp:
      !contractDate && canSelectDate
        ? "Sélectionner une date"
        : "Date non disponible",
    inputDateFormatProp: {
      day: "numeric",
      month: "long",
      year: "numeric",
    },
    inputProps: {
      disabled: disabled, // Disable the input field based on the disabled prop
    },
    show: !disabled && show, // Only show the date picker if not disabled
  };

  return (
    <div>
      <Datepicker
        options={options}
        onChange={handleChange}
        show={show}
        setShow={handleClose}
      />
    </div>
  );
};

export default MyDatePicker;