payloadcms / payloadcms/payload

<SelectInput> onChange callback fires even when current value is selected

Open
#13,851 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

stale status: needs-triage
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
  1. Run the application. (It's configured to use SQLite.)
  2. Create a record for Custom Type.
  3. Go to the list view.
  4. Select the drop-down, and select the option that is already current value.
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.