Skip to content

DataForm: Fix the datetime control sending two updates per calendar interaction - #81440

Open
ntsekouras wants to merge 3 commits into
trunkfrom
fix/df-datetime-control-two-updates-per-interaction
Open

DataForm: Fix the datetime control sending two updates per calendar interaction#81440
ntsekouras wants to merge 3 commits into
trunkfrom
fix/df-datetime-control-two-updates-per-interaction

Conversation

@ntsekouras

Copy link
Copy Markdown
Contributor

What?

Fixes a bug noticed by @ciampo:
in the datetime control, 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, ControlWithError revealed a stale or empty message, since it reads the input's validationMessage before the input has re-rendered with the new value. Instead of relying on the extra update, ControlWithError now re-reads the message when an invalid event 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.

  1. npm run storybook:dev and open DataViews / DataForm → Validation.
  2. Select a date in the Date time field'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.

@ntsekouras ntsekouras self-assigned this Aug 11, 2026
@ntsekouras
ntsekouras requested review from a team, ajitbohra, gigitux and oandregal as code owners August 11, 2026 14:38
@ntsekouras ntsekouras added [Type] Bug An existing feature does not function as intended [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Aug 11, 2026
@github-actions github-actions Bot added [Package] Components /packages/components [Package] DataViews /packages/dataviews labels Aug 11, 2026
@github-actions

github-actions Bot commented Aug 11, 2026

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions

github-actions Bot commented Aug 11, 2026

Copy link
Copy Markdown

Size Change: +112 B (0%)

Total Size: 7.71 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 458 kB +29 B (+0.01%)
build/scripts/components/index.min.js 256 kB +16 B (+0.01%)
build/scripts/edit-site/index.min.js 333 kB +1 B (0%)
build/scripts/editor/index.min.js 530 kB +44 B (+0.01%)
build/scripts/media-utils/index.min.js 153 kB +22 B (+0.01%)

compressed-size-action

Comment thread packages/dataviews/src/components/dataform-controls/datetime.tsx Outdated
Comment thread packages/dataviews/src/dataform/test/dataform.tsx Outdated
Comment thread packages/dataviews/src/dataform/test/dataform.tsx Outdated
// duplicate update scheduled for a later tick is not missed.
const flushTimeouts = () =>
act(
() => new Promise( ( resolve ) => setTimeout( resolve, 10 ) )

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😄

Comment thread packages/dataviews/src/components/dataform-controls/datetime.tsx
@ntsekouras
ntsekouras force-pushed the fix/df-datetime-control-two-updates-per-interaction branch from 3617601 to 537d0a4 Compare August 12, 2026 07:10
@github-actions

Copy link
Copy Markdown

Flaky tests detected in c566d2f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/31575557755
📝 Reported tests:

redirects revision deep links to the classic screen in /test/e2e/specs/editor/various/revisions.spec.js, passed after 1 failed attempt.
Error: apiRequestContext.fetch: socket hang up
Call log:
  - → POST http://localhost:8889/wp-json/wp/v2/posts
    - user-agent: Playwright/1.62.1 (x64; ubuntu 24.04) node/20.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: ead88556e9
    - content-type: application/json
    - content-length: 126
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1786694013%7CQv9OTj02xYDCoY9J8xESxOm7WQoWh2CRGZBgMHKGhaO%7C7eb1cbd5ada48f7d4380accc375955438c3e8bf63192382a4c3df3776e2720e5; wp-settings-time-1=1786522059

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/revisions.spec.js:457:35

@ntsekouras
ntsekouras force-pushed the fix/df-datetime-control-two-updates-per-interaction branch from c566d2f to b360262 Compare August 12, 2026 08:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] Components /packages/components [Package] DataViews /packages/dataviews [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants