Add service button issue (torrents module)

[pacjo]

Environment

Docker

Version

0.10.0

Describe the problem

When torrents module is enabled, clicking on some parts of the "Add Service" button will open torrent module's settings instead of opening "add service" popup. The affected area is mostly center.

Additional info

Video:

https://user-images.githubusercontent.com/56438628/188941400-9fb4d867-c30d-4e0b-b30a-8b47dd70e0d7.mp4

Please tick the boxes

• [X] You've read the docs
• [X] You've checked for duplicate issues
• [X] You've tried to debug yourself

[manuel-rw]

I can verify that I have this issue in 0.10 too. This was not introduced with the latest update from 0.9 and has probably been around in Homarr for quite some while.

[ajnart]

don't really know how it happens. What browser / os are you using ?

[pacjo]

don't really know how it happens. What browser / os are you using ?

Chrome on win10. I don't have this problem on Android (also chrome)

[manuel-rw]

So I've been trying to pin down the issue with this. I have a suspicion what the problem could be, but wasn't able to verify it yet.

My investigation

• Usually, Menu or Popovers require some sort of anchor element, to determine their position.
• The issue only seems to occur on the torrent module. There is not much special about this module.
• The issue occurs only occasionally on specific screen sizes. I verified that I got the issue on both Chrome, Firefox and Edge. I have the most issues with it on my touch laptop?

My suspicion I think, that the problem lies within this line: https://github.com/ajnart/homarr/blob/master/src/modules/moduleWrapper.tsx#L207

Why? I think this line causes the issue, because it acts as the anchor for the dropdown position. Lowercase components in React are quite unusual. But perhaps this library is also doing some funky useMemo / state stuff, which breaks the <Menu.Target/>? We could try to wrap the <motion.div> in a <div /> to verify this theory.

Weirdly, it almost never happens on my high end desktop pc, so I wonder if it has to do something with the CPU / IO load.

[ajnart]

@pacjo sorry for the late reply. Do you still have this issue happening on latest ? I have still not been able to replicate it

[ajnart]

So I've been trying to pin down the issue with this. I have a suspicion what the problem could be, but wasn't able to verify it yet.

My investigation

* Usually, Menu or Popovers require some sort of anchor element, to determine their position.

* The issue only seems to occur on the torrent module. There is not much special about this module.

* The issue occurs only occasionally on specific screen sizes. I verified that I got the issue on both Chrome, Firefox and Edge. I have the most issues with it on my touch laptop?

My suspicion I think, that the problem lies within this line: https://github.com/ajnart/homarr/blob/master/src/modules/moduleWrapper.tsx#L207

Why? I think this line causes the issue, because it acts as the anchor for the dropdown position. Lowercase components in React are quite unusual. But perhaps this library is also doing some funky useMemo / state stuff, which breaks the <Menu.Target/>? We could try to wrap the <motion.div> in a <div /> to verify this theory.

Weirdly, it almost never happens on my high end desktop pc, so I wonder if it has to do something with the CPU / IO load.

Might be the Menu target. I'll investigate it. It might be due to the absolute positioning breaking on slow JS loads. No clue

[pacjo]

Latest didn't fix it.

[manuel-rw]

Okay, thanks for confirming

[manuel-rw]

Ok, so I figured it out. Solution was actually pretty simple. I'll push a branch very soon. @pacjo would you be able to test out on a test docker image, to confirm that it was fixed?

[pacjo]

Sure, just let me know, when you're ready.

[manuel-rw]

Can you test, if this fixes it? I forgot that GitHub Actions workflows do not work with forks, so you'll have to clone the project and run it manually. Is this okay for you?

[pacjo]

I've cloned the project and it seems to run, but I can't access it from another device (my pc, as I run in on headless server).

is it the intended behavior? I've never used yarn before.

logs:

kamil@kronos:~/homarr$ HOST=192.168.1.13 yarn start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

kamil@kronos:~/homarr$

[manuel-rw]

Yes, those warnings are expected behavior and can be ignored. Would you be able to run it on the server where you normally run Homarr, if I build a docker image?

[pacjo]

Would you be able to run it on the server where you normally run Homarr, if I build a docker image?

Sure

[manuel-rw]

Done. Make sure that you pull this image: https://github.com/ajnart/homarr/pkgs/container/homarr/45925518?tag=test-absolute-position-torrents-menu

[pacjo]

That fixed it.