(Qwik) Empty form with Firefox autofill

[Zhykos]

Hi! I'm new to Qwik and Modular Forms, congrats for your project.

I've had a login page to my new project and as a Firefox user I have a problem when submitting the form. Firefox autofills the fields and it seems Modular Forms (I guess) does not capture the inserted values.

To reproduce:

• Be sure to not have a saved login in Firefox for the test webpage
• Open the login page
• Log-in (email and password with 8 characters)
• Save the data with Firefox
• Check the log in the dev console, you must see the typed data
• Refresh the page
• The email and password must be autofilled
• Submit
• Check the log in the dev console and nothing happened

I remove all the complexity of my real login page to only use this example : https://github.com/fabian-hiller/modular-forms/blob/main/playgrounds/qwik/src/routes/(default)/login/index.tsx (I just use an HTML input instead of your component)

Is there anything to fix this bevahiour? Thanks 🙏 (I've saved a video showing my problem if you need)

import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from "@builder.io/qwik-city";
import {
  email,
  type InitialValues,
  minLength,
  required,
  useForm,
} from "@modular-forms/qwik";

type LoginForm = {
  email: string;
  password: string;
};

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

export default component$(() => {
  const [loginForm, { Form, Field }] = useForm<LoginForm>({
    loader: useFormLoader(),
  });

  return (
    <Form
      class="space-y-12 md:space-y-14 lg:space-y-16"
      onSubmit$={(values) => console.log(values)}
    >
      <div class="space-y-8 md:space-y-10 lg:space-y-12">
        <Field
          name="email"
          validate={[
            required("Please enter your email."),
            email("The email address is badly formatted."),
          ]}
        >
          {(field, props) => (
            <input
              {...props}
              value={field.value}
              type="email"
              placeholder="example@email.com"
              class="text-black"
              required
            />
          )}
        </Field>
        <Field
          name="password"
          validate={[
            required("Please enter your password."),
            minLength(8, "You password must have 8 characters or more."),
          ]}
        >
          {(field, props) => (
            <input
              {...props}
              value={field.value}
              type="password"
              placeholder="********"
              class="text-black"
              required
            />
          )}
        </Field>
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
});

[fabian-hiller]

Thank you for creating and preparing this issue. I will look into the problem next week.

[Zhykos]

Thank you for creating and preparing this issue. I will look into the problem next week.

Nice! 😄 I made some other tests and to be honest it's the worst because it's random. After some refreshs, the log shows sometimes the email and the password (no empty strings like the issue) 😠 (you can remove the validators but I think you know ^^)

It's like Firefox fills the fields before the binding is activated (if modular-forms works with a system like binding useSignal or other qwik stuff)

[fabian-hiller]

Yes, that's also what I initially thought. It is good to know that this can happy because there should be ways to work around this problem.