Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iOS Buttons with hints requires two taps #1435

Open
mrh1997 opened this issue Sep 17, 2024 · 2 comments · May be fixed by #1442
Open

iOS Buttons with hints requires two taps #1435

mrh1997 opened this issue Sep 17, 2024 · 2 comments · May be fixed by #1442

Comments

@mrh1997
Copy link

mrh1997 commented Sep 17, 2024

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
Copy link
Author

mrh1997 commented Sep 19, 2024 •
edited
Loading

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

sveltejs/svelte#13339

@shinokada
Copy link
Collaborator

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

mrh1997 added a commit to mrh1997/flowbite-svelte that referenced this issue Sep 22, 2024
@mrh1997
fix: themesberg#1435 Avoid double taps on buttons with tooltip on saf…
35927ae 
…ari iOS

Due to an Safari Issue the first "mouseenter" event will block
the "click" event. This can be worked around by using the
"pointerenter" instead.
mrh1997 added a commit to mrh1997/flowbite-svelte that referenced this issue Sep 22, 2024
@mrh1997
fix: themesberg#1435 Avoid double taps on buttons with tooltip on saf…
f69367d 
…ari iOS

Due to an Safari Issue the first "mouseenter" event will block
the "click" event. This can be worked around by using the
"pointerenter" instead.
@mrh1997 mrh1997 linked a pull request Sep 22, 2024 that will close this issue
Open
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: #1435 Avoid double taps on buttons with tooltip on safari iOS mrh1997/flowbite-svelte
2 participants
@shinokada @mrh1997