How to get a Button's element reference ?

[tmarnet]

Hi 👋

I'm trying to get a reference to the HTML button when using the Button component.

If I were to use a native button I'd simply bind:this={buttonRef} to get access to a reference to my HTML button.

I wasn't able to achieve this using the Button component, any ideas ?

[Stadly]

I have the exact same issue. Is this possible, @huntabyte?

[shyakadavis]

Hi;

Thought this was implemented in huntabyte/bits-ui#244, was it not?

[Stadly]

With <Button bind:el={buttonRef}>, buttonRef is undefined.

Looking at bits-ui, bind:this={el} is only used when builders && builders.length. Maybe that's the problem?

[Stadly]

I've created a PR to fix it: huntabyte/bits-ui#473

[ttytm]

Again not possible with the next version?

[tmarnet]

It is possible using bind:ref, see https://next.bits-ui.com/docs/ref

[ttytm]

Thanks for sharing the reference.

Though I cannot use it with the default shadcn-svelte@next components unless I remove the fallback value ref = $bindable(null) -> ref = $bindable().

If i keep it and try to use:

	let searchElem = $state<HTMLInputElement>();
...
	<Input
		bind:ref={searchElem}

I'm getting:

Uncaught (in promise) Svelte error: props_invalid_value
Cannot do `bind:ref={undefined}` when `ref` has a fallback value

Works fine with the change mentioned above.

Should it be that way?

[shyakadavis]

@ttytm you need to provide a null default value.

[ttytm]

@shyakadavis so I need to do below? Which would work when i keep the component as it is.

let searchElem = $state<HTMLInputElement | null>(null);

If I don't bother you. Why do the components use ref = $bindable(null) instead of ref = $bindable() in the first place?

[shyakadavis]

No worries. This should hold the answer, (if not, follow the entire thread, they go over it): #1519 (comment)