themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS

Home Page:https://flowbite-svelte.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

iOS Buttons with hints requires two taps

mrh1997 opened this issue · comments

Describe the bug

With Svelte 5 the following Page requires two taps on iOS on the Button to run the on:click action (window.alert()).
The first tap shows the hint. The second one runs the action.

<div>
	<div>
		<div>
			<div>
				<Button on:click={() => window.alert('TEST')}>TEST</Button>
				<Tooltip>Das ist ein Tooltip</Tooltip>
			</div>
		</div>
	</div>
</div>

<script lang="ts">
	import { Button, Tooltip } from 'flowbite-svelte';
</script>

The problem does not occur:

  • on svelte 4
  • on non-iOS browsers
  • if one of the outer <div> is removed

Reproduction

see sample above

Flowbite version and System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 6.60 GB / 31.75 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.5.26 => 2.5.26
    flowbite-svelte: ^0.46.15 => 0.46.15
    vite: ^5.0.11 => 5.4.3

Looks like this is a "Safari for iOS" bug that needs to be worked around:

sveltejs/svelte#13339

If you are using Runes, please try https://svelte-5-ui-lib.codewithshin.com/.