liveValidate does not work for integer input · rjsf-team/react-jsonschema-form#4038

2024-01-11T13:40:44.000Z

### Prerequisites - [X] I have searched the existing issues - [X] I understand that providing a [SSCCE](http://sscce.org/) example is tremendously useful to the maintainers. - [X] I have read the [documentation](https://rjsf-team.github.io/react-jsonschema-form/docs) - [X] Ideally, I'm providing a [sample JSFiddle](https://jsfiddle.net), [Codesandbox.io](https://codesandbox.io) or preferably a [shared playground link](https://rjsf-team.github.io/react-jsonschema-form/) demonstrating the issue. ### What theme are you using? core ### Version 5.x ### Current Behavior See [this playground](https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6e30sInNjaGVtYSI6eyJ0aXRsZSI6IlZhbGlkYXRpb24iLCJ0eXBlIjoib2JqZWN0IiwicHJvcGVydGllcyI6eyJhZ2UiOnsidHlwZSI6ImludGVnZXIiLCJ0aXRsZSI6IkFnZSJ9fX0sInVpU2NoZW1hIjp7ImFnZSI6eyJ1aTp0aXRsZSI6IkFnZSBvZiBwZXJzb24iLCJ1aTpkZXNjcmlwdGlvbiI6IihlYXJ0aCB5ZWFyKSJ9fSwidGhlbWUiOiJkZWZhdWx0IiwibGl2ZVNldHRpbmdzIjp7ImxpdmVWYWxpZGF0ZSI6dHJ1ZSwic2hvd0Vycm9yTGlzdCI6InRvcCIsImV4cGVyaW1lbnRhbF9kZWZhdWx0Rm9ybVN0YXRlQmVoYXZpb3IiOnsiYXJyYXlNaW5JdGVtcyI6eyJwb3B1bGF0ZSI6InBvcHVsYXRlIiwibWVyZ2VFeHRyYURlZmF1bHRzIjpmYWxzZX0sImFsbE9mIjoic2tpcERlZmF1bHRzIiwiZW1wdHlPYmplY3RGaWVsZHMiOiJwb3B1bGF0ZUFsbERlZmF1bHRzIn19fQ==), `liveValidate` has no effect on `integer` properties, you can enter any text there. Maybe related, most themes seem to always use the `updown` widget instead of the documented `input[type=number]`. ### Expected Behavior Entering something like `abc` should invalidate immediately when `liveValidate` is checked ### Steps To Reproduce schema: ```json { "title": "Validation", "type": "object", "properties": { "age": { "type": "integer", "title": "Age" } } } ``` alternatively: open playground linked above 1. Set `liveValidate: true` 2. Enter `abc` in integer field 3. No hint or error appears. Note that the "Validation" examples work. ### Environment ```markdown Current playground. ``` ### Anything else? _No response_

(2 comments) (0 reactions) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import

bughelp wanted

Description

Prerequisites

I have searched the existing issues
I understand that providing a SSCCE example is tremendously useful to the maintainers.
I have read the documentation
Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

See this playground, liveValidate has no effect on integer properties, you can enter any text there. Maybe related, most themes seem to always use the updown widget instead of the documented input[type=number].

Expected Behavior

Entering something like abc should invalidate immediately when liveValidate is checked

Steps To Reproduce

schema:

{
  "title": "Validation",
  "type": "object",
  "properties": {
    "age": {
      "type": "integer",
      "title": "Age"
    }
  }
}

alternatively: open playground linked above

Set liveValidate: true
Enter abc in integer field
No hint or error appears.

Note that the "Validation" examples work.

Environment

Current playground.

Anything else?

No response

Contributor guide

Tech stack: reacttypescript
Domain: frontend
Issue type: bug
Difficulty: 3
Estimated time: 1-3 hours
Activity status: fresh
Clarity: clear
Prerequisites: ReactTypeScriptJSON Schemareact jsonschema form basics
Newbie friendliness: 65
Research direction: Investigate why `liveValidate` does not trigger validation for integer inputs. The issue mentions that the `updown` widget is used instead of `input[type=number]`. Start by examining the widget selection logic in `src/components/widgets/BaseInput.js` or similar. Also review how `liveValidate` is implemented in the form component. Reproduce using the provided playground link to see the current behavior. Check if there are any existing tests for integer validation.