ref on custom components

[andreasremdt]

Hey, I am running into a weird problem with refs and custom components and would like to know if this is a bug or expected behavior.

See the demo on StackBlitz: https://stackblitz.com/edit/solidjs-templates-tdmeox?file=src/App.tsx

I have two input components, the first one is native, the second one a custom component that spreads its props. Both receive the same ref and print out the element in the console.

The problem is that while the first (native) input has all its properties such as id and type right from start, the second one doesn't. It seems like a generic default component is rendered at first and then gets its props applied.

I am trying to implement some form validation and require that all HTML attributes are already set when I access the ref, so if this is expected behavior, how would one work around that?

[milomg]

This is a quirk of how spreads work. In general, solid tries to reorder the expressions so that refs run last, but it doesn't do that for spreads right now. One solution would be to call register in an onMount after the other attributes have been added: https://stackblitz.com/edit/solidjs-templates-h4jehn

[yapus]

The link is outdated, would you be able to please post solution again, m.b. citing the code here?

[mdynnl]

One solution would be to call register in an onMount after the other attributes have been added:

it's just this

const register = (element: HTMLInputElement) => {
	onMount(() => {
		console.log(element.id, element);
	});
};