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 is false 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>