on:click inside Modal doesn't work due to Modal's tabIndex="-1"

[mlawlerau]

Describe the bug

I am using the PopOver from @rgossiaux/svelte-headlessui ala this searchable values popup youtube video: https://www.youtube.com/watch?v=BgWrVZ2hzAU
The on:click to select the matched items via table rows is not working for me because I am hosting the popover inside a flowbite Modal component.
I debugged and tracked it down to the tabIndex="-1" on the root div rendered by Modal.svelte.

Sorry I dont understand why but it's the single thing that causes the on:click to fire or not fire.
With the tabIndex="-1", my on:clicks on my s are ignored. With it removed, we are all good.

Happy to supply a PR to make the tabIndex element optional via a prop but would like a steer on most acceptable approach ? For now, I have forked Modal.svelte into my project and use it with that single attribute removed.

Reproduction

Stackblitz template is 404 not found.

Flowbite version and System Info

System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 506.08 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: 8.3.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.1
  npmPackages:
    @sveltejs/kit: ^2.5.18 => 2.5.18 
    flowbite-svelte: ^0.46.14 => 0.46.14 
    svelte: ^4.2.18 => 4.2.18 
    vite: ^5.3.3 => 5.3.3

[shinokada]

Please use this template for the reproduction. Thank you.