[🐞] flowbite qwik input not working with modular form

[BakauDesign]

Which component is affected?

Qwik Runtime

Describe the bug

import { $, component$, QRL } from "@builder.io/qwik";
import {
	Input,
	Button
} from "flowbite-qwik"

import {
	// routeAction$,
	routeLoader$,
} from '@builder.io/qwik-city';

import { formAction$, type InitialValues, SubmitHandler, useForm, valiForm$ } from '@modular-forms/qwik'

import * as v from 'valibot';

import { createToken } from "~/lib/auth";

const LoginSchema = v.object({
	email: v.pipe(
		v.string(),
		v.nonEmpty('Please enter your email.'),
		v.email('The email address is badly formatted.'),
	),
	password: v.pipe(
		v.string(),
		v.nonEmpty('Please enter your password.'),
		v.minLength(8, 'Your password must have 8 characters or more.'),
	),
});
   
type LoginForm = v.InferInput<typeof LoginSchema>;

export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
	email: '',
	password: '',
}));

export const useFormAction = formAction$<LoginForm>( async(values, event) => {
	const { email, password } = values;
	const { request, cookie, platform, redirect } = await event;

	if (email === "achmadjulian@bakaudesign.com" && password === "Zahra4444") {
		await createToken({ request, cookie, platform });

		redirect(302, "/cms/dashboard")
	}

	console.info(email, password)
}, valiForm$(LoginSchema));

export default component$(() => {
	const [, { Form, Field }] = useForm<LoginForm>({
		loader: useFormLoader(),
		action: useFormAction(),
		validate: valiForm$(LoginSchema),
	})
	
	const handleSubmit: QRL<SubmitHandler<LoginForm>> = $((values) => {
		console.info('client side', { ...values })
	})

	return (
		<>
			<div>
				<h1 class="font-museomoderno text-display-large">LOGIN</h1>

				<Form onSubmit$={handleSubmit} class="flex flex-col gap-y-4">

					<Field name="email">
						{(field, props) => (
						<div>
							<Input
								{...props}
								type="email"
								id={field.name}
								value={field.value}
								placeholder="hi@bakaudesign.com"
								onInput$={props.onInput$}
							/>
							{field.error && <div>{field.error}</div>}
						</div>
						)}
					</Field>

					<Field name="password">
						{(field, props) => (
						<div>
							<Input
								{...props}
								type="password"
								id={field.name}
								value={field.value}
								placeholder="x8jnd121r"
								onInput$={props.onInput$}
							/>
							{field.error && <div>{field.error}</div>}
						</div>
						)}
					</Field>

					<Button
						type="submit"
					>
						<p>Login</p>
					</Button>
				</Form>
				
			</div>
		</>
	);
});

Reproduction

qwik qwik-flowbite

Steps to reproduce

No response

System Info

{
  "name": "my-qwik-basic-starter",
  "description": "Demo app with sample routes",
  "engines": {
    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
  },
  "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
  "private": true,
  "trustedDependencies": [
    "sharp"
  ],
  "trustedDependencies-annotation": "Needed for bun to allow running install scripts",
  "type": "module",
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "npm run build && wrangler pages deploy",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "npm run build && wrangler pages dev",
    "serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als",
    "start": "vite --open --mode ssr",
    "cf-typegen": "wrangler types",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/qwik": "^1.12.0",
    "@builder.io/qwik-city": "^1.12.0",
    "@cloudflare/workers-types": "^4.20250405.0",
    "@modular-forms/qwik": "^0.29.1",
    "@tailwindcss/vite": "^4.0.0",
    "@types/eslint": "8.56.10",
    "@types/node": "20.14.11",
    "@typescript-eslint/eslint-plugin": "7.16.1",
    "@typescript-eslint/parser": "7.16.1",
    "class-variance-authority": "^0.7.0",
    "eslint": "8.57.0",
    "eslint-plugin-qwik": "^1.12.0",
    "flowbite": "^3.1.2",
    "flowbite-qwik": "^1.0.4",
    "flowbite-qwik-icons": "^0.1.9",
    "nx": "^20.7.1",
    "prettier": "3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "^4.0.0",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.4.5",
    "undici": "*",
    "vite": "5.3.5",
    "vite-tsconfig-paths": "^4.2.1",
    "wrangler": "^3.0.0"
  },
  "dependencies": {
    "@tsndr/cloudflare-worker-jwt": "^3.1.4",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.1.0",
    "valibot": "^1.0.0"
  },
  "nx": {}
}

Additional Information

No response

[BakauDesign]

But the modular form really working with native

<Form onSubmit$={handleSubmit}>
      <Field name="email">
        {(field, props) => (
          <div>
            <input {...props} type="email" value={field.value} />
            {field.error && <div>{field.error}</div>}
          </div>
        )}
      </Field>
      <Field name="password">
        {(field, props) => (
          <div>
            <input {...props} type="password" value={field.value} />
            {field.error && <div>{field.error}</div>}
          </div>
        )}
      </Field>
      <button type="submit">Login</button>
    </Form>

[JerryWu1234]

But the modular form really working with native

<Form onSubmit$={handleSubmit}> <Field name="email"> {(field, props) => ( <div> <input {...props} type="email" value={field.value} /> {field.error && <div>{field.error}</div>} </div> )} </Field> <Field name="password"> {(field, props) => ( <div> <input {...props} type="password" value={field.value} /> {field.error && <div>{field.error}</div>} </div> )} </Field> <button type="submit">Login</button> </Form>

Do you have a minimal reproducible example ?

[wmertens]

@BakauDesign can you make a repro in https://qwik.new? Also, what is the error exactly? Is it a problem with Qwik or with modular-forms?

[github-actions]

Hello @BakauDesign. Please provide the missing information requested above.
Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days.
Thanks 🙏