Proof of concept branch to investigate fixes for jsx=true warning and errors.

The main issue is that in some components there is some styling declared as <style  jsx>, but when running the tests for these components we get the warning
        “Warning: Received `true` for a non-boolean attribute `jsx`”.
 If we change to <style  jsx = “true”>, the warning is fixed but then we get a compile error:
        Type error: Type 'string' is not assignable to type 'boolean | undefined'.

I do not understand completely why not setting this variable is giving the warning, but some explanation and suggestions for fixes are provided in the following links:

vitejs/vite#6136
vercel/styled-jsx#838
https://github.com/vercel/styled-jsx#rendering-in-tests

I tried all of them, but they did not fix the warning. However, in the end, by just removing the jsx tag, it seems to work ( the app compiles and not warnings).

Author: enyeal

src/core/components/fields/DateField.tsx

@@ -61,7 +61,7 @@ export const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             {normalizedError}
           </div>
         )}
-        <style jsx>{`
+        <style>{`
           label {
             display: flex;
             flex-direction: column;

src/core/components/fields/LabelSelectField.tsx

@@ -73,7 +73,7 @@ export const LabelSelectField = forwardRef<HTMLSelectElement, LabeledSelectField
           </div>
         )}
 
-        <style jsx>{`
+        <style>{`
           label {
             display: flex;
             flex-direction: column;

src/core/components/fields/LabeledPasswordField.tsx

@@ -67,7 +67,7 @@ export const LabeledPasswordField = forwardRef<HTMLInputElement, LabeledPassWord
           </div>
         )}
 
-        <style jsx>{`
+        <style>{`
           label {
             display: flex;
             flex-direction: column;

src/core/components/fields/LabeledTextAreaField.tsx

@@ -43,7 +43,7 @@ export const LabeledTextAreaField = forwardRef<HTMLTextAreaElement, LabeledTextA
           </div>
         )}
 
-        <style jsx>{`
+        <style>{`
           label {
             display: flex;
             flex-direction: column;

src/core/components/fields/LabeledTextField.test.tsx

@@ -0,0 +1,131 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { expect, test } from "vitest"
+import { fireEvent, render, screen } from "test/utils"
+import { Form, FormProps } from "src/core/components/fields/Form"
+import { z } from "zod"
+import LabeledTextField from "./LabeledTextField"
+
+interface MyFormProps<S extends z.ZodType<any, any>> extends FormProps<S> {
+  name: string
+  placeholder: string
+  label: string
+  inputType?: "text" | "password" | "email" | "number" | "textarea"
+  onChangeCallback: (val) => void
+}
+
+const placeholder = "Container placeholder"
+const name = "input 1"
+const label = "input_label"
+
+function MyForm<S extends z.ZodType<any, any>>(props: MyFormProps<S>) {
+  const { name, placeholder, inputType, onChangeCallback, label, ...formProps } = props
+
+  return (
+    <div>
+      <Form {...formProps}>
+        <LabeledTextField
+          name={name}
+          label={label}
+          placeholder={placeholder}
+          type={inputType}
+          className="input mb-4 w-1/2 text-primary input-primary input-bordered border-2 bg-base-300"
+          onChange={onChangeCallback}
+        />
+      </Form>
+    </div>
+  )
+}
+
+test("renders labeled field for text type", async () => {
+  const inputType = "text"
+  let value = ""
+  const onChangeHandle = (val) => {
+    value = val.currentTarget.value
+  }
+
+  render(
+    <MyForm
+      name={name}
+      placeholder={placeholder}
+      onChangeCallback={onChangeHandle}
+      onSubmit={(val) => {}}
+      inputType={inputType}
+      label={label}
+    ></MyForm>
+  )
+
+  const elView = screen.getByTestId("labeledinput-testid")
+  const input = screen.getByPlaceholderText(placeholder)
+  expect(elView).toBeInTheDocument()
+  expect(input).toBeInTheDocument()
+  expect(screen.getByText(/input_label/i)).toBeInTheDocument()
+  expect(input).not.toHaveAttribute("value", "test value")
+  fireEvent.change(input, { target: { value: "test value" } })
+  expect(value).equals("test value")
+  expect(input).toHaveAttribute("type", inputType)
+  expect(input).toHaveAttribute("name", name)
+  expect(input).not.toHaveAttribute("type", "password")
+})
+
+test("renders labeled field for numeric type", async () => {
+  const inputType = "number"
+  let value = ""
+  const onChangeHandle = (val) => {
+    value = val.currentTarget.value
+  }
+
+  render(
+    <MyForm
+      name={name}
+      placeholder={placeholder}
+      onChangeCallback={onChangeHandle}
+      onSubmit={(val) => {}}
+      label={label}
+      inputType={inputType}
+    ></MyForm>
+  )
+  const elView = screen.getByTestId("labeledinput-testid")
+  const input = screen.getByPlaceholderText(placeholder)
+  expect(elView).toBeInTheDocument()
+  expect(input).toBeInTheDocument()
+  expect(input).not.toHaveAttribute("value", "1234567")
+  fireEvent.change(input, { target: { value: "1234567a" } })
+  expect(value).not.equal("1234567")
+  fireEvent.change(input, { target: { value: "1234567" } })
+  expect(value).equal("1234567")
+  expect(input).toHaveAttribute("type", inputType)
+  expect(input).not.toHaveAttribute("type", "text")
+})
+
+test("renders labeled field for password type", async () => {
+  const inputType = "password"
+  const testPassword = "pass"
+  let value = ""
+  const onChangeHandle = (val) => {
+    value = val.currentTarget.value
+  }
+
+  render(
+    <MyForm
+      name={name}
+      placeholder={placeholder}
+      onChangeCallback={onChangeHandle}
+      onSubmit={(val) => {}}
+      label={label}
+      inputType={inputType}
+    ></MyForm>
+  )
+
+  const elView = screen.getByTestId("labeledinput-testid")
+  const input = screen.getByPlaceholderText(placeholder)
+  expect(elView).toBeInTheDocument()
+  expect(input).toBeInTheDocument()
+  expect(input).not.toHaveAttribute("value", testPassword)
+  fireEvent.change(input, { target: { value: testPassword } })
+  expect(value).equal(testPassword)
+  expect(input).toHaveAttribute("type", inputType)
+  expect(input).not.toHaveAttribute("type", "text")
+})

src/core/components/fields/LabeledTextField.tsx

@@ -15,22 +15,19 @@ export interface LabeledTextFieldProps extends PropsWithoutRef<JSX.IntrinsicElem
 
 export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldProps>(
   ({ name, label, outerProps, fieldProps, labelProps, ...props }, ref) => {
+    let validValue = (v) => (v === "" ? null : v)
+    let myType = props.type === "number" ? (Number as any) : validValue
     const {
       input,
       meta: { touched, error, submitError, submitting },
     } = useField(name, {
-      parse:
-        props.type === "number"
-          ? (Number as any)
-          : // Converting `""` to `null` ensures empty values will be set to null in the DB
-            (v) => (v === "" ? null : v),
+      parse: myType,
       ...fieldProps,
     })
-
     const normalizedError = Array.isArray(error) ? error.join(", ") : error || submitError
 
     return (
-      <div {...outerProps}>
+      <div {...outerProps} data-testid="labeledinput-testid">
         <label {...labelProps}>
           {label}
           <input {...input} disabled={submitting} {...props} ref={ref} />
@@ -42,7 +39,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
           </div>
         )}
 
-        <style jsx>{`
+        <style>{`
           label {
             display: flex;
             flex-direction: column;