[Inline time-picker] [not getting the value after selecting value from time-picker]

[Rishavraaj]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

I am using inline timepicker with the Next Js with react-hook-form when i am trying to select value from the time-picker then i am not getting the selected value of time picker

Expected behavior I want value when i select the time from the time picker

Actual behavior when selecting time from time-picker then value is changing in the input field but i am not getting that value.

Show your code

"use client";
import { useEffect, useRef, useState } from "react";
import {
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
  UseFormGetValues,
} from "react-hook-form";
// import "tw-elements/dist/css/tw-elements.min.css";

type timpeickerProps = {
  name: string;
  register: UseFormRegister<any>;
  lableTitle: string;
  setValue: UseFormSetValue<any>;
  watch?: UseFormWatch<any>;
  getValues?: UseFormGetValues<any>;
};

const MyComponent = ({
  lableTitle,
  name,
  register,
  setValue,
  watch,
  getValues,
}: timpeickerProps) => {
  const pickerRef = useRef(null);

  const [clockClick, setClockClick] = useState(false);

  useEffect(() => {
    if (clockClick) {
      const init = async () => {
        const { Timepicker, Input, initTE } = await import("tw-elements");
        initTE({ Timepicker, Input });
        const pickerInline = pickerRef.current;
        const timepickerMaxMin = new Timepicker(pickerInline, {
          format12: true,
          inline: true,
        });
      };
      init();
    }
  }, [clockClick]);

  const defaultValue = watch && watch(name);


  console.log(defaultValue, "watch");


  return (
    <div
      className="relative w-full h-full flex-col gap-[0.5rem]"
      ref={pickerRef}>
      <label
        htmlFor={name}
        className="text-base font-normal text-dark-gray font-karla">
        {lableTitle}
      </label>
      <input
        type="text"
        className="w-full rounded-md border-0 outline-none bg-white py-2.5 px-3 text-[#363939] shadow-sm ring-1 max-h-60 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
        id={name}
        autoComplete="off"
        onFocus={() => setClockClick(true)}
        {...register(name)}
      />
    </div>
  );
};

export default MyComponent;

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

Make sure it is indeed an issue/bug report

• If it's a general support question (you just can't figure out how something works), but not an issue with the UI Kit or documentation itself it's better to ask here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/support-from-community
• If it's an idea for a new feature, but you cannot write the code for it yourself, it's better to ask here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/share-ideas-request-features
• If it's general feedback, it's better to post it here: https://github.com/mdbootstrap/Tailwind-Elements/discussions/categories/kind-words-general-feedback

[juujisai]

When the timepicker updates it's value it also fires the input event. Did you try to listen for that event and updating the name value? For example:

...
onInput={(e) => setName(e.target.value)}
...