-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
Describe the Bug
When using the built-in <SelectInput>
component, the onChange
callback is called, even when the value that was selected was the same value as the one that was already selected.
In most implementations, including the <select>
that is built-in on all browsers, selecting the value that is already selected should not invoke onChange
.
For example:
<select onchange="onSelectChange()">
<option value="a" selected>A</option>
<option value="b">B</option>
</select>
<script>
function onSelectChange() {
console.log('Changed!');
}
</script>
When I switch between A
and B
, it logs Changed!
. However, if I select A
when I'm already on A
, nothing is logged.
Context
I'm investigating a migration to move from a DIY CMS to Payload CMS. However, on one of our records, we populate this with videos created by our editors, and then approve/reject them.
As this is a frequent operation, it streamlines the process to be able to modify the status in the list view rather than having to go into the document itself. To maintain the look and feel of Payload CMS without much work, I'm using your components, but your SelectInput
component has this issue.
Workaround
This issue is easy to workaround, we just have to put the following at the top of the callback:
if (newStatus === value) {
return;
}
Link to the code that reproduces this issue
https://github.com/SethFalco/payload-cms-sandbox
Or more specifically, see this commit:
SethFalco/payload-cms-sandbox@cbbbcc3
Reproduction Steps
- Run the application. (It's configured to use SQLite.)
- Create a record for
Custom Type
. - Go to the list view.
- Select the drop-down, and select the option that is already current value.
- Observe that a network request and log appears, even though the value hasn't changed.
Which area(s) are affected? (Select all that apply)
area: ui
Environment Info
Binaries:
Node: 22.16.0
npm: 11.6.0
Yarn: 4.9.4
pnpm: 10.6.5
Relevant Packages:
payload: 3.56.0
next: 15.4.4
@payloadcms/email-nodemailer: 3.56.0
@payloadcms/graphql: 3.56.0
@payloadcms/next/utilities: 3.56.0
@payloadcms/payload-cloud: 3.56.0
@payloadcms/richtext-lexical: 3.56.0
@payloadcms/translations: 3.56.0
@payloadcms/ui/shared: 3.56.0
react: 19.1.0
react-dom: 19.1.0
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Debian 6.12.41-1 (2025-08-12)
Available memory (MB): 96204
Available CPU cores: 22