When I am typing, the change in validation state causes the input field to lose focus.

[zhayes]

Screen-2025-08-13-005709.1.mp4

import { TextField, TextFieldErrorMessage, TextFieldLabel, TextFieldInput } from "@/components/ui/textfield";
import { Button } from "@/components/ui/button";
import { validate_password_format } from "@/utils/utils";
import { createSignal } from "solid-js";

export default () => {
  const [validationStatus, setValidationStatus] = createSignal<"valid"|"invalid">("valid");
  const [password, setPassword] = createSignal<string>();

  const handlePasswordInput = (value:string) => {
    setPassword(value);
    validatePassword();
  }

  const validatePassword = () => {
    setValidationStatus(validate_password_format(password()) ? "valid" : "invalid");
  }

  const handleUnlock = () => {
    // Unlock logic here
  }

  return <form>
    <TextField
      name="password"
      required
      class="gap-2"
      validationState={validationStatus()}
      value={password()} 
      onChange={handlePasswordInput}
    >
      <TextFieldLabel>Password</TextFieldLabel>
      <TextFieldInput 
        size="lg" 
        type="password" 
        placeholder="Enter your password" 
      />
      <TextFieldErrorMessage>
        Password must be at least 6 characters and contain both letters and numbers
      </TextFieldErrorMessage>
    </TextField>

    <Button size="lg" class="w-full mt-[24px]" onClick={handleUnlock}>
      Unlock
    </Button>
  </form>
}