Formik form input not accepting decimal number - reactjs

Question

Here is my complete edit form. I am type checking with prop types. Also using yup for validation with formik. However my input field is not accepting decimal number. Do i need to add custom validation rules for decimal number? Current form's validation and error feedback working properly for number without decimal format. Any hints how can i solve this ? Thanks in advance !
import React from "react";
import PropTypes from "prop-types";
import { Formik, Form, Field } from "formik";
import { Button, Input, FormGroup, Label, FormFeedback } from "reactstrap";
import * as Yup from "yup";
const projectType = PropTypes.shape({
id: PropTypes.number.isRequired,
actual_design: PropTypes.number.isRequired,
actual_development: PropTypes.number.isRequired,
actual_testing: PropTypes.number.isRequired
});
/**
* Custom form field component to make using Reactstrap and Formik together
* easier and less verbose.
*/
const FormField = ({ label, name, touched, errors }) => (
<FormGroup>
<Label for={name}>{label}</Label>
<Input
type="number"
name={name}
id={name}
tag={Field}
invalid={touched[name] && !!errors[name]}
min={0}
required
/>
{touched[name] && errors[name] && (
<FormFeedback>{errors[name]}</FormFeedback>
)}
</FormGroup>
);
FormField.propTypes = {
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
touched: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
/**
* Form for editing the actual hours for a project.
*/
const EditProjectForm = ({ project, onSubmit }) => (
<Formik
initialValues={{
actual_design: projectType.actual_design,
actual_development: projectType.actual_development,
actual_testing: projectType.actual_testing
}}
validationSchema={Yup.object().shape({
actual_design: Yup.number()
.min(0)
.required()
.label("Actual design hours"),
actual_development: Yup.number()
.min(0)
.required()
.label("Actual development hours"),
actual_testing: Yup.number()
.min(0)
.required()
.label("Actual testing hours")
})}
onSubmit={onSubmit}
>
{({ touched, errors, isSubmitting }) => (
<Form>
<FormField
name="actual_design"
type="number"
label="Actual design hours"
touched={touched}
errors={errors}
/>
<FormField
name="actual_development"
label="Actual development hours"
touched={touched}
errors={errors}
/>
<FormField
name="actual_testing"
label="Actual testing hours"
touched={touched}
errors={errors}
/>
<Button type="submit" color="primary" disabled={isSubmitting}>
UPDATE
</Button>
</Form>
)}
</Formik>
);
EditProjectForm.propTypes = {
project: projectType.isRequired,
onSubmit: PropTypes.func.isRequired
};
export default EditProjectForm;

Answer 1

I assume that you see a native browser validation message, because type="number" by default only allows integer with step=1, so you can fix it by adding step="any".
More information you can find there - Is there a float input type in HTML5?