Skip to content

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

@SethFalco

Description

@SethFalco

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

  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

Metadata

Metadata

Assignees

No one assigned

    Labels

    status: needs-triagePossible bug which hasn't been reproduced yet

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions