DataForm: Fix the datetime control sending two updates per calendar interaction - #81440
DataForm: Fix the datetime control sending two updates per calendar interaction#81440ntsekouras wants to merge 3 commits into
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +112 B (0%) Total Size: 7.71 MB 📦 View Changed
|
| // duplicate update scheduled for a later tick is not missed. | ||
| const flushTimeouts = () => | ||
| act( | ||
| () => new Promise( ( resolve ) => setTimeout( resolve, 10 ) ) |
There was a problem hiding this comment.
Nit: the control only schedules 0 ms timeouts, so I guess the 10 ms sleep is arbitrary. Could we use 0 ms here (or fake timers) so the test does not rely on a magic number? Harmless as-is.
There was a problem hiding this comment.
I think 10 is fine (upper bound) because while we could use 0 ms to catch duplicates at the same tick, the slightly bigger timeout could catch cases with a slightly later timeout. I agree 10 is still arbitrary and could update if you want. I don't have strong opinions on this 😄
3617601 to
537d0a4
Compare
|
Flaky tests detected in c566d2f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31575557755 redirects revision deep links to the classic screen in
|
c566d2f to
b360262
Compare
What?
Fixes a bug noticed by @ciampo:
in the
datetimecontrol, selecting or clearing a date in the calendar sent two identical DataForm updates for a single user action — once directly and once in a timeout that also moved focus into the datetime input and back, to reveal validation errors.It turns out without the previous duplicate update,
ControlWithErrorrevealed a stale or empty message, since it reads the input'svalidationMessagebefore the input has re-rendered with the new value. Instead of relying on the extra update,ControlWithErrornow re-reads the message when aninvalidevent is received.Testing Instructions
There are unit tests for the calendar interactions, which they fail in trunk.
Note there's no visible difference from trunk in the steps below: trunk moved focus into the input and restored it too fast to notice, and this PR doesn't move it at all. What to check is that the behavior is preserved: the error still appears and the day button keeps focus in step 2.
npm run storybook:devand open DataViews / DataForm → Validation.Date timefield's calendar, then click the same day again to clear it: the required error should appear under the input, and focus stays on the day button.Use of AI Tools
Generated with Fable 5 and adjusted/reviewed manually.