search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

Datepicker should `forwardRef` #1299

Closed MiroslavPetrik closed 3 months ago

MiroslavPetrik commented 3 months ago

Summary

It should be possible to forward ref to the Datepicker, in order to focus its input, or clear the value.

Currently the Datepicker is uncontrolled (only accepting defaultValue, not value prop) https://github.com/themesberg/flowbite-react/issues/1039. Alternative to controlled component is programmatic API exposing methods to the ref object via useImperativeHandle.

Context

Scenario - Clear Datepicker

I have a controlled Datepicker which a problematic scenario:

  1. select a value in the datepicker
  2. click reset
  3. the controlled value is reset, the placeholder is displayed (everything ok on the outside)
  4. open the datepicker again
  5. the datepicker displays the value from the step 1, expected would be to see the defaultValue - a clear() method needs to be called.

Scenario - Focus the datepicker

My controlled form fields, have focus() method, where I can focus the field when its appropriate - e.g. error is detected while submitting the form.

Currently I cannot propagate my ref to the Datepicker. So the Datepicker should accept the ref, and delegate the focus call into the internal inputRef as inputRef.current.focus() called in useImperativeHandle.

Additional

Possibly other methods, like blur() could be added, I don't have real use case for this right now so it's optional.