Scroll Position Getting Reset On Hover with DropButton

https://user-images.githubusercontent.com/60210530/190706941-6ddc8eaf-36d6-4d0f-bc66-f5e95815e67f.mov

When we want specific styles on a row in drop content, we monitor it using useState. When we update the background color for a row based on hover, the component re-renders (as bg color changes) & the scroll position gets reset.

Attached a recording where I reproduced the issue.

We could apply styles via pseudo class :hover but as per our UX requirement we have complex states to maintain which can only be handled using useState & its related hooks. eg., const chooseBackground = () => { if (item.selected && !newOptionSelected && !item.disabled) { return internalColors.lightSlate; } if (selected === index && hover) { return internalColors.solitude; } if (activeIndex === index || (item.active && activeIndex === -1)) { return internalColors.lightSlate; } return 'none'; };

[jcfilben]

Above the place function there is a comment that makes me think that place should only be called onMount and when the window is resized. If you add a console.log within place you can see that with DropButton it is getting called more frequently. If we can ensure that the function is really only called onMount and onResize then I think that will solve our problem. Another potential route is calling place(true) only when using Drop within a DropButton. However the first option seems to better align with the original intent of the code and may be a better solution.

[Isaac-alencar]

Yup, I was just finishing a issue on FileInput haha, now I’ll grab to this one!