Programmatically open Dialog

[DamienPace15]

I am trying to open a dialog on click.

This is the section where the NewModal component is being called.

<script lang="ts">
	*removed stuff*
	function openModal(item: ContentRecommendations) {
		console.log('Opening modal with item parent content:', item);
		selectedItem = item;
		showModal = true;
	}
</script>

<div class="content-grid">
		{#each $contentItems as item}
			<div class="content-card" onclick={() => openModal(item)}>
				<img src={item.image} alt={item.title} />
				<span class="title">{item.title}</span>
			</div>
		{/each}
	</div>

	<AddItem bind:showAddItem></AddItem>
	<NewModal bind:item={selectedItem} bind:showModal></NewModal>

NewModal.svelte

<script lang="ts">
	*imports*

	let { item = $bindable(), showModal = $bindable() } = $props<{
		item: ContentRecommendations;
		showModal: boolean;
	}>();

	let dialogOpen = $state(showModal);
</script>

<Dialog.Root bind:open={dialogOpen}>
	<Dialog.Portal>
		<Dialog.Overlay />
		<Dialog.Content class="sm:max-w-[425px]">
			<Dialog.Header>
				<Dialog.Description>
					Make changes to your asset here. Click save when you're done.
				</Dialog.Description>
			</Dialog.Header>
			<div class="grid gap-4 py-4">
				{#each Object.entries(item.contentValues) as [key, value]}
					<div class="grid grid-cols-4 items-center gap-4">
						<Label for="id" class="text left">{formatCustomerFacingKey(key as keyValues)}</Label>
						<Input
							id="values"
							value={formatValue(key as keyValues, value as string)}
							class="col-span-3"
						></Input>
					</div>
				{/each}
			</div>

			<Dialog.Footer>
				<Button type="submit">Save changes</Button>
			</Dialog.Footer>
		</Dialog.Content>
	</Dialog.Portal>
</Dialog.Root>

I have also used Dialog.Trigger in the second block and it still doesn't open.

Whenever I click the content-card div it doesn't show the Dialog at all.

I was able to follow the instructions and actually have something show up when it wasn't in a component but once I moved it into a new folder it just wont show.

Am I doing this completely wrong?

Have followed the following:

• https://www.bits-ui.com/docs/components/dialog
• https://www.shadcn-svelte.com/docs/components/dialog

I am new to frontend development so sorry if this is bad

[shyakadavis]

Hey, @DamienPace15 shouldn't this work?

foo.svelte

<script lang="ts">
 import * as Dialog from "$lib/components/ui/dialog/index.js";

let { open } : { open: boolean } = $props();
</script>
 
<Dialog.Root bind:open>
 <Dialog.Content>
  <Dialog.Header>
   <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
   <Dialog.Description>
    This action cannot be undone. This will permanently delete your account
    and remove your data from our servers.
   </Dialog.Description>
  </Dialog.Header>
 </Dialog.Content>
</Dialog.Root>

+page.svelte

<script lang="ts">
 import Foo from './foo.svelte'

 let open = $state(false);
</script>

<Foo {open} />

[DamienPace15]

It ended up being something to do with tailwind and css. Wasted so many hours 😂

Thanks for the suggestion, I will try this and see if it works this way