I am using react and have made a sidebar which is animated in and out of screen but absolute position and changing css right of div. Here is a sandbox for easy tweaking of code.
So when u click on blue box it should go out of screen by setting right to negative value and pink box should come out by setting right to 0. As you can see this is not working.
BUT
If you remove the whole useEffect code in popout.tsx then everything works as expected.
The useEffect code is responsible for focusing and blurring the text input on the sidebar depending on the isOpen state.
Thank You!
EDIT
If you want to see what is expected behavior please comment out the the whole useEffect in the file popout.tsx. That is the expected behavior pink box out input focused pink box gone input blurred.
The idea of whole thing is the that blue box would have click me text and pink box open due to that or using key bind. Both these action should focus on text input inside.
Some Extra Info
There is also a key bind if you press ctl + ~ the pink box comes out thats why i have to change the focus depending on isOpem state and not click events.
The problem is that, you need to use position: fixed instead of the position: absolute.