Formik form input not accepting decimal number

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?