Problem with masked input after v10.9.0

[teodragovic]

Hi 👋

I am pretty sure this is not a Preact issue but I would like to present my problem and ask for advice.

Context

• my team uses custom-made Preact UI framework and we have DateInput component which masks user input to display it as MM/DD/YYYY
• that same input returns onInput prop with the whole input event where we format the value to be YYYY-MM-DD bc that's what our BE uses
• this code has been in production for the past two years and we would like to avoid any significant refactoring around this issue
• after updating from 10.9.0 to 10.10.0 or later, date input started misbehaving

To Reproduce

Here is a reduced example: https://codepen.io/teodragovic/pen/PoaYyma?editors=0011
(just skip down past utilities)

Steps to reproduce the behavior:

1. Type numbers into the input
2. You should see flashes of undefined-0-undefined before input updates to correct value

Problem

Our component is updating input value using both setState and event.target. After updating from microtick to setTimeout value that's set directly gets rendered before setState is flushed. We tried to avoid setting event.target value by cloning event into onInput but that caused our E2E cypress tests to fail due to a number of missing non-enumerable properties.

Our current solution is to set the value directly twice which is synchronous enough to avoid flashes of the second value.

Basically, I'm asking if what we're doing is safe? Are there any other solutions we're missing? It's not imperative that we update from 10.9.0 yet but might as well try to find workarounds.

Thanks!

EDIT: Changed version number from 1.9.0 to 10.9.0 - @marvinhagemeister

[marvinhagemeister]

Can confirm that this error occurs due to scheduling windows. When I revert back to the microtask-based scheduling, the DateInput works as expected.

import { options } from "preact";

options.debounceRendering = queueMicrotask