Dialog is capturing focus events and stopping them from being propogated #755
Comments
huntabyte
added
triage
|
I need to investigate whether this issue persists with Svelte 5 and bits-ui@next before working out a way to expose the ability to override this. |
huntabyte
added
bug
|
After some investigating, this issue is occurring because the Editor: <script lang="ts">
import { Canvas, Textbox } from "fabric";
let { containerRef }: { containerRef: HTMLElement } = $props();
let canvasRef: HTMLCanvasElement;
$effect(() => {
if (!containerRef || !canvasRef) return;
let canvas = new Canvas(canvasRef, {
width: 300,
height: 300,
});
canvas.add(
new Textbox("hello", {
top: 10,
left: 10,
width: 100,
color: "black",
fill: "white",
textBackgroundColor: "black",
editable: true,
hiddenTextareaContainer: containerRef,
})
);
canvas.renderAll();
});
</script>
<canvas bind:this={canvasRef}></canvas>Dialog <script lang="ts">
import { Dialog } from "bits-ui";
import Editor from "./editor.svelte";
let containerRef: HTMLElement = $state(null!);
</script>
<div class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Dialog.Root>
<Dialog.Trigger class="rounded-md border border-black p-2">Open dialog</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 bg-black/80" />
<Dialog.Content
bind:ref={containerRef}
class="fixed left-1/2 top-1/2 z-50 h-[200px] w-[200px] -translate-x-1/2 -translate-y-1/2 bg-white"
>
<Editor {containerRef} />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
not sure if this is a bug but it's making it impossible to use dialogs with fabricjs. when i try to edit a textbox object they key events are not getting passed to the canvas.
In the reproduction i've linked below. you should be able to open the dialog and click on the piece of text to edit it. instead the focus is being hijacked.
i've identified this listener as the culprit.
focusIn listener. which comes from melt-ui
is there any way to work around this?
thanks in advanced
Reproduction
https://stackblitz.com/edit/github-shpwk7-gzthpa?file=src%2Froutes%2F%2Bpage.svelte
Logs
System Info
System: OS: Linux 5.0 undefined CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 0 Bytes / 0 Bytes Shell: 1.0 - /bin/jsh Binaries: Node: 18.20.3 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm npmPackages: @sveltejs/kit: ^2.0.0 => 2.6.3 bits-ui: 0.21.16 => 0.21.16 svelte: ^4.2.8 => 4.2.19Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: