payloadcms / payloadcms/payload
<SelectInput> onChange callback fires even when current value is selected
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
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:
https://github.com/SethFalco/payload-cms-sandbox/commit/cbbbcc312e80849034c463ce680c08c44e39f05d
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the built-in component and reproduce the behavior using the linked payload-cms-sandbox commit. Verify that choosing the already-selected option does not invoke onChange or trigger the network request, while changing to another option still does. Add or update regression coverage for both cases if the relevant test entry point is available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100