fix(ui): autosave form state discards local changes

[jacobsfletch]

Follow-up to #13416. Supersedes #13434.

When autosave is triggered and the user continues to modify fields, their changes are overridden by the server's value, i.e. the value at the time the form state request was made. This makes it almost impossible to edit fields when using a small autosave interval and/or a slow network.

This is because autosave is now merged into form state, which by default uses acceptValues: true. This does exactly what it sounds like, accepts all the values from the server—which may be stale if client-side changes have been made. We ignore these values for onChange events, because the user is actively making changes. But during form submissions, we can accept them because the form is disabled while processing anyway.

This pattern allows us to render "computed values" from the server, i.e. a field with an beforeChange hook that modifies its value.

Autosave, on the other hand, happens in the background while the form is still active. This means changes may have been made since sending the request. We still need to accept computed values from the server, but we need to avoid doing this if the user has active changes since the time of the request.

Update: this approach was improved in #13460.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1211027929253429

[github-actions]

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File	Out File	Size (raw)	Note
packages/next/meta_index.json	esbuild/index.js	754.09 KB	✅ No change
packages/payload/meta_index.json	esbuild/index.js	1.21 MB	⚠️ +165 B (+0.0%)
packages/payload/meta_shared.json	esbuild/exports/shared.js	161.86 KB	✅ No change
packages/richtext-lexical/meta_client.json	esbuild/exports/client_optimized/index.js	259.27 KB	✅ No change
packages/ui/meta_client.json	esbuild/exports/client_optimized/index.js	1.15 MB	⚠️ +268 B (+0.0%)
packages/ui/meta_shared.json	esbuild/exports/shared_optimized/index.js	14.10 KB	✅ No change

Largest paths

These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████ }}}$ 80.3%, 601.88 KB
dist/views/Version	${{\color{Goldenrod}{ █▋ }}}$ 6.7%, 50.27 KB
dist/views/Document	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 14.89 KB
dist/views/List	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 9.16 KB
dist/views/Root	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 7.08 KB
dist/views/Versions	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 6.30 KB
dist/views/API	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.98 KB
dist/views/Account	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.32 KB
dist/elements/Nav	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.84 KB
dist/elements/DocumentHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.81 KB
dist/views/Login	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.39 KB
dist/views/Dashboard	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 3.68 KB
dist/views/ForgotPassword	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/layouts/Root	${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/utilities/initPage	${{\color{Goldenrod}{ }}}$ 0.4%, 3.06 KB
dist/templates/Default	${{\color{Goldenrod}{ }}}$ 0.4%, 2.83 KB
dist/views/CreateFirstUser	${{\color{Goldenrod}{ }}}$ 0.3%, 2.61 KB
dist/views/BrowseByFolder	${{\color{Goldenrod}{ }}}$ 0.3%, 2.60 KB
dist/views/CollectionFolders	${{\color{Goldenrod}{ }}}$ 0.3%, 2.46 KB
dist/views/ResetPassword	${{\color{Goldenrod}{ }}}$ 0.3%, 2.41 KB
(other)	${{\color{Goldenrod}{ ████▉ }}}$ 19.7%, 147.53 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ █████████████████▍ }}}$ 69.9%, 841.07 KB
dist/fields/hooks	${{\color{Goldenrod}{ ▊ }}}$ 3.3%, 40.21 KB
dist/collections/operations	${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 35.91 KB
dist/auth/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.07 KB
dist/queues/operations	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.94 KB
dist/utilities/configToJSONSchema.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.54 KB
dist/globals/operations	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 11.04 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.82 KB
dist/fields/validations.js	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.35 KB
dist/bin/generateImportMap	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.27 KB
dist/database/migrations	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.79 KB
dist/collections/config	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.79 KB
dist/uploads/fetchAPI-multipart	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.74 KB
dist/collections/endpoints	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.20 KB
dist/index.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.11 KB
dist/config/orderable	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.25 KB
dist/auth/strategies	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 5.46 KB
dist/config/sanitize.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 5.44 KB
dist/auth/endpoints	${{\color{Goldenrod}{ }}}$ 0.4%, 5.41 KB
dist/utilities/telemetry	${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB
(other)	${{\color{Goldenrod}{ ███████▌ }}}$ 30.1%, 362.75 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████████████ }}}$ 80.0%, 126.93 KB
dist/fields/validations.js	${{\color{Goldenrod}{ █▍ }}}$ 5.9%, 9.36 KB
dist/fields/baseFields	${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 2.79 KB
dist/utilities/deepCopyObject.js	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 2.48 KB
dist/auth/cookies.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 1.55 KB
dist/utilities/flattenTopLevelFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 1.41 KB
dist/fields/config	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.28 KB
dist/utilities/flattenAllFields.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 943 B
dist/utilities/fieldSchemaToJSON.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 917 B
dist/folders/utils	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 873 B
dist/utilities/unflatten.js	${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 779 B
dist/utilities/sanitizeUserDataForEmail.js	${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/collections/config	${{\color{Goldenrod}{ }}}$ 0.4%, 570 B
dist/bin/generateImportMap	${{\color{Goldenrod}{ }}}$ 0.4%, 559 B
dist/auth/sessions.js	${{\color{Goldenrod}{ }}}$ 0.3%, 508 B
dist/utilities/getSafeRedirect.js	${{\color{Goldenrod}{ }}}$ 0.3%, 423 B
dist/utilities/deepMerge.js	${{\color{Goldenrod}{ }}}$ 0.3%, 413 B
dist/utilities/getFieldPermissions.js	${{\color{Goldenrod}{ }}}$ 0.2%, 391 B
dist/utilities/formatLabels.js	${{\color{Goldenrod}{ }}}$ 0.2%, 380 B
dist/utilities/transformColumnPreferences.js	${{\color{Goldenrod}{ }}}$ 0.2%, 348 B
(other)	${{\color{Goldenrod}{ █████ }}}$ 20.0%, 31.70 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
dist/lexical/plugins	${{\color{Goldenrod}{ ███ }}}$ 12.1%, 30.91 KB
dist/features/experimental_table	${{\color{Goldenrod}{ ██▍ }}}$ 9.6%, 24.60 KB
dist/lexical/ui	${{\color{Goldenrod}{ ██▎ }}}$ 9.2%, 23.47 KB
dist/features/blocks	${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 22.43 KB
dist/packages/@lexical	${{\color{Goldenrod}{ █▊ }}}$ 7.4%, 18.99 KB
dist/features/link	${{\color{Goldenrod}{ █▊ }}}$ 7.0%, 17.96 KB
dist/features/toolbars	${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 17.44 KB
dist/features/textState	${{\color{Goldenrod}{ █ }}}$ 4.3%, 10.98 KB
dist/features/upload	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.60 KB
dist/features/relationship	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.41 KB
dist/lexical/utils	${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 8.08 KB
dist/features/debug	${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 7.39 KB
dist/features/converters	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.04 KB
dist/utilities/fieldsDrawer	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.01 KB
dist/lexical/config	${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 5.10 KB
dist/features/lists	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 4.95 KB
dist/lexical/theme	${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 4.01 KB
dist/features/format	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 3.46 KB
dist/lexical/LexicalEditor.js	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 3.23 KB
dist/features/indent	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 2.50 KB
(other)	${{\color{Goldenrod}{ █████████████████████▉ }}}$ 87.9%, 225.34 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path	Size
../../node_modules	${{\color{Goldenrod}{ ████████████▌ }}}$ 50.3%, 572.93 KB
dist/elements/FolderView	${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 30.39 KB
dist/elements/BulkUpload	${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 24.57 KB
dist/elements/WhereBuilder	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.26 KB
dist/fields/Relationship	${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.11 KB
dist/views/Edit	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.35 KB
dist/elements/Table	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.26 KB
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.63 KB
dist/fields/Blocks	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 12.39 KB
dist/fields/Upload	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.94 KB
dist/elements/ListControls	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.55 KB
dist/fields/Array	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.30 KB
dist/elements/PublishButton	${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.57 KB
dist/providers/Folders	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/LivePreview	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.20 KB
dist/elements/ListHeader	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.98 KB
dist/views/CollectionFolder	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.89 KB
dist/elements/HTMLDiff	${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.81 KB
dist/views/List	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.18 KB
dist/elements/ReactSelect	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.91 KB
(other)	${{\color{Goldenrod}{ ████████████▍ }}}$ 49.7%, 565.31 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path	Size
dist/graphics/Logo	${{\color{Goldenrod}{ █████▊ }}}$ 23.1%, 3.12 KB
../../node_modules	${{\color{Goldenrod}{ ████▉ }}}$ 19.6%, 2.65 KB
dist/graphics/Icon	${{\color{Goldenrod}{ ██▊ }}}$ 11.3%, 1.52 KB
dist/utilities/formatDocTitle	${{\color{Goldenrod}{ ██▍ }}}$ 9.8%, 1.32 KB
dist/utilities/groupNavItems.js	${{\color{Goldenrod}{ █▌ }}}$ 6.0%, 814 B
dist/providers/TableColumns	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 757 B
dist/utilities/api.js	${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 756 B
dist/elements/Translation	${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 493 B
dist/elements/withMergedProps	${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 339 B
dist/utilities/handleTakeOver.js	${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 251 B
dist/elements/WithServerSideProps	${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 232 B
dist/utilities/handleGoBack.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 168 B
dist/fields/mergeFieldStyles.js	${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 159 B
dist/forms/Form	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 147 B
dist/utilities/abortAndIgnore.js	${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 146 B
dist/utilities/hasSavePermission.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 136 B
dist/utilities/handleBackToDashboard.js	${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 129 B
dist/utilities/findLocaleFromCode.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 84 B
dist/utilities/sanitizeID.js	${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 77 B
dist/utilities/isEditing.js	${{\color{Goldenrod}{ }}}$ 0.4%, 59 B
(other)	${{\color{Goldenrod}{ ███████████████████▏ }}}$ 76.9%, 10.38 KB

Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

• ‼️: Size increased by 20% or more. Special attention should be given to this.
• ⚠️: Size increased in acceptable range (lower than 20%).
• ✅: No change or even downsized.
• 🗑️: The out file is deleted: not found in base branch.
• 🆕: The out file is newly found: will be added to base branch.

[github-actions]

🚀 This is included in version v3.51.0