The ref to the element in the use:* function is missing some attributes

[neyrokach]

Describe the bug

If you set some attributes of an element via an expression ({ }), then this value will be missing in the ref in the use:* function. The problem is that the code in the expression is executed after the use:*function.

In the given example, the check() is executed for two inputs. For the first one the name is set from the props and output will be "Name: ". For the second one the output text is correct ("Name: Second input").

function check(ref) {
  console.log('Name: ', ref.name);
}

function Input(props) {
  return (
    <div style="display:flex;flex-direction:column;gap:1rem">
      <input type="input" name={props.name} placeholder="Message" use:check />
      <input type="input" name="Second input" placeholder="Message" use:check />
    </div>
  );
}

export default function App() {
  return <Input name="First input" />;
}

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-prrjc7?file=src%2FApp.jsx

Steps to Reproduce the Bug or Issue

https://stackblitz.com/edit/solidjs-templates-prrjc7?file=src%2FApp.jsx

Expected behavior

I assume that the execution of the function in use:* should be after execution of all expressions

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Google Chrome

Additional context

No response

[ryansolid]

This is a timing issue. Technically use: and ref happen at element creation but before apply reactive attributes, children or mounting. This is so they can be passed through to child elements as a stable reference. The recommended solution to this is typically to use onMount to ensure everything is present. Admittedly for use not waiting seems less valuable in most cases but this also makes it consistent with the rest of the lifecycle.

So this is by design but I can see why it isn't intuitive.