Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Combobox fires its onInputChange callback on initial render #16969

Open
2 tasks done
markcor11 opened this issue Jul 16, 2024 · 2 comments · May be fixed by #18713
Open
2 tasks done

[Bug]: Combobox fires its onInputChange callback on initial render #16969

markcor11 opened this issue Jul 16, 2024 · 2 comments · May be fixed by #18713
Assignees

Comments

@markcor11
Copy link

Package

@carbon/react

Browser

Chrome, Safari, Firefox

Package version

v1.61.0

React version

16.14.0

Description

When a combobox first renders, the onInputChange callback fires. Shouldn't the onInputChange only fire when the user has typed a new value into the text box.

sample: https://codesandbox.io/s/staging-sea-r87r62?file=/src/index.js:737-750

Notice on render, the console tab shows the onInputChange fires

Reproduction/example

https://codesandbox.io/s/staging-sea-r87r62?file=/src/index.js:737-750

Steps to reproduce

Open this app: https://codesandbox.io/s/staging-sea-r87r62?file=/src/index.js:737-750

Look at the debug console to confirm the console.log state fires showing the callback was triggered.

Suggested Severity

None

Application/PAL

Event Integration (EEM)

Code of Conduct

@ashishkrz
Copy link

One more issue with ComboBox, when an item is selected, and you try to clear it out by clicking (x) icon, it doesn't get cleared.

@David-Yuen
Copy link

David-Yuen commented Feb 26, 2025

I am having problems with the same issue here, where onInputChange is firing on initial load.

This is my own description and importance of resolving this issue. I hope that it helps bump up the priority/severity so that it can get the attention it needs to get resolved.
Package: @carbon/react
Version: 1.76.0
React: 18.3.1

When using ComboBox component with allowCustomValue set, the onInputChange event handler is triggered on initial load.
In the snippet that i provided below, we have set an initial value in state value (to first item in items array) as the default, and we're passing this value into the ComboBox as current item using selectedItem={value}.. When the component loads the first time, it should just take the value and set it internally, but it's triggering onInputChange which is triggering our code to update a value in our state.

Also note, since we're using allowCustomValue, so we're using onInputChange for handling event changes, and passing in empty function to onChange to avoid double-updates.. (ComboBox triggers both onChange and onInputChange events..)

Normally (with all other carbon components), event change handler functions are not triggered on initial load, because our local state value is already set properly and providing the value to ComboBox through selectedItem the first time is just synchronizing the starting value. Change event handler functions (onInputChange in this case) should only be triggered when user types new input or changes an option from the previous option..
Even with this ComboBox component, even if use it purely for the dropdown function (remove allowCustomValue and onInputChange) and just use the onChange event handler, onChange is not triggered on initial load.. And other components like TextInput and etc doesn't either. But this component's onInputChange IS triggering on initial load.

In a simple use case (like the example code provided) it may not seem like an issue, but the problem is that it affects real life applications where scenarios are more dynamic. Such as, the initial value is dynamically determined programmatically, and the event handler setValue (our local event handler function, triggered by onInputChange) is more complex process where we update/process other state values in parallel with this selected value.. Such as, we have code search/filter/validation code tied to our local event handler function, and we have other variables such as invalidText handled in parallel with the value (for selectedItem). The extra event triggered on initial load causes our processing code to execute at an unwanted time, getting triggered during react render cycles instead of actual value change from user.

Not sure if I described clearly, I don't want to make it sound like we're pushing our code problem to the UI library.. but the big impact is, because react is constantly looping through it's react cycles, and the initial load triggering onInputChange is part of the cycle, the surrounding code (validating input and maintaining other related state variables in parallel with the selectedItem's value) is getting triggered at the wrong time and creates alot of problems, unwanted code executing at the wrong time and messing up the synchronization patterns.

Similar reproduction:
https://stackblitz.com/edit/github-i6jrva3h-pntmp5b2?file=src%2FApp.jsx

Load the above page example
Open the browser's dev tools console
Clear the console for clean terminal
Refresh the preview page

  • when the preview page refreshes, you can see that onInputChange is triggered on the initial load
Image

@Gururajj77 Gururajj77 self-assigned this Feb 26, 2025
@Neues Neues linked a pull request Feb 26, 2025 that will close this issue
@Gururajj77 Gururajj77 moved this from ⏱ Backlog to 🏗 In Progress in Design System Feb 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 🏗 In Progress
Development

Successfully merging a pull request may close this issue.

4 participants