Field component doesn´t work well in SSR

[RomainLanz]

Description

Hey there! 👋🏻

The FieldInput component currently allows a slot, which is problematic because the <input> element is a void element, meaning it cannot have child elements or content according to the HTML specification (MDN).

Allowing a slot in the FieldInput component creates issues, especially during SSR (Server-Side Rendering), as the slot content is removed on the client side, leading to mismatches between the server-rendered HTML and the client-rendered HTML.

A similar issue exists with the textarea component, where a slot is being used inside the element. Like the <input> element, the <textarea> element should not contain a slot because its content is meant to be the text between the opening and closing tags, rather than child elements.

Allowing a slot inside a <textarea> also creates an SSR mismatch, as the content inside the slot gets removed on the client during hydration, causing inconsistencies between the server-rendered and client-rendered HTML.

You can see in the compiled code below that the slot is passed as a string:

return (_ctx, _cache) => {
  return openBlock(), createElementBlock("textarea", mergeProps({ ref: unref(autoresizeTextarea) }, unref(field).getTextareaProps(), {
    value: _ctx.modelValue,
    onInput: _cache[0] || (_cache[0] = (event) => emit("update:modelValue", event.target.value)),
    style: props.autoresize ? { resize: "none", overflow: "hidden" } : void 0
  }), "    <slot />\n  ", 16, _hoisted_1);
};

Related:

• Why does FieldInput allow a Slot? - causing SSR issue #3158
• Why does FieldInput allow a Slot? - causing SSR issue #3157

Link to Reproduction (or Detailed Explanation)

N/A

Steps to Reproduce

N/A

Ark UI Version

4.6.0

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[segunadebayo]

Can you share a reproduction for this? Having a way to test it helps