Form is being submitted when returning false from "onBeforeAdd"

[ahmed3hamdan]

In the following example, the form is being submitted when adding a value less than 3 characters long

import React from "react";
import ChipInput from "material-ui-chip-input";

const MyForm = () => {
  const handleSubmit = e => {
    e.preventDefault();
    console.log("submitted");
  };
  return (
    <form onSubmit={handleSubmit}>
      <ChipInput onBeforeAdd={value => value.length >= 3} />
    </form>
  );
};

export default MyForm;

My solution to overcome the issue:

import React from "react";
import ChipInput from "material-ui-chip-input";

const MyForm = () => {
  const handleSubmit = e => {
    e.preventDefault();
    console.log("submitted");
  };
  const handleKeyDown = e => {
    if (e.keyCode === 13 && e.target.value.length < 3) {
      e.preventDefault();
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <ChipInput onKeyDown={handleKeyDown} />
    </form>
  );
};

export default MyForm;

[ahmed3hamdan]

This behavior can be fixed by using "onKeyPress" to prevent the form from being submittied

import React from "react";
import ChipInput from "material-ui-chip-input";

const MyForm = () => {
  const handleSubmit = e => {
    e.preventDefault();
    console.log("submitted");
  };
  const handleKeyPress = e => {
    if (e.key === "Enter") e.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      <ChipInput onKeyPress={handleKeyPress} onBeforeAdd={value => value.length >= 3} />
    </form>
  );
};

export default MyForm;