Hi. I’m using react-hook-form and react-tag-input-component. I’m trying to prevent form submission on hitting ‘enter’ button. This is my code, I’m trying to use e.preventDefault() but it’s not working… could you help?
import * as React from ‘react’;
import * as i from ‘types’;

import { TagsInput } from ‘react-tag-input-component’;
import { FormField } from ‘common/form’;
import { Container } from ‘./styled’;

const formatValue = (value: string[] | string | undefined) => {
if (Array.isArray(value)) {
return value;
}

if (value) {
return value.split(', ');
}

return [];
};

export const TagInput: React.FC<TagInputProps> = ({
value,
onChange,
placeholder,
name,
label,
description,
error,
}) => {
const formFieldProps = { name, label, error, description };

const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value;
if (inputValue) {
onChange([…formatValue(value), inputValue]);
e.target.value = ‘’;
}
};

const handleClick = (e: React.SyntheticEvent) => {
const { tagName } = e.target as HTMLDivElement | HTMLInputElement;

if (tagName === ‘DIV’) {
const input = (e.target as Node).lastChild as HTMLInputElement;
input.focus();
}

if (tagName === ‘INPUT’) {
(e.target as HTMLInputElement).focus();
}
};

const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === ‘Enter’) {
console.log(e);
e.preventDefault();
}
};

return (
<FormField {…formFieldProps}>
<Container
isError={!!error}
onClick={handleClick}
onKeyDown={handleKeyUp}
>
<TagsInput
value={formatValue(value)}
onChange={onChange}
name={name}
onBlur={handleBlur}
placeHolder={placeholder}
onKeyUp={handleKeyUp}
/>
</Container>
</FormField>
);
};

type TagInputProps = i.FormFieldProps & {
onChange: (value: string[]) => void;
value: string[];
placeholder?: string;
isError?: boolean;
};