[data grid] Multi sorting not working when using the dropdown menu

[rhyswatsonto]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/x/react-data-grid/sorting/#multi-sorting
2. Scroll down to the second example -where multipleColumnsSortingMode prop is set to "always".
3. Click on multiple column headers to sort 3 columns.
4. For a column that is not sorted open the dropdown menu and click "Sort by ASC" or "Sort by DESC"
5. Then instead of making this column the fourth sorted column it unsorts all other columns and makes this column the only column that is sorted

Current behavior

Currently if multiple columns are sorted when multipleColumnsSortingMode='always', when sorting a new column using the columns dropdown menu it unsorts all other columns and makes the new column the only one that is sorted.

Expected behavior

When multipleColumnsSortingMode='always', if I have multiple columns being sorted and I chose to sort a new column by using the columns dropdown menu, I expect that this new column will be added as a sorted column while also retaining all previously sorted columns.

Context

I am trying to make the behavior consistent for the user when multipleColumnsSortingMode='always'. In these scenarios multiple columns will be sorted at once and work would be lost if those columns become unsorted.

Your environment

It is from the examples in the MUI docs https://mui.com/x/react-data-grid/sorting/#multi-sorting

Search keywords: sorting multi multipleColumnsSortingMode dropdown

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.