diff --git a/package-lock.json b/package-lock.json
index 22ee4ee2b..404cca9a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nuzlocke-generator",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5672,6 +5672,19 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@react-hook/debounce": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-hook/debounce/-/debounce-3.0.0.tgz",
+      "integrity": "sha512-ir/kPrSfAzY12Gre0sOHkZ2rkEmM4fS5M5zFxCi4BnCeXh2nvx9Ujd+U4IGpKCuPA+EQD0pg1eK2NGLvfWejag==",
+      "requires": {
+        "@react-hook/latest": "^1.0.2"
+      }
+    },
+    "@react-hook/latest": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
+      "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg=="
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
diff --git a/package.json b/package.json
index 650349b9f..47b844906 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuzlocke-generator",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A tool for generating nuzlocke team pics from data",
   "main": "dist/bundle.js",
   "scripts": {
@@ -33,6 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "@emmaramirez/dom-to-image": "^3.0.2",
+    "@react-hook/debounce": "^3.0.0",
     "@types/chalk": "^2.2.0",
     "@types/color": "^3.0.0",
     "@types/cypress": "^1.1.3",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 643acced9..775c0dac2 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -52,8 +52,10 @@ export class UpdaterBase extends React.Component<{
             this.props.present != null &&
             !isEqual(this.props.present, prev.present)
         ) {
-            console.log(this.props.lrt, prev.lrt);
+            const t0 = performance.now();
             this.props.updateEditorHistory(prev.present);
+            const t1 = performance.now();
+            console.log(`Updated history in ${t1 - t0}ms`);
         }
     }
 
diff --git a/src/components/PokemonEditor/CurrentPokemonEdit.tsx b/src/components/PokemonEditor/CurrentPokemonEdit.tsx
index 5ee909ec9..b0ebc2617 100644
--- a/src/components/PokemonEditor/CurrentPokemonEdit.tsx
+++ b/src/components/PokemonEditor/CurrentPokemonEdit.tsx
@@ -423,6 +423,15 @@ CurrentPokemonEditState
                 </span>
                 <CurrentPokemonLayoutItem>
                     <ErrorBoundary>
+                        {/*<CurrentPokemonInput
+                            inputName="species"
+                            labelName="Species"
+                            disabled={currentPokemon.egg}
+                            placeholder="Missing No."
+                            value={currentPokemon.species}
+                            type='autocomplete'
+                            items={(listOfPokemon as unknown) as string[]}
+                        />*/}
                         <Autocomplete
                             items={(listOfPokemon as unknown) as string[]}
                             name="species"
diff --git a/src/components/PokemonEditor/CurrentPokemonInput.tsx b/src/components/PokemonEditor/CurrentPokemonInput.tsx
index 5a4cfb53b..d9156efaa 100644
--- a/src/components/PokemonEditor/CurrentPokemonInput.tsx
+++ b/src/components/PokemonEditor/CurrentPokemonInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector, useDispatch } from 'react-redux';
 
 import {
     matchSpeciesToTypes,
@@ -9,7 +9,7 @@ import {
     getContrastColor,
     matchNatureToToxtricityForme,
 } from 'utils';
-import { editPokemon, selectPokemon } from 'actions';
+import { editPokemon, selectPokemon, editStat } from 'actions';
 
 import { ErrorBoundary } from 'components/Shared';
 
@@ -17,6 +17,7 @@ import { TagInput, Classes, TextArea } from '@blueprintjs/core';
 import { State } from 'state';
 import { Pokemon } from 'models';
 import { cx } from 'emotion';
+import { useDebounceCallback } from '@react-hook/debounce';
 
 interface CurrentPokemonInputProps {
     labelName: string;
@@ -29,302 +30,417 @@ interface CurrentPokemonInputProps {
     | 'double-select'
     | 'moves'
     | 'textArea'
+    | 'autocomplete'
     | 'rich-text';
     value: any;
     placeholder?: string;
     transform?: (v: any) => string;
     disabled?: boolean;
     options?: string[] | { key: string; value: string | null }[];
-    editPokemon: editPokemon;
-    selectedId: string;
-    selectPokemon: selectPokemon;
     pokemon?: Pokemon;
-    customMoveMap: State['customMoveMap'];
     usesKeyValue?: boolean;
-    customTypes: State['customTypes'];
+    className?: string;
+    items?: string[];
 }
 
-export class CurrentPokemonInputBase extends React.Component<
-CurrentPokemonInputProps> {
-    public constructor(props: CurrentPokemonInputProps) {
-        super(props);
+// selectedId: state.selectedId,
+//         customMoveMap: state.customMoveMap,
+//         customTypes: state.customTypes,
+//     }),
+//     { editPokemon, selectPokemon },
+
+interface ChangeArgs {
+    inputName: CurrentPokemonInputProps['inputName'];
+    position?: number;
+    value?: any;
+    pokemon?: Pokemon;
+    edit: { [x: string]: any };
+}
+
+const createEdit = ({ inputName, value, pokemon, edit }: ChangeArgs) => {
+    if (inputName === 'species') {
+        return {
+            ...edit,
+            types: matchSpeciesToTypes(edit['species'])
+        };
+    } else if (inputName === 'nature' && pokemon?.species === 'Toxtricity') {
+        return {
+            ...edit,
+            forme: matchNatureToToxtricityForme(value),
+        };
+    } else if (inputName === 'forme') {
+        return {
+            ...edit,
+            types: pokemon && matchSpeciesToTypes(pokemon?.species, value)
+        };
     }
 
-    public static defaultProps = {
-        disabled: false,
-    };
+    return edit;
+};
 
-    public onChange = (
-        inputName,
-        { position, value, pokemon }: { position?: number; value?: any; pokemon?: Pokemon } = {},
-    ) => (e: React.ChangeEvent & { target: { value: any; checked?: boolean } }) => {
-        e.persist();
-        let edit;
+export type InputTypesFromState = Partial<
+Pick<State, 'selectedId' | 'customMoveMap' | 'customTypes'>
+>;
+export type InputTypesFromActions = {};
+export type InputTypesFromInternalState = {
+    setEdit: React.Dispatch<
+    React.SetStateAction<{
+        [x: string]: any;
+    }>
+    >;
+    edit: { [x: string]: any };
+    onChange: (event: React.ChangeEvent<HTMLElement>) => void;
+};
+export type PokemonInputProps = CurrentPokemonInputProps &
+InputTypesFromState &
+InputTypesFromInternalState;
 
-        if (inputName === 'types' && position != null) {
-            edit = {
-                [inputName]: value,
-            };
-            edit[inputName][position] = e.target.value;
-        } else if (inputName === 'species') {
-            edit = {
-                [inputName]: e.target.value,
-                types: matchSpeciesToTypes(e.target.value),
-            };
-        } else if (inputName === 'nature' && pokemon?.species === 'Toxtricity') {
-            edit = {
-                [inputName]: e.target.value,
-                forme: matchNatureToToxtricityForme(e.target.value),
-            };
-        } else if (inputName === 'moves') {
-            edit = {
-                [inputName]: e.target.value,
-            };
-        } else if (
-            inputName === 'champion' ||
-            inputName === 'shiny' ||
-            inputName === 'hidden' ||
-            inputName === 'mvp'
-        ) {
-            edit = {
-                [inputName]: e.target.checked,
-            };
-        } else if (inputName === 'egg') {
-            edit = {
-                [inputName]: e.target.checked,
-            };
-        } else if (inputName === 'forme') {
-            edit = {
-                forme: e.target.value,
-                types: pokemon && matchSpeciesToTypes(pokemon?.species, e.target.value),
-            };
-        } else {
-            edit = {
-                [inputName]: e.target.value,
-            };
-        }
+export const renderItems = (visibleItems, setSelectedItem) => (
+    visibleItems.map((v, i) => {
+        return (
+            <li
+                key={i}
+                role="item"
+                onClick={(e) => setSelectedItem(v)}
+                style={v === this.state.currentValue ? { color: 'lightblue' } : {}}>
+                {v}
+            </li>
+        );
+    })
+);
 
-        this.props.editPokemon(edit, this.props.selectedId);
-    };
+export function PokemonAutocompleteInput({
+    className,
+    placeholder,
+    inputName,
+    edit,
+    disabled,
+    onChange,
+    setEdit,
+    items,
+}: PokemonInputProps) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [visibleItems, setVisibleItems] = React.useState(items);
+    const [selectedItem, setSelectedItem] = React.useState();
+    const handleKeyDown = () => {};
+    const updateItems = () => {};
+    const closeList = () => {};
+    const openList = () => {};
 
-    public getInput({
-        labelName,
-        usesKeyValue,
-        disabled,
-        inputName,
-        type,
-        value,
-        placeholder,
-        options,
-        pokemon,
-    }: {
-        labelName?: CurrentPokemonInputProps['labelName'];
-        usesKeyValue?: boolean;
-        disabled?: boolean;
-        inputName?: CurrentPokemonInputProps['inputName'];
-        type: string;
-        value: any;
-        placeholder?: string;
-        options?: any[];
-        pokemon?: Pokemon;
-    }) {
-        const { customMoveMap, customTypes } = this.props;
 
-        value = value ?? '';
-        if (type === 'moves') {
-            return (
-                <ErrorBoundary>
-                    <TagInput
-                        fill
-                        leftIcon="ninja"
-                        tagProps={(v, i) => {
-                            // @TODO: Fix inconsitencies with bad parameter types
-                            const background =
-                                typeToColor(
-                                    // @ts-ignore
-                                    customMoveMap.find((m) => m?.move === v)?.type ||
-                                        getMoveType(v?.toString()?.trim() || ''),
-                                    customTypes,
-                                ) || 'transparent';
-                            const color = getContrastColor(background);
-                            return {
-                                style: {
-                                    background,
-                                    color,
-                                },
-                            };
-                        }}
-                        onChange={(values) => {
-                            const edit = {
-                                moves: values,
-                            };
-                            this.props.editPokemon(edit, this.props.selectedId);
-                        }}
-                        values={value || []}
-                    />
-                </ErrorBoundary>
-            );
-        }
-        if (type === 'text') {
-            return (
-                <input
-                    onChange={this.onChange(inputName)}
-                    type={type}
-                    name={inputName}
-                    value={value}
-                    placeholder={placeholder}
-                    disabled={disabled}
-                    className={disabled ? `${Classes.DISABLED} ${Classes.TEXT_MUTED}` : ''}
-                />
-            );
-        }
-        if (type === 'textArea') {
-            return (
-                <TextArea
-                    onChange={this.onChange(inputName)}
-                    name={inputName}
-                    value={value}
-                    placeholder={placeholder}
-                    disabled={disabled}
-                    style={{ width: '100%' }}
-                    className={disabled ? `${Classes.DISABLED} ${Classes.TEXT_MUTED} bp3-fill` : ''}
-                />
-            );
-        }
-        if (type === 'number') {
-            return (
-                <input
-                    onChange={this.onChange(inputName)}
-                    type={type}
-                    name={inputName}
-                    value={value}
-                    placeholder={placeholder}
-                    disabled={disabled}
+    return <>
+        <input
+            autoComplete="off"
+            className={cx(className)}
+            onKeyDown={handleKeyDown}
+            onFocus={openList}
+            onBlur={closeList}
+            placeholder={placeholder}
+            name={inputName}
+            type="text"
+            value={edit[inputName]}
+            disabled={disabled}
+            onChange={onChange}
+            onInput={(e) => setEdit({ [inputName]: e.currentTarget.value })}
+        />
+        {isOpen ? (
+            <ul className="autocomplete-items has-nice-scrollbars">{renderItems(visibleItems, setSelectedItem)}</ul>
+        ) : null}
+    </>;
+}
+
+export function PokemonTextInput({
+    inputName,
+    type,
+    value,
+    placeholder,
+    disabled,
+    selectedId,
+    edit,
+    setEdit,
+    onChange,
+}: PokemonInputProps) {
+    return (
+        <input
+            onChange={onChange}
+            onInput={(e) => setEdit({ [inputName]: e.currentTarget.value })}
+            type={type}
+            name={inputName}
+            value={edit[inputName]}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={disabled ? `${Classes.DISABLED} ${Classes.TEXT_MUTED}` : ''}
+        />
+    );
+}
+
+export function PokemonTextAreaInput({
+    inputName,
+    type,
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    setEdit,
+    edit,
+}: PokemonInputProps) {
+    return (
+        <TextArea
+            onChange={onChange}
+            onInput={(e) => setEdit({ [inputName]: e.currentTarget.value })}
+            name={inputName}
+            value={edit[inputName]}
+            placeholder={placeholder}
+            disabled={disabled}
+            style={{ width: '100%' }}
+            className={disabled ? `${Classes.DISABLED} ${Classes.TEXT_MUTED} bp3-fill` : ''}
+        />
+    );
+}
+
+export function PokemonNumberInput({
+    inputName,
+    type,
+    value,
+    placeholder,
+    disabled,
+    onChange,
+    setEdit,
+    edit,
+}: PokemonInputProps) {
+    return (
+        <input
+            onChange={onChange}
+            onInput={(e) => setEdit({ [inputName]: e.currentTarget.value })}
+            type={type}
+            name={inputName}
+            value={edit[inputName]}
+            placeholder={placeholder}
+            disabled={disabled}
+        />
+    );
+}
+
+export function PokemonSelectInput({
+    inputName,
+    value,
+    type,
+    usesKeyValue,
+    options,
+    placeholder,
+    onChange,
+    edit,
+    setEdit,
+}: PokemonInputProps) {
+    return (
+        <div className={Classes.SELECT} style={inputName === 'status' ? { width: '120px' } : {}}>
+            {inputName === 'pokeball' && value && value !== 'None' ? (
+                <img
+                    style={{ position: 'absolute' }}
+                    alt={value}
+                    src={`icons/pokeball/${formatBallText(value)}.png`}
                 />
-            );
-        }
-        if (type === 'select') {
-            return (
-                <div
-                    className={Classes.SELECT}
-                    style={inputName === 'status' ? { width: '120px' } : {}}>
-                    {inputName === 'pokeball' && value && value !== 'None' ? (
-                        <img
-                            style={{ position: 'absolute' }}
-                            alt={value}
-                            src={`icons/pokeball/${formatBallText(value)}.png`}
-                        />
-                    ) : null}
-                    <select
-                        onChange={this.onChange(inputName, { pokemon })}
-                        value={value}
-                        style={inputName === 'pokeball' ? { paddingLeft: '2rem' } : {}}
-                        name={inputName}>
-                        {!usesKeyValue
-                            ? options
-                                ? options.map((item, index) => <option key={index}>{item}</option>)
-                                : null
-                            : options?.map((item, index) => (
-                                <option value={item.value} key={index}>
-                                    {item.key}
-                                </option>
-                            ))}
-                    </select>
-                </div>
-            );
-        }
-        if (type === 'checkbox') {
-            return (
-                <label className={cx(Classes.CONTROL, Classes.CHECKBOX)}>
-                    <input
-                        onChange={this.onChange(inputName)}
-                        checked={value}
-                        type={type}
-                        name={inputName}
-                    />
-                    <span className="bp3-control-indicator" />
-                </label>
-            );
-        }
-        if (type === 'double-select') {
-            return (
-                <span className="double-select-wrapper">
-                    <div className={Classes.SELECT}>
-                        <select
-                            onChange={this.onChange(inputName, { position: 0, value })}
-                            value={value?.[0] == null ? 'None' : value?.[0]}
-                            name={inputName}>
-                            {options
-                                ? options.map((item: string, index: number) => (
-                                    <option value={item} key={index}>
-                                        {item}
-                                    </option>
-                                ))
-                                : null}
-                        </select>
-                    </div>
-                    <span>&nbsp;</span>
-                    <div className={Classes.SELECT}>
-                        <select
-                            onChange={this.onChange(inputName, { position: 1, value })}
-                            value={value?.[1] == null ? 'None' : value?.[1]}
-                            name={inputName}>
-                            {options
-                                ? options.map((item, index) => (
-                                    <option value={item} key={index}>
-                                        {item}
-                                    </option>
-                                ))
-                                : null}
-                        </select>
-                    </div>
-                </span>
-            );
-        }
-        if (type === 'rich-text') {
-            return null;
-        }
-        return <div>No input type provided.</div>;
+            ) : null}
+            <select
+                onChange={(e) => {
+                    onChange(e);
+                    setEdit({ [inputName]: e.currentTarget.value });
+                }}
+                value={value}
+                style={inputName === 'pokeball' ? { paddingLeft: '2rem' } : {}}
+                name={inputName}>
+                {!usesKeyValue
+                    ? options
+                        ? // @ts-expect-error array mapping, re-check
+                          options?.map((item, index) => <option key={index}>{item}</option>)
+                        : null
+                    : // @ts-expect-error array mapping, re-check
+                      options?.map((item, index) => (
+                          <option value={item.value} key={index}>
+                              {item.key}
+                          </option>
+                      ))}
+            </select>
+        </div>
+    );
+}
+
+export function PokemonDoubleSelectInput({
+    inputName,
+    value,
+    type,
+    usesKeyValue,
+    options,
+    placeholder,
+    onChange,
+    edit,
+    setEdit,
+}: PokemonInputProps) {
+    if (!Array.isArray(edit[inputName])) {
+        throw new Error('Could not read input as Array');
     }
 
-    public render() {
-        const {
-            labelName,
-            inputName,
-            usesKeyValue,
-            type,
-            placeholder,
-            value,
-            options,
-            pokemon,
-        } = this.props;
+    const onSelect = React.useMemo(() => (position: number) => (e) => {
+        onChange(e);
+        const newEdit = [
+            ...edit[inputName]
+        ];
+        newEdit[position] = e.currentTarget.value;
+        setEdit({ [inputName]: newEdit });
+    }, [inputName, edit]);
 
-        return (
-            <span
-                className={`current-pokemon-input-wrapper current-pokemon-${type} current-pokemon-${inputName}`}>
-                <label>{labelName}</label>
-                {this.getInput({
-                    labelName,
-                    usesKeyValue,
-                    inputName,
-                    type,
-                    value,
-                    placeholder,
-                    options,
-                    pokemon,
-                })}
-            </span>
-        );
+    return (
+        <span className="double-select-wrapper">
+            <div className={Classes.SELECT}>
+                <select onChange={onSelect(0)} value={edit?.[inputName]?.[0]} name={inputName}>
+                    {options
+                        ?
+                        // @ts-expect-error @TODO: mapping
+                        options.map((item: string, index: number) => (
+                            <option value={item} key={index}>
+                                {item}
+                            </option>
+                        ))
+                        : null}
+                </select>
+            </div>
+            <span>&nbsp;</span>
+            <div className={Classes.SELECT}>
+                <select onChange={onSelect(1)} value={edit?.[inputName]?.[1]} name={inputName}>
+                    {options
+                        ?
+                        // @ts-expect-error @TODO: mapping
+                        options.map((item, index) => (
+                            <option value={item} key={index}>
+                                {item}
+                            </option>
+                        ))
+                        : null}
+                </select>
+            </div>
+        </span>
+    );
+};
+
+export function PokemonCheckboxInput({
+    inputName,
+    value,
+    type,
+    usesKeyValue,
+    options,
+    placeholder,
+    onChange,
+    edit,
+    setEdit,
+}: PokemonInputProps) {
+    return (
+        <label className={cx(Classes.CONTROL, Classes.CHECKBOX)}>
+            <input
+                onChange={(e) => {
+                    onChange(e);
+                    setEdit({ [inputName]: e.currentTarget.checked });
+                }}
+                checked={edit[inputName]}
+                type={type}
+                name={inputName}
+            />
+            <span className={Classes.CONTROL_INDICATOR} />
+        </label>
+    );
+}
+
+export function PokemonMoveInput({
+    inputName,
+    value,
+    type,
+    usesKeyValue,
+    options,
+    placeholder,
+    onChange,
+    edit,
+    setEdit,
+    customTypes,
+    customMoveMap,
+    selectedId,
+}: PokemonInputProps) {
+    const dispatch = useDispatch();
+
+    return <ErrorBoundary>
+        <TagInput
+            fill
+            leftIcon="ninja"
+            tagProps={(v, i) => {
+                // @TODO: Fix inconsitencies with bad parameter types
+                const background =
+                    typeToColor(
+                        // @ts-expect-error @TODO: fix mapping
+                        customMoveMap?.find((m) => m?.move === v)?.type ||
+                            getMoveType(v?.toString()?.trim() || ''),
+                        customTypes,
+                    ) || 'transparent';
+                const color = getContrastColor(background);
+                return {
+                    style: {
+                        background,
+                        color,
+                    },
+                };
+            }}
+            onChange={(values) => {
+                const edit = {
+                    moves: values,
+                };
+                selectedId && dispatch(editPokemon(edit, selectedId));
+            }}
+            values={value || []}
+        />
+    </ErrorBoundary>;
+}
+
+export function CurrentPokemonInput(props: CurrentPokemonInputProps) {
+    const { inputName, value } = props;
+    const selectedId = useSelector<State, State['selectedId']>((state) => state.selectedId);
+    const customMoveMap = useSelector<State, State['customMoveMap']>(
+        (state) => state.customMoveMap,
+    );
+    const customTypes = useSelector<State, State['customTypes']>((state) => state.customTypes);
+    const dispatch = useDispatch();
+
+    const [edit, setEdit] = React.useState({ [inputName]: value });
+    if (!selectedId) {
+        return null;
     }
+    const onChange = useDebounceCallback(() => dispatch(editPokemon(createEdit({inputName, value: edit[inputName], edit, pokemon: props.pokemon}), selectedId)), 300);
+    React.useEffect(() => setEdit({ [inputName]: value }), [inputName, value]);
+
+    return (
+        <span
+            className={`current-pokemon-input-wrapper current-pokemon-${props.type} ${props.type === 'autocomplete' && 'autocomplete'} current-pokemon-${props.inputName}`}>
+            <label>{props.labelName}</label>
+            {getInput({ ...props, selectedId, onChange, setEdit, edit, customMoveMap })}
+        </span>
+    );
 }
 
-export const CurrentPokemonInput = connect(
-    (state: Pick<State, keyof State>) => ({
-        selectedId: state.selectedId,
-        customMoveMap: state.customMoveMap,
-        customTypes: state.customTypes,
-    }),
-    { editPokemon, selectPokemon },
-    null,
-    { pure: false },
-)(CurrentPokemonInputBase);
+export function getInput(props: PokemonInputProps) {
+    switch (props.type) {
+        case 'text':
+            return <PokemonTextInput {...props} />;
+        case 'textArea':
+            return <PokemonTextAreaInput {...props} />;
+        case 'select':
+            return <PokemonSelectInput {...props} />;
+        case 'checkbox':
+            return <PokemonCheckboxInput {...props} />;
+        case 'moves':
+            return <PokemonMoveInput {...props} />;
+        case 'number':
+            return <PokemonNumberInput {...props} />;
+        case 'double-select':
+            return <PokemonDoubleSelectInput {...props} />;
+        case 'autocomplete':
+            return <PokemonAutocompleteInput {...props} />;
+        default:
+            return 'No input for this type exists.';
+    }
+}
diff --git a/src/components/Shared/Autocomplete.tsx b/src/components/Shared/Autocomplete.tsx
index cfe520ffa..48a1a0071 100644
--- a/src/components/Shared/Autocomplete.tsx
+++ b/src/components/Shared/Autocomplete.tsx
@@ -81,7 +81,6 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
     }
 
     private updateItems = (e: any) => {
-        e.persist();
         if (e.target.value === '') {
             this.setState({
                 currentValue: e.target.value,
@@ -95,7 +94,6 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
                 ),
             });
         }
-        debounce(this.props.onChange, 300)(e);
     };
 
     private openList = (e) => this.setState({ isOpen: true });
@@ -105,6 +103,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
             this.setState({ isOpen: false });
             this.setState({ visibleItems: [] });
         }, 250);
+        this.props.onChange(e);
     };
 
     private handleKeyDown = (e: React.KeyboardEvent) => {
@@ -115,6 +114,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
             } else {
                 this.selectItem(this.state.visibleItems[0]);
             }
+            this.props.onChange(e);
         }
         if (e.which === 27 || e.which === 13 || e.which === 9) {
             this.closeList(e);
diff --git a/src/components/StyleEditor/StyleEditor.tsx b/src/components/StyleEditor/StyleEditor.tsx
index d79617732..81d7812fe 100644
--- a/src/components/StyleEditor/StyleEditor.tsx
+++ b/src/components/StyleEditor/StyleEditor.tsx
@@ -35,24 +35,19 @@ const editEvent = (e: any, props: StyleEditorProps, name?: keyof State['style'],
     const propName = name || e.target.name;
     props.editStyle({ [propName]: e.target.value });
     if (propName === 'template' && e.target.value === 'Default Light') {
-        props.editStyle({ bgColor: '#eeeeee' });
-        props.editStyle({ topHeaderColor: '#dedede' });
+        props.editStyle({ bgColor: '#eeeeee', topHeaderColor: '#dedede' });
     }
     if (propName === 'template' && e.target.value === 'Default Dark') {
-        props.editStyle({ bgColor: '#383840' });
-        props.editStyle({ topHeaderColor: '#333333' });
+        props.editStyle({ bgColor: '#383840', topHeaderColor: '#333333' });
     }
     if (propName === 'template' && e.target.value === 'Compact with Icons') {
         props.editStyle({ imageStyle: 'square' });
     }
     if (propName === 'template' && e.target.value === 'Cards') {
-        props.editStyle({ imageStyle: 'square' });
-        props.editStyle({ movesPosition: 'horizontal' as OrientationType });
+        props.editStyle({ imageStyle: 'square', movesPosition: 'horizontal' as OrientationType });
     }
     if (propName === 'template' && e.target.value === 'Hexagons') {
-        props.editStyle({ resultWidth: 1320 });
-        props.editStyle({ accentColor: 'rgba(0, 0, 0, 0)' });
-        props.editStyle({ movesPosition: 'horizontal' as OrientationType });
+        props.editStyle({ resultWidth: 1320, accentColor: 'rgba(0, 0, 0, 0)', movesPosition: 'horizontal' as OrientationType });
     }
     if (
         (propName === 'template' && e.target.value === 'Generations') ||
@@ -60,30 +55,13 @@ const editEvent = (e: any, props: StyleEditorProps, name?: keyof State['style'],
     ) {
         props.editStyle({
             bgColor: game ? gameOfOriginToColor(game) : '',
-        });
-        props.editStyle({
             minimalBoxedLayout: true,
-        });
-        props.editStyle({
+            // @TODO: only push if resultW/H is lower
             resultHeight: 870,
-        });
-        props.editStyle({
             resultWidth: 1460,
+            movesPosition: 'vertical'
         });
-        props.editStyle({ movesPosition: 'vertical' });
     }
-    // if (propName === 'trainerSectionOrientation' && e.target.value === 'vertical') {
-    //     props.editStyle({
-    //         trainerWidth: props.style.trainerHeight,
-    //         trainerHeight: props.style.trainerWidth,
-    //     });
-    // }
-    // if (propName === 'trainerSectionOrientation' && e.target.value === 'horizontal') {
-    //     props.editStyle({
-    //         trainerWidth: props.style.trainerHeight,
-    //         trainerHeight: props.style.trainerWidth,
-    //     });
-    // }
 };
 
 export interface StyleEditorProps {
diff --git a/src/utils/generateReleaseNotes.ts b/src/utils/generateReleaseNotes.ts
index 22c1a23a9..1b3d4dec2 100644
--- a/src/utils/generateReleaseNotes.ts
+++ b/src/utils/generateReleaseNotes.ts
@@ -642,4 +642,12 @@ Thank you!
 - External Cors-blocked images cannot be downloaded, however you can use a [base 64 converter](https://www.base64-image.de/) to bypass this
 - **Drag and drop will not reorder positions, you will still have to do that in the editor**
 `,
+    '1.4.1': `
+## Fixes
+- Fixed performance of Pokémon-related inputs
+
+## Known Issues
+- External Cors-blocked images cannot be downloaded, however you can use a [base 64 converter](https://www.base64-image.de/) to bypass this
+- **Drag and drop will not reorder positions, you will still have to do that in the editor**
+`
 };