Something seems to have changed recently and I cannot pinpoint what. In my reactive app I have a few drop downs that use the Custom data type to display an icon next to the label. However, when opening the drop down the page always scrolls down as to place the drop down at the very top of the view port. I thought perhaps I had added or modified some styling in the app, but I created a new blank app from scratch with only the drop down and the behavior is the same. This does not occur with regular "text" drop downs, as I have found during testing the custom type causes the app to create the nodes on each click, and then sometime during the .show() call the page scrolls up (hard to debug since is uses minified code). Below is a screen shot of the before and after for both drop downs, as you can see when you click to open the one with custom data type the page scrolls for no reason.
Do note, I am not referring the actual list values of the drop down having been scrolled, the actual page itself scrolls so that the drop down is at the top of the viewport, in this case its hidden behind the header, but still at the top.
Does anybody have insight on why this is the behavior of the custom drop downs? Is this due to the fact that it creates and appends the drop down elements on click, causing a DOM reflow or something similar?
Hi,
I also had problems with the component in this new OS update. In the meantime I have already opened a support case, reporting this problem with dropdowns and they are already solving it.
Cheers
Specifically I found that for Custom data type dropdowns the js file contains this line to scroll the selected element into view
My solution was to create a modified version of this with an altered script that does not include this section (if your drop-down is so large values go off the screen, you should be using a search dropdown). We have a separate Library module for reactive because it seems we have to keep modifying existing widgets to work properly, sigh