Material-ui: [Select] onClose triggering before onChange in Select

[oliviertassinari]

@pablof300 Why does the order matter? Why should it be changed?

[eps1lon]

Then review console to check which one was triggered first.

Could you include codesandbox illustrating that order? I tend to agree that onChange should be fired before onClose. It's somewhat related to input -> commit order for <input>. Though it's probably also interesting to see if click fires before or after change in a native <select>.

[oliviertassinari]

Could you include codesandbox illustrating that order?

@eps1lon https://codesandbox.io/s/material-demo-wzo11?file=/demo.tsx.

Though it's probably also interesting to see if click fires before or after change in a native <select>.

https://codesandbox.io/s/material-demo-72vnd?file=/demo.tsx

---

On the autocomplete, we fire onChange before onClose too:

https://github.com/mui-org/material-ui/blob/6ba4519441edee1f3648ff9817b89df84f3ba826/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js#L565-L568

[oliviertassinari]

Regarding a possible solution, it seems that

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 27446e29a5..d748c3a5ce 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -160,10 +160,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   };

   const handleItemClick = (child) => (event) => {
-    if (!multiple) {
-      update(false, event);
-    }
-
     let newValue;

     if (multiple) {
@@ -194,6 +190,10 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       Object.defineProperty(event, 'target', { writable: true, value: { value: newValue, name } });
       onChange(event, child);
     }
+
+    if (!multiple) {
+      update(false, event);
+    }
   };

   const handleKeyDown = (event) => {

Would be enough

[DanailH]

I can take this one if it is still valid 😉

[eps1lon]

@DanailH All yours :+1: