Input does not clear on blur event when tabbing to next field

[bmccaw]

Describe the bug With clearInputOnBlur set to true, the input does not clear when the user tabs out of the input into the next field.

To Reproduce Steps to reproduce the behavior:

1. Set clearInputOnBlur prop to 'true'
2. Enter a value into the input.
3. Press Tab to move to the next input field.
4. Chip gets added but value remains in input.

Expected behavior I would assume that a tab event would function the same as the user clicking outside of the input and the input would clear.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Ventura 13.1
• Browser: Chrome
• Version: 109

[sljricardo]

I had the same problem, and by using useState to manage the inputValue you can achieve the behavior you want

try this and see if helps

const ChipsInput = ({ label, tip, ...rest }: ChipsInputType) => {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState("");

  const handleOnBlurChips = ({ target }) => {
    rest.onAddChip(target.value, rest.value.length + 1);
    setInputValue("");
  };

  return (
    <MuiChipsInput
      placeholder={""}
      className={classes.root}
      variant="outlined"
      onBlur={handleOnBlurChips}
      onInputChange={setInputValue}
      inputValue={inputValue}
      {...rest}
    />
  );
};

[viclafouch]

Hey @bmccaw ! Thanks for the catch !

The fix has been released in the v1.3.3 ;)