Changes of height when changes are directly from js

[Enkratia]

Describe the bug OS sometimes doesn`t react on changes of height when changes are directly from js.

To Reproduce I have example, but you probably can check it yourself? Or i will send it later.

Expected behavior May be this is expected behaviour? but it would be cool to see this feature in OS.

Environment Environment: React Js, but the same problem with vanilla js was several months ago.

Additional context Thank you for your work.

[Enkratia]

My way to fix it is to add eventListener to element, whose height is changing from js. Click on it after 100ms delay since height is changed. The function is:

const onFixOSBag = (e) => {
    const mockElement = document.createElement("span");
    mockElement.setAttribute("style", "position: absolute");
    e.currentTarget.appendChild(mockElement);
 };

This way OS is becoming "aware" that something happened in child elements and recheck their heights. But this is not best practice to do.

[KingSora]

Good day @Enkratia

It would be great to have an example for this.. usually changes should be detected by the mutationobserver.. but depending on how you do things they might not be picked up or ignored by it.

A better fix / workaround would be to call the update function instead of inserting elements.

[Enkratia]

Thanks for quick answer

Update: problem is not simply about changes of height from js, it`s about changes of height from js in nested OS. (sidebar menu with OS + filters inside of it also have OS)

Real example of what i see and what i mean, reproduction:

1. open https://enkratia.github.io/catalog.html
2. press F12 (to open console)
3. press Ctrl+ Shift+ M (to open toggle device toolbar)
4. choose on top of window: "Dimensions: Samsung Galaxy S8"
5. click on green button "Show filters"
6. close opened tab (first one)
7. click on button "Price", then (order i important!) on button "Brand"

What expected: Part of content is not visible, no scroll, no OS

Interesting moment: If to change the order of clicking ("Brand" > "Price" instead of "Price" > "Brand"), everything works fine. OS is working.

P.S.1: May be it's not problem of OS(i myself do something wrong), or this is expected behaviour, i just want to know what it is. I hope reproduction is succeded

P.S.2: update function change nothing

[Enkratia]

My bad, i`ve used flex-basis 100%, instead of flex-grow: 1 all the time. This is the reason. Thank you and sorry that i took your time.

[KingSora]

@Enkratia Glad you found the issue :)

In the future try to use the update() function to trigger an update with cached values, and if that isn't working update(true) to force an update without cache. If neither of those are working its very likely either a bug of and problem on your side.