Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: onUpdate? #343

Open
Smolations opened this issue Jun 25, 2024 · 0 comments
Open

Feature Request: onUpdate? #343

Smolations opened this issue Jun 25, 2024 · 0 comments

Comments

@Smolations
Copy link

I am using the most recent version of this package and I am writing a wrapper component to manage it and conform to some specifications. We are implementing a minimal HH:mm version of this component without the clock or any clear button functionality. One of the requirements is to make the component look like an actual input, and for the input to show a red border when in an invalid state.

This has proven to be quite difficult to manage given the behavior of the TimePicker. Firstly, the component appears to have been designed to be controlled if any custom formats are desired. This isn't a problem in and of itself, just mentioning it because I am now managing a state variable for the value. The second (and main) problem is that the TimePicker will automatically reset to its last known valid state without notifying its parent.

For example, if I am managing my own isValid state and initially render with a default value with required as false, there's no problem (note that my wrapper component is providing the feeling of being uncontrolled, hence the label):

isValid === true
value === '00:00'
Screenshot 2024-06-25 at 12 50 13 PM

Then, I clear the hours field, causing an invalid state:

onInvalidChange() // the TimePicker fires this and my component re-renders
isValid === false
value === '00:00'
Screenshot 2024-06-25 at 12 54 26 PM

Then I tab to the (valid) minutes field, then out of it (to some other element):

// no callback fires (e.g. `onChange`) and therefore no component re-render
isValid === false
value === '00:00'
Screenshot 2024-06-25 at 12 56 17 PM

As you can see, no accessible callback fires that notifies my component that the TimePicker has reset the inputs to a valid state, so my component can't update any state and re-render in order remove the red border. I understand that onChange is already firing for valid states, but it would be really helpful if there was a way to notify the parent component that the component resets to a valid state in this situation. Unfortunately, I have to resort to document.querySelectorAll in order to get element references, along with an effect in order to manually attach event listeners (e.g. blur/keyup to each input and evaluate their values/validity, which is too complex for my tastes.

Any assistance you could provide here would be great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant