isInvalid property does not exists error on VSCode

[marcitqualab]

Hello,

I am not sure if this issue is related to react-spectrum, vscode or some linter.

I am testing this code example from the official docs.
https://react-spectrum.adobe.com/react-spectrum/forms.html#react-hook-form

Even though the app works i get this error / warning in VScode.

Type '{ label: string; name: "name"; value: string; onChange: (...event: any[]) => void; onBlur: Noop; ref: RefCallBack; isInvalid: boolean; isRequired: true; errorMessage: string | undefined; }' is not assignable to type 'IntrinsicAttributes & SpectrumTextFieldProps & RefAttributes'.
Property 'isInvalid' does not exist on type 'IntrinsicAttributes & SpectrumTextFieldProps & RefAttributes'.

This is may package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@adobe/react-spectrum": "^3.35.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.52.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.16.1",
    "@typescript-eslint/parser": "^7.16.1",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.8",
    "typescript": "^5.5.3",
    "vite": "^5.3.4"
  }
}

Could anyone shine some light about how to debug this warning to understand what could be done to remove the warning?

Many thanks

[snowystinger]

Odd, I don't see it in our prop table https://react-spectrum.adobe.com/react-spectrum/TextField.html#props which would be why you are getting an error. It looks like we purposefully omitted it here 068ecd1
But I don't see anything about why. I'll find out.

[marcitqualab]

Cool, thanks for the rapid response. Let me know if I can help on anything else.

[snowystinger]

looks that that example had a mistake, and while it "worked" it wasn't the complete picture. A textfield has three validation states, none, valid, and invalid. Most form components only have the two. So was probably just a copy/paste error.
I've opened a PR to update it #6733

[marcitqualab]

Yes the validation state worked well, no editor errors.
Many thanks.