cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.73k stars 74 forks source link

SolidStart - <Field.Input /> - required="false" is added during rendering when not inside a clientOnly component #405

Open ghost opened 3 months ago

ghost commented 3 months ago

Using SolidStart, the following code

<Field.Root>
  <Field.Label>Email</Field.Label>
  <Field.Input type="email" placeholder="Email" />
</Field.Root>

will generate different output wether the component is inside a clientOnly component or not. Specifically, a required="false" attribute is added when not inside a clientOnly component which makes the input field ironically readonly (as "false" is parsed as true).

Inside a clientOnly component 👍:

<input
  id="cl-0"
  data-scope="field"
  data-part="input"
  type="email"
  placeholder="Email"
  name="email"
  class="input input--size_md "
>

Not inside a clientOnly 👎:

<input
  data-hk="0000000010000000000011000020001002000010020000"
  id="000000001000000000001100002000100200000"
  readonly="false" // <--- PROBLEM!
  data-scope="field"
  data-part="input"
  type="email"
  placeholder="Email"
  name="email"
  class="input input--size_md "
>
Achyutha commented 3 months ago

Apart from wrapping the component in clientOnly, is there any workaround for this to work?