Collapse component with no 'style=' tag crops Dropdown menus

[MarkBFamFour]

Hi,

I have encountered an issue with several instances of the Collapse component (Collapse, Accordion etc.) where, is the collapse is not open at the time the component is rendered, if it is subsequently shown, and Dropdown menus in it are truncated but the bottom of the element and the Dropdown 'auto-direction' popup mechanic (that for e.g. opens the menu upwards if it's at the bottom of the div) doesn't work.

If I convert the element to conventional 'bootstrap' code it works okay and when I show a collapse the menus work fine.

Example:

This results in the menu being opening 'down' and clipping off the lower part

<script lang="ts">
    import Fa from 'svelte-fa/src/fa.svelte';
    import { faLink, faPlusSquare, faToolbox } from '@fortawesome/free-solid-svg-icons';
    import { Button, ButtonDropdown, Collapse, DropdownItem, DropdownMenu, DropdownToggle } from 'sveltestrap';

    let isOpen: boolean = false;
</script>

<Button color="primary" on:click={() => (isOpen = !isOpen)} class="mb-3">
  Toggle Collapse
</Button>

<Collapse {isOpen}>
    <div>
        <table class="table">
            <tr>
                <td>
                    Some Content
                </td>
                <td>
                    More Content
                </td>
                <td>
                    <ButtonDropdown size="sm">
                        <DropdownToggle color="{ true ? "secondary" : "danger"} " caret>
                            <Fa color="{ true ? "" : "white"}" icon={faToolbox}/>
                        </DropdownToggle>
                        <DropdownMenu>
                            <DropdownItem header>Tools</DropdownItem>
                            <DropdownItem class="add-note"><Fa icon={faPlusSquare}/> Add Note</DropdownItem>
                            <DropdownItem class="add-link"><Fa icon={faLink}/> Link to...</DropdownItem>
                            <DropdownItem divider />
                            <DropdownItem>Foo Action</DropdownItem>
                            <DropdownItem>Bar Action</DropdownItem>
                            <DropdownItem>Quo Action</DropdownItem>
                        </DropdownMenu>
                    </ButtonDropdown>
                </td>
            </tr>
        </table>
    </div>
    <br><br><br>
</Collapse>

If I change the <Collapse {isOpen}> to <Collapse {isOpen} style="background-color: lightblue"> it fixes the issue.

What's happening?!

Small further investigation:

Even changing it to <Collapse {isOpen} style=""> fixes it completely. It's like something in the styling is breaking or changing if I don't feed it a string?

[MarkBFamFour]

I think I found what the problem is:

part of Collapse.svelte

<div
    style={navbar ? undefined : 'overflow: hidden;'}
    {...$$restProps}
    class={classes}
    in:collapseIn={{ horizontal }}
    out:collapseOut|local={{ horizontal }}
    on:introstart
    on:introend
    on:outrostart
    on:outroend
    on:introstart={onEntering}
    on:introend={onEntered}
    on:outrostart={onExiting}
    on:outroend={onExited}
  >
    <slot />
  </div>

So when you do not specify a style= tag and are not using the Collapse as a navbar it changes to style="overflow: hidden" which cuts off the menu, as it's inside the <div></div> and is technically overflowing.

If I remove that style from the Component source code then the dropdown it works okay.

I think when you specify style="" when using the component the use of {...$$restProps} adds a second style= tag that overrides the first and wipes it out, meaning the overflow content is no longer being hidden.

So this isn't a bug maybe? Or it's a really weird corner-case?

Well at least we know now! :D