iOS Buttons with hints requires two taps
mrh1997 opened this issue · comments
mrh1997 commented
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
mrh1997 commented
Looks like this is a "Safari for iOS" bug that needs to be worked around:
Shinichi Okada commented
If you are using Runes, please try https://svelte-5-ui-lib.codewithshin.com/.