When customInput is a input

[D-Thrane]

I'm using customInput to render a custom input field that opens the date picker. When my focus is another input field in the form I need to click the datepicker input twice to open the date picker. I also noticed that every time I focus another input field in the form the datepicker input re-renders.

Here is my code for the customInput:

  const DatePickerInput = forwardRef<HTMLInputElement, { value?: string; onClick?: () => void }>(
    ({ value, onClick }, ref) => (
      <>
        <input type="text" name={name} className="input__field cursor-pointer" onClick={onClick} ref={ref} value={value} title={tooltip || tooltip} readOnly={true} disabled={disabled} />
        <label className={`input__label text-faded ${required ? "label--required" : ""}`}>{placeholder}</label>
      </>
    ),
  );

[marcusstahlnacke]

Did you find a workaround?

[D-Thrane]

I hade to not use customInput and archive what i needed with css

[marcusstahlnacke]

I solved it by wrapping the custominput with a useMemo

const CustomInput = React.useMemo(() => { return forwardRef<ReactNode, any>(({ onClick }, ref) => ( <FbDatepickerInput innerRef={ref} id={id + '__input'} label={label} disabled={disabled} required={required} validationFailedTooltip={validationFailedTooltip} tooltip={tooltipText} onClick={onClick} /> )); }, []);

[charliemourant]

@D-Thrane how did you modify the input field using css?