Why does FieldInput allow a Slot? - causing SSR issue

[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.

I am happy to submit a pull request if you allow me to remove the slot.

Link to Reproduction (or Detailed Explanation)

N/A

Steps to Reproduce

N/A

Ark UI Version

4.5

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[RomainLanz]

It seems that 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);
};

[segunadebayo]

It allows a slot because of composition via the asChild prop. You can read more about it here:
https://ark-ui.com/react/docs/guides/composition

<Field.Input asChild>
   <input />
</Field.Input>

Perhaps we should focus on resolving the SSR issue instead.

[RomainLanz]

Perhaps we should focus on resolving the SSR issue instead.

Do you have any thoughts on how we might approach that?

[segunadebayo]

We should start with a reproduction first.

Perhaps, also using the useFieldContext directly might help you quickly get around it.