We Keep Coding

Clicking component inside renderHeader prop for MUI Data Grid Pro changes the sortModel

I'm using Material UI DataGridPro component to build a React Js app.
I want to create a custom filtering.
The red box in the image below is an IconButton for the filtering view and the blue box is for the column showing/hiding view.
I want to change the behavior of the custom filtering view.
If the filter icon is clicked, then the DataGridPro header will show some Select and TextField components as the filter fields like this image below.
If we click one of the Select and TextField components, the Data Grid Pro component will trigger the onSortModelChange prop to change the sortModel value like this image below.
So now the Data Grid Pro component is sorted based on the column.
Here is the conditions I want:
if we click one of the Select and TextField components inside the Data Grid Pro header, the Data Grid Pro will not trigger the onSortModelChange prop which means that the sortModel value is not changed
Here is the playground: https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js
I have tried to add sortable: false for every column but it will not show the arrow icon inside the Data Grid Pro header and prevent the column to be sorted. That's not what I want.
I also have added sortModel and onSortModelChange props for the Data Grid Pro component to control the sortModel value but it hasn't worked.
So, what's the solution for this case?

The MUI X team told me from the Github issue here https://github.com/mui/mui-x/issues/3655#issuecomment-1015263995 that the solution is very simple.
Just add event.stopPropagation() for the onClick prop of each TextField and Select component.
onClick={(event) => event.stopPropagation()}

Is there a way to put checkboxes inside a Select with antd?

I'm looking for a way to put checkboxes in an antd Select, instead of the icon displayed when an item is selected.
I have tried to use the menuItemSelectedIcon prop, but it only displays the Checkbox when the item is selected, which is not what I'm looking for.
I'm trying to display a checkbox that is checked when the item is selected, and isn't when the item isn't.
I'm kind of looking for an equivalent of the "treeCheckable" prop available for the TreeSelect.
Is there a way to put checkboxes inside a (simple) Select ?

use menuItemSelectedIcon this prop... u can read abut it in Api section of Select component. Then, do same style in options focus, active & select selector. style should be such as the icon that you will use became different color when it is focused, active or select. you can change options global classname when it will be selected. By doing this, it will look like the checkbox is working but behind the scene it's just a icon of checkbox which will change style .

ng-select multiple checkbox selection

When there are multiple checkbox options inside dropdown I don't want them to apply on each selection.
I would like to do like this : After checking few options, user has to click the apply button inside the dropdown then the options will get selected. If user doesn't click apply his selection will get reset.
Also I would like to show the selected option like this, instead of showing all the options inside the dropdown. If there is more than one option selected user will se (+1 other) or anything other text
The versions I'm using:
Angular Version: 7.3.7,
Ng-select Version:2.20
Can anyone help?

React Select controlled props menuIsOpen no longer clickable menu

I have been struggling with programatically opening/closing a React-Select component while still keeping the normal click functionality of the select element.
I needed to programatically open the select via JavaScript, which I have working using the menuIsOpen property.
I am not able to toggle the property isOpen on a click event of the closed select though.
First I tried adding a click event to the parent, but that overrides onChange event when the menu is open and an option is selected.
Here's an example of the problem I'm facing:
https://codesandbox.io/s/kmplx9yxl3?module=/example.js
I would like to still be able to click the select (name or arrow) to toggle open/close the dropdown, and keep the checkbox toggle functionality.
If anyone has any advice on what I can do to add the click event but still keep the functionality using menuIsOpen prop, that would be greatly appreciated!

<Select ...
onChange={() => this.setState({ menuIsOpen: false })}
onFocus={this.toggleMenuIsOpen}/>
At the end of the twenty-first line you put a double semicolon.

Change default behavior on click for jstree

I am using jstree to create a tree without checkboxes. In such a tree a click selects one node of the tree and deselects all others. To select multiple nodes one has to do ctrl + click (as examplified by the jstree demo). Is there a way to change this default to the more similar to checkbox default, which is click to select, click again to deselect?

If you're ok with using checkboxes and your only reservation is the dependence on one another, try using the checkboxes plugin but set "three_state" to false.
From JSTree:
$.jstree.defaults.checkbox.three_state: a boolean indicating if checkboxes should cascade down and have an undetermined state. Defaults to true.