Fix bug: edit related still using the old method

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "my-personal-list",
 	"description": "My personal anime tracking list",
-	"version": "2.0.0",
+	"version": "2.1.1",
 	"scripts": {
 		"start": "concurrently \"yarn start:renderer\" \"yarn start:main\" --kill-others",
 		"start:main": "tsc && electron .",

packages/renderer/src/components/Button/Button.tsx

@@ -39,7 +39,7 @@ const Button: React.FC<Props> = ({
 	classNames.push(rest.className)
 
 	return (
-		<button {...rest} className={classNames.join(' ')}>
+		<button type='button' {...rest} className={classNames.join(' ')}>
 			<Icon />
 			{children && <span>{children}</span>}
 		</button>

packages/renderer/src/pages/Explore/components/AnimeEdit/EditRelations/EditRelations.tsx

@@ -35,10 +35,13 @@ const EditRelations: React.FC<Props> = ({ relatedI, setRelatedI, data }) => {
 		return filtered
 	}, [series, relatedInput, relatedI])
 
-	const onAddRelation = (path: string) => {
-		setRelatedI([...relatedI, { path, type: relatedType as any }])
+	const onRelatedFocus = () => {
+		setFocused(true)
+		setRelatedInput('')
 	}
 
+	// Related Functions
+	const onSetRelatedInput = (path: string) => setRelatedInput(path)
 	const onRemoveRelation = (path: string) => {
 		const index = relatedI.findIndex((el) => el.path === path)
 		if (index < 0) return relatedI
@@ -48,6 +51,9 @@ const EditRelations: React.FC<Props> = ({ relatedI, setRelatedI, data }) => {
 
 		setRelatedI(newRelations)
 	}
+	const onSubmitRelation = () => {
+		setRelatedI([...relatedI, { path: relatedInput, type: relatedType as any }])
+	}
 
 	return (
 		<div className={styles.editRelations}>
@@ -61,17 +67,17 @@ const EditRelations: React.FC<Props> = ({ relatedI, setRelatedI, data }) => {
 					label='Series'
 					value={relatedInput}
 					onChange={onRelatedChange}
-					onFocus={() => setFocused(true)}
+					onFocus={onRelatedFocus}
 					onBlur={() => setTimeout(() => setFocused(false), 100)}
 				/>
-				<Button Icon={MdOutlineAdd} />
+				<Button Icon={MdOutlineAdd} type='button' onClick={onSubmitRelation} />
 
 				<div
 					className={[styles.popover, focused ? styles.active : ''].join(' ')}
 				>
 					<ul>
 						{localFilteredSeries.map((s) => (
-							<li onClick={() => onAddRelation(s.path)} key={s.path}>
+							<li onClick={() => onSetRelatedInput(s.path)} key={s.path}>
 								{s.path}
 							</li>
 						))}