-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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
[Joy][Select] onChange callback fires without user interaction #36783
Comments
I agree with @sibljon so mark this as a bug. I think this might related to Base UI than Joy UI. @michaldudak Would the latest refactor of the Listbox fixes this? |
Yes, this issue should be fixed on master (it will be released on Monday or Tuesday). |
@michaldudak I'm currently using the latest version (
Code snippet: export default function UnstyledSelectSimple() {
const [value, setValue] = React.useState<string>("");
return (
<CustomSelect<string, false>
value={value}
onChange={(_, value) => {
console.log(value); // null
setValue(value);
}}
>
<StyledOption value="10">Ten</StyledOption>
<StyledOption value="20">Twenty</StyledOption>
<StyledOption value="30">Thirty</StyledOption>
</CustomSelect>
);
} Here is a codesandbox example: https://codesandbox.io/s/nifty-kare-miz8r6?file=/demo.tsx |
Right, the issue was still present when you set the initial value to an empty one. I just submitted a PR to fix this. However, the codesandbox that you linked to has another issue - you're setting the value to "", but it's not a valid option. In Base UI's Select you have to pass in |
Hello, I have same/similar issue using BaseUI Select with multiple option. little sandbox without form but state init value: https://codesandbox.io/s/hopeful-visvesvaraya-r527yc?file=/demo.tsx Do you have any workaround till it's fixed please? I thought about skipping onChange when |
@martsim6 open a new issue, please. I'll look into it. |
A simple fix just check if e not null |
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example:
https://codesandbox.io/s/select-onchange-callback-mb1n7d?file=/demo.tsx
Steps:
Select
componentnull
) by specifying the value in thevalue
propvalue
proponChange
handler is calledCurrent behavior 😯
The onChange callback fires even though the value did not change due to user interaction
Expected behavior 🤔
The onChange callback only fires when the value changes due to user interaction
Context 🔦
It's a common pattern to render a
Select
and not have itsvalue
until later, such as when a network request completes. The owner of theSelect
component is both specifying thevalue
and theonChange
handler, and thus, it doesn't seem necessary that the owner would need to know when the very value that it's supplying has changed.I've used other UI libraries such as Semantic-UI and UIKit on iOS, and change handlers for UI components are always only called when a value changes due to user interaction. I was hoping that someone here could help me understand why the
onChange
callback is fired in this case. I first thought this was a bug, but given that there are seemingly no Github Issues related to it, I'm wondering if it's intentional. I noticed that theevent
isnull
when the change is not due to user-interaction, so that can at least be used in the short-term to ignore these onChange events when they are not due to user interaction.Your environment 🌎
npx @mui/envinfo
The text was updated successfully, but these errors were encountered: