Dropdown undefined initialize postion

[hotrungnhan]

Thanks for taking the time to fill out this bug report!

Describe the bug Dropdown misplacement when page refresh . Due to undefined initlized position

To Reproduce Steps to reproduce the behavior:

<script lang="ts">
  import {theme} from '@/store/tailwind';
  import {links} from 'svelte-navigator';
  import {Icon} from '@steeze-ui/svelte-icon';
  import {Sun, Moon, Cog} from '@steeze-ui/heroicons';

  import {
    Dropdown,
    Navbar,
    NavBrand,
    DropdownHeader,
    DropdownDivider,
    Avatar,
    NavUl,
    NavLi,
    Button,
    DropdownItem,
    NavHamburger
  } from 'flowbite-svelte';

  const items: {
    name: string;
    path: string;
  }[] = [
    {
      name: 'Home',
      path: '/'
    },
    {
      name: 'About',
      path: '/about'
    }
  ];
</script>

<Navbar let:hidden let:toggle>
  <NavBrand href="/">
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      class="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span
      class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
    >
      Flowbite
    </span>
  </NavBrand>
  <div class="flex md:order-2">
    <Dropdown arrowIcon={false} inline={true}>
      <Avatar
        avatar={{
          src: 'https://flowbite-svelte.com/images/profile-picture-1.webp',
          size: 6,
          alt: 'My avatar'
        }}
        slot="label"
      />
      <DropdownHeader>
        <span class="block text-sm"> Bonnie Green </span>
        <span class="block truncate text-sm font-medium">
          [email protected]
        </span>
      </DropdownHeader>
      <DropdownItem>
        <div class="flex flex-row gap-2 justify-center">
          <Button on:click={() => theme.day()} outline={true}
            ><Icon src={Sun} class="w-4 h-4" /></Button
          >
          <Button on:click={() => theme.night()} outline={true}
            ><Icon src={Moon} class="w-4 h-4" /></Button
          >
          <Button on:click={() => theme.system()} outline={true}
            ><Icon src={Cog} class="w-4 h-4" /></Button
          >
        </div>
      </DropdownItem>
      <DropdownItem>Dashboard</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
      <DropdownItem>Earnings</DropdownItem>
      <DropdownDivider />
      <DropdownItem>Sign out</DropdownItem>
    </Dropdown>
    <NavHamburger on:click={toggle} />
  </div>
  <NavUl {hidden}>
    {#each items as item}
      <div use:links>
        <NavLi href={item.path} active={true}>{item.name}</NavLi>
      </div>
    {/each}
  </NavUl>
</Navbar>

<style lang="postcss">
</style>

[shinokada]

We updated the dropdown component. Can you check it and let us know.

https://flowbite-svelte.com/dropdowns

[hotrungnhan]

We updated the dropdown component. Can you check it and let us know.

https://flowbite-svelte.com/dropdowns

No change. I think this bug is on tooltip component , which dropdown are lay on

[shinokada]

We updated the component. Please check it and let us know.

[shinokada]

I close the issue for now. Thank you for your contributions.