Select does not propagate change event

gijsroge commented 5 months ago

Provide a general summary of the issue here

When you change a value in a Select element there is no change event that bubbles causing patterns like <form onChange> to stop working.

🤔 Expected Behavior?

The select should trigger a change event like normal form elements.

😯 Current Behavior

The <Select> element does not behave like a native <select> element by not bubbling change events.

💁 Possible Solution

I believe the reason why this currently does not work is because the select just get's re-rendered. Maybe adding a manual change event in the <HiddenSelect> would solve this.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/twilight-voice-tjmwcl?file=%2Fsrc%2FApp.js%3A4%2C9

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 5 months ago

Thanks for the issue and initial digging, I think your solution could work.

gijsroge commented 5 months ago

@snowystinger i've already patched this in my project, I could start a PR if you want.

joshuajaco commented 2 months ago

We are having the same issue with other form elements including Checkbox, Combobox and RadioGroup. Not sure if this has the same root cause or is a separate issue.

joshuajaco commented 2 months ago

This one also seems to be the same issue: https://github.com/adobe/react-spectrum/issues/5955

joshuajaco commented 2 months ago

After some testing I think the proposed solution will only work for components using a hidden <select> element. React does not bind onChange to any native event directly for <input> elements, see: https://github.com/facebook/react/issues/19846#issuecomment-694241217.

I tested workaround/solutions from the following issues without success (using react through next.js):

snowystinger commented 2 months ago

Checkbox/Radio is probably a different issue, looks like we stop propagation on both of those, https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/toggle/src/useToggle.ts#L56

RickHuizing01 commented 1 month ago

Hey!

I wanted to add that my team is also experiencing this issue. As a temporary measure, we have "hacked" a workaround in our codebase that submits a native onChange event. However, we are looking forward to a more permanent fix. It seems like we are experiencing similar issues with our checkboxes but I will do some extra research into them to make sure it is not a bug on our side.

Could you provide an update on the status of this issue? Thanks in advance 😃

adobe / react-spectrum