21
Views
2
Comments
[Customizable Dropdown] Scrollbar on component reset on DOM update
customizable-dropdown
Reactive icon
Forge asset by José Pedro Proença
Application Type
Reactive

Not sure if this is able to be fixed or not, but I have noticed recently that the scrollbar resets every time something changes anywhere in the DOM.  Let me back up:

I have an application where a dropdown menu appears at the top of a grid.  In the dropdown I have a list of items that correspond to possible fields to show up in the grid. There are enough fields possible for the grid that the dropdown menu needs a scrollbar. If I scroll down and toggle a field as visible/not visible, the grid is then updated to display or un-display the particular field.

Any time I do this, the dropdown scrollbar resets and goes to the top. If a user needs to toggle several fields at a time, they need to scroll down after each selection, making the process quite tedious. If the action is NOT executed to modify the grid to display or un-display the field in the grid, the scrollbar does not reset. I almost is like the entire DOM is refreshed, instead of just the grid.

I love this component because it doesn't require an entity and the placeholder can be used for a variety of different types of items. I don't think this behavior has happened since the beginning, that it's relatively new, but I can't be sure.

Thank you in advance!

UserImage.jpg
Nino Gachechiladze

Hello,

I think scroll is re-rendered after rendering the grid. If you can seperate grid and dropdown and your logic can work with them in different layout parts, it will solve the problem. if not I think what you can do is to make your own costumized dropdown depending on this forge element but also save scroll position before updating the grid within the script and ensure that it will restores scroll when dropdown is open.

2019-04-25 14-57-49
Mike Neyman

Thank you for your response. I'm not quite sure what you mean by "separate" grid and dropdown. The grid is its own block and the dropdown is its own block, but they are obviously on the same webscreen. The grid is just being updated by a boolean flag that is hiding/unhiding using a "display:block;" or "display:none;", but no data refresh is taking place at all.

I thought about saving scroll position as well, but I'm not sure exactly yet when the scroll re-rendering is happening in the flow. I don't want to restore the scroll too early. I will go down this path though if I can't get any separation to work


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.