I am working with an HTML 5 Input with the type "time". Stack is Function Based React with the intention to deploy to mobile devices using Apache Cordova/Phone Gap
My objective: Trigger the time input's edit spinners on mobile devices from javascript:
Once again: I want that spinner to appear without the user tapping on the input.
So, what have I tried?
Using a React.MutableRefObject<HTMLInputElement | null> on that input:
const timePickerRef = useRef<HTMLInputElement | null>(null)
...
<input
ref={timePickerRef}
type={"time"}
/>
Then, in later code:
timePickerRef.current?.click() does nothing
timePickerRef.current?.dispatchEvent(new Event("input")) does nothing
timePickerRef.current?.dispatchEvent(new Event("change")) does nothing
I have made sure that my ref is exists and that my breakpoints are being hit, etc. I can even pause in the console and try to trigger the events manually...nothing.
According to the MSDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time the input and change events are the only ones available. That and because the plain old click isn't doing anything, I'm really quite stumped about how I could do this. (I have also tried onFocus)
Why bother? We don't like the styling and want to have our own styled Time Input that triggers the mobile device's native time picker. Our plan will be to have an invisible time input and trigger the edit from another event.....we just don't like how it looks when Safari or Chrome takes over....but I can't do this unless I can trigger the spinners from javascript.