Table and Dropdown are used together, Dropdown cannot disappear automatically

[ltybenet]

Summary

After the data list changes, the Dropdown does not disappear

Basic example

<script>
    import {
        Table,
        TableBody,
        TableBodyCell,
        TableBodyRow,
        TableHead,
        TableHeadCell,
        Button,
        Dropdown,
        DropdownItem,
        ToolbarButton,
        DropdownDivider
    } from 'flowbite-svelte';
    import { DotsHorizontalOutline, DotsVerticalOutline } from 'flowbite-svelte-icons';
    let alldata = [
        { name: 'a', value: '1' },
        { name: 'b', value: '2' },
        { name: 'c', value: '3' }
    ];
    function deletedata() {
        alldata = [
            { name: 'a', value: '1' },
            { name: 'b', value: '2' }
        ];
    }
</script>

<Table divClass="overflow-x-auto">
    <TableHead>
        <TableHeadCell>name</TableHeadCell>
        <TableHeadCell>value</TableHeadCell>
        <TableHeadCell>edit</TableHeadCell>
    </TableHead>
    <TableBody tableBodyClass="divide-y">
        {#each alldata as d}
            <TableBodyRow>
                <TableBodyCell>{d.name}</TableBodyCell>
                <TableBodyCell>{d.value}</TableBodyCell>
                <TableBodyCell>
                    <DotsHorizontalOutline class="dark:text-white" />
                    <Dropdown>
                        <DropdownItem
                            on:click={() => {
                                deletedata();
                            }}>delete</DropdownItem
                        >
                    </Dropdown>
                </TableBodyCell>
            </TableBodyRow>
        {/each}
    </TableBody>
</Table>

Motivation

How to make Dropdown disappear after data changes in Table?

There is also a table problem

When divClass="overflow-x-auto" is not used, the table will have a scroll bar

[shinokada]

Try this:

let dropdownStatus = false
function deletedata() {
  alldata = [
      { name: 'a', value: '1' },
      { name: 'b', value: '2' }
  ];
}

// more code
{#if dropdownStatus}
<DotsHorizontalOutline class="dark:text-white" />
  <Dropdown>
    <DropdownItem
       on:click={() => {
       deletedata();
      }}>delete</DropdownItem
  >
 </Dropdown>
{/if)

[ltybenet]

Thanks for reply. If dropdownStatus isfalse initially, the user will not be able to see the button, so it must be true initially. According to the above reply, I changed the code. But the problem still exists.

It would be best if the Dropdown disappears automatically after clicking the DropdownItem option I tried using Programatic_open/close, but it is not very friendly to table

<script>
    import {
        Table,
        TableBody,
        TableBodyCell,
        TableBodyRow,
        TableHead,
        TableHeadCell,
        Button,
        Dropdown,
        DropdownItem,
        ToolbarButton,
        DropdownDivider
    } from 'flowbite-svelte';
    import { DotsHorizontalOutline, DotsVerticalOutline } from 'flowbite-svelte-icons';
    let dropdownStatus = true;
    let alldata = [
        { name: 'a', value: '1' },
        { name: 'b', value: '2' },
        { name: 'c', value: '3' }
    ];
    function deletedata() {
        dropdownStatus = false;
                // Logic to remove when pretending here
        alldata = [
            { name: 'a', value: '1' },
            { name: 'b', value: '2' }
        ];
        dropdownStatus = true;
    }
</script>

<Table>
    <TableHead>
        <TableHeadCell>name</TableHeadCell>
        <TableHeadCell>value</TableHeadCell>
        <TableHeadCell>edit</TableHeadCell>
    </TableHead>
    <TableBody tableBodyClass="divide-y">
        {#each alldata as d}
            <TableBodyRow>
                <TableBodyCell>{d.name}</TableBodyCell>
                <TableBodyCell>{d.value}</TableBodyCell>
                <TableBodyCell>
                    {#if dropdownStatus}
                        <DotsHorizontalOutline class="dark:text-white" />
                        <Dropdown>
                            <DropdownItem
                                on:click={() => {
                                    deletedata();
                                }}>delete</DropdownItem
                            >
                        </Dropdown>
                    {/if}
                </TableBodyCell>
            </TableBodyRow>
        {/each}
    </TableBody>
</Table>