Collapsable regions are not properly initialized when in collapsed state

[ReinVelt]

Framework7's Range slider components don't initialize properly when they're inside collapsed TreeviewItems.
When the group is initially collapsed:

• The Range component can't measure its container width (it's 0 or hidden)
• The slider gets initialized with wrong dimensions
• When you expand the group, the slider is broken - the knob doesn't move correctly or returns NaN values

Current state:
opened={true || !control.meta.collapsed /* buggy, if its closed some widgets like sliders do not work properly */}

[ReinVelt]

Previous Attempts:

• We tried forcing all groups to opened={true} (defeats the purpose of collapsing, but works ok)
• We tried lazy initialization with resize events (works partly)
• We tried {#key} blocks to force re-rendering (no solve)
• We added openedGroups tracking to only render content after first open

[psy0rz]

Maybe as a hack: start forced open with an extra variable:

opened={loading || !control.meta.collapse}

And when ready make loading false.

The problem also is that ledders async nature means new controls can be added any time so its never really done “loading” in that sence.

[ReinVelt]

I made a fix that loads everything expanded, so all subitems can initialize properly, the same as how it works now. Then after 300ms the initialized sections are collapsed with the proper settings. It seems to work fine here. I made a separate branch for local testing.

[ReinVelt]

<script lang="ts">
    import ControlValueUI from "./ControlValueUI.svelte"
    import {BlockHeader, Checkbox, Toggle, TreeviewItem} from "framework7-svelte"
    import ControlGroup from "../../ledder/ControlGroup.js"
    import ControlColorUI from "./ControlColorUI.svelte"
    import ControlInputUI from "./ControlInputUI.svelte"
    import ControlSwitchUI from "./ControlSwitchUI.svelte"
    import ControlSelectUI from "./ControlSelectUI.svelte"
    import ControlRangeUI from "./ControlRangeUI.svelte"
    import { onMount, setContext } from 'svelte'

    export let controlGroup: ControlGroup
    export let path: Array<string> = []
    export let onChanged: (path: Array<string>, values: {}) => void

    let initialized = false
    let rangesInitialized = 0
    let totalRanges = 0
    
    // Count total Range controls in this group and subgroups
    function countRanges(group: ControlGroup): number {
        let count = 0
        for (const control of Object.values(group.meta.controls)) {
            if (control.meta.type === 'range') {
                count++
            } else if (control.meta.type === 'controls') {
                count += countRanges(control)
            }
        }
        return count
    }
    
    totalRanges = countRanges(controlGroup)
    
    // Provide context for Range components to notify when ready
    setContext('notifyRangeReady', () => {
        rangesInitialized++
        if (rangesInitialized >= totalRanges && !initialized) {
            initialized = true
        }
    })
    
    // Reactively compute opened state
    $: getOpened = (control: ControlGroup) => !initialized || !control.meta.collapsed

    onMount(async () => {
        // Fallback: if no ranges or they don't initialize, collapse after 500ms anyway
        setTimeout(() => {
            if (!initialized) {
                initialized = true
            }
        }, 500)
    })
</script>

[ReinVelt]

But i am not sure...i broke ledder before with this issue...needs more testing..

[ReinVelt]

If it breaks thing then i will undo/repair....but it works at my computer

[ReinVelt]

Reopened the bug because it is a tricky one. Needs more testing by others (and confirmation it is fixed) before closing

[psy0rz]

I...but it works at my computer

you did the famous quote :D

[ReinVelt]

It seems to work in the Fishtank modules. In that module i put all sections to collapsed state. They all listen nice. Only Background image section will not collapse for strange reasons.