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()}

While selecting text inside a react-rnd, and if selection goes out of the draggable component, the selection changes

I implemented a draggable textarea using react-rnd by having the textarea component inside of the react-rnd component. Now when I try to select the text inside the textarea by using the cursor and if I accidentally go out of the react-rnd component, the selection changes.
The problem is illustrated in the gif image below. Here, I try to select the text from 'o' and go in the reverse direction and when I go out of the textbox, the selection changes and everything after that 'o' letter is selected. How to retain the original selection 'hello' in this case even when I go out of the react-rnd component.
The problem does not occur if I take the textarea out of the draggable component. I am struck with this issue for more than 2 days and I am yet to find a solution for this.
I created the replica of my issue in the below codesandbox.
https://codesandbox.io/s/lucid-sky-bl33e?file=/src/App.js

Since the there is a problem in user selection, You can add a copy or select the text button for that text area.
See the following website for implementing that button: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard

how to animate when string interpolation value is changed

I have one parent component and child component. I pass value to child component from parent component using #Input(). Now when value will changed from parent , child component will get changed value.
My question is when Input() changed , How to animation those value.
parent-component
<div>
<child [totalPrice] = "price" />
</div>
child-component
<div>
{{ totalPrice }}
</div>
Now, Value in {{ totalPrice }} is changed from parent, and for each changed I wants to animate over screen for indication that something has changed from previous state. How can I do this in angular?
EDIT
Demo on this Stackblitz LInk
above I applied angular animation :enter and :leave. But it works only first time when we selects check-box first time. Second time when value changes, animation is not working.

Fiddled a bit with your stackblitz:
https://stackblitz.com/edit/angular-ivy-2atj3s?file=src%2Fapp%2Ftotal-price%2Ftotal-price.component.html
I have a control boolean that I set on value change (the Input will only fire on distinct changes). I reset it with a slight timeout upon fade in done (#myTrigger.done with stateFrom : stateTo check). Still rough, but generally works.
(If you want something like a checkbox as the input, you should probably make them exclusive.)

how can I Re-position after editing a table value in React?

There is an UI I have created using React. There are two text fields to enter value, after entering and saving those values will be populated in a table below the two fields(we are using antd for designing).
However when I click a single record in the table and click edit in that particular record data from that record will be populated to the above mentioned text fields. When this happens I want my app to scroll up and show those two text fields which are ready to be edited.
But currently it stays at the same position after clicked edit, without scrolling up and showing two text fields. Here's an image descripting my experience

Check this answer to find how to control srollTop: https://stackoverflow.com/a/55184755/2360631
But I don't think it's a good idea, maybe you can consider to freeze the edit area otherwise when you finish edit you may need to scroll back again...

Basically you want to set focus to some component after a re-render.
To refer to a particular component, use react refs
make a react ref of whatever you want to set focus to and assign it as a ref prop
constructor() {
super();
this.foo = React.createRef();
}
componentDidUpdate() {
this.foo.current.focus();
}
<Bar ref={this.foo}> .... </Bar>
foo is the name of ref
Bar is the component you want to set focus to
in your case it can be a parent of both input fields or any one of the input fields

Is it possible to hide/disable areas in ImageMapster?

I've created an image map using the code:
$('img').mapster({
staticState: true
})
All areas are selected at once and visible. Is there any way, any method I could hide/disable some areas so that they wouldn't be visible ? I would like to filter areas on some conditions.
I know that I can remove 'area' tag or href atribute from javascript level and then call the above code once more (once again recreate imagemapster) but is there any more elegant and smarter way ? Maybe there is some build-in plugin solution but I couldn't find that.
Thank you for any help.
Kind Regards
Marcin

I suggest you to change to
$('img').mapster({
selected: true,
isSelectable: false, // can't change of state by simple click
isDeselectable: false, // can't change of state by simple click
})
you can still bind the onClick callback on all the areas.
once you decide which areas you don't want, you can set the individual state via
$("#id_of_area").mapster('set',false);
or from the map id
$("img").mapster('set',false,'key or string of keys to deselect');
it seems staticState is just for show, and doesn't set everything to a selected state... ( I tried some combinations and had weird results like making it darker like on selected+highlight)
Something like this http://jsfiddle.net/Wvzgj/529/