diff --git a/app/.eslintrc b/app/.eslintrc
index 32a67b77..397886bd 100644
--- a/app/.eslintrc
+++ b/app/.eslintrc
@@ -39,7 +39,8 @@
     "camelcase": ["warn", {"ignoreDestructuring": true ,"properties": "never"}],
     "eol-last": ["warn", "always"],
     "no-multiple-empty-lines": ["warn", {"max": 1}],
-    "prefer-const": "warn"
+    "prefer-const": "warn",
+    "react/prop-types": "off"
   },
   "settings": {
     "react": {
diff --git a/app/src/frontend/building/data-components/data-entry-input.tsx b/app/src/frontend/building/data-components/data-entry-input.tsx
index 8bcd9360..b768a831 100644
--- a/app/src/frontend/building/data-components/data-entry-input.tsx
+++ b/app/src/frontend/building/data-components/data-entry-input.tsx
@@ -64,8 +64,6 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
                 placeholder={props.placeholder}
                 onKeyDown={e => {
                     if(e.keyCode === 13) {
-                        // prevent form submit on enter
-                        e.preventDefault();
                         if(props.confirmOnEnter) {
                             handleConfirm();
                         }
diff --git a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
index c55f1026..50e38742 100644
--- a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
+++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
@@ -1,105 +1,81 @@
-import React, { Component, Fragment } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import './multi-data-entry.css';
 
 import { BaseDataEntryProps } from '../data-entry';
 import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
 import { DataTitleCopyable } from '../data-title';
-
+import { CloseIcon, SaveIcon } from '../../../components/icons';
 
 interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
     value: string[];
-    copyable: boolean;
-    editableEntries: boolean;
-    confirmOnEnter: boolean;
-
-    addOnAutofillSelect: boolean;
-    acceptAutofillValuesOnly: boolean;
+    copyable?: boolean;
+    editableEntries?: boolean;
+    confirmOnEnter?: boolean;
 }
 
-interface MultiDataEntryState {
-    newValue: string;
-}
+export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
+    editableEntries = false,
+    copyable = false,
+    confirmOnEnter = true,
+    ...props
+}) => {
+    const [newValue, setNewValue] = useState<string>();
 
-class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState> {
+    const values = useMemo(() => props.value ?? [], [props.value]);
 
-    static defaultProps = {
-        editableEntries: false,
-        copyable: false,
-        confirmOnEnter: true,
-        addOnAutofillSelect: false,
-        acceptAutofillValuesOnly: false
-    };
+    const edit = useCallback((index: number, value: string) => {
+        const editedValues = values.slice();
+        editedValues.splice(index, 1, value);
+        props.onChange(props.slug, editedValues);
+    }, [values, props.onChange, props.slug]);
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            newValue: null
-        };
-        
-        this.setNewValue = this.setNewValue.bind(this);
-        this.edit = this.edit.bind(this);
-        this.addNew = this.addNew.bind(this);
-        this.remove = this.remove.bind(this);
-    }
+    /* accept a newValue parameter to handle cases where the value is set and submitted at the same time
+     * (like with autofill select enabled) - but otherwise use the current newValue saved in state
+     */
+    const addNew = useCallback((newValueArg?: string) => {
+        const val = newValueArg ?? newValue;
+        if(val == undefined) return;
 
-    getValues() {
-        return this.props.value == undefined ? [] : this.props.value;
-    }
+        const editedValues = values.slice().concat(val);
 
-    cloneValues() {
-        return this.getValues().slice();
-    }
+        setNewValue(null);
+        props.onChange(props.slug, editedValues);
+    }, [newValue, values, props.onChange, props.slug]);
 
-    setNewValue(value: string) {
-        this.setState({newValue: value});
-    }
+    const clearNew = useCallback(() => {
+        setNewValue(null);
+    }, []);
 
-    edit(index: number, value: string) {
-        let values = this.cloneValues();
-        values.splice(index, 1, value);
-        this.props.onChange(this.props.slug, values);
-    }
-    addNew(newValue?: string) {
-        // accept a newValue parameter to handle cases where the value is set and submitted at the same time
-        // (like with autofill select enabled) - but otherwise use the current newValue saved in state
-        const val = newValue ?? this.state.newValue;
-        if (val == undefined) return;
-        const values = this.cloneValues().concat(val);
-        this.setState({newValue: null});
-        this.props.onChange(this.props.slug, values);
-    }
+    const remove = useCallback((index: number) => {
+        const editedValues = values.slice();
+        editedValues.splice(index, 1);
 
-    remove(index: number){
-        const values = this.cloneValues();
-        values.splice(index, 1);
-        this.props.onChange(this.props.slug, values);
-    }
+        props.onChange(props.slug, editedValues);
+    }, [values, props.onChange, props.slug]);
 
-    render() {
-        const values = this.getValues();
-        const props = this.props;
-        const isEditing = props.mode === 'edit';
-        const isDisabled = !isEditing || props.disabled;
-        const slugWithModifier = props.slug + (props.slugModifier ?? '');
 
-        return <Fragment>
-            <DataTitleCopyable
-                slug={props.slug}
-                slugModifier={props.slugModifier}
-                title={props.title}
-                tooltip={props.tooltip}
-                disabled={props.disabled || props.value == undefined || props.value.length === 0}
-                copy={props.copyable ? props.copy : undefined}
-            />
-            <div id={`${props.slug}-wrapper`}>
-                <ul className="data-link-list">
-                {
-                    values.length === 0 && !isEditing &&
-                    <div className="input-group">
-                        <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
-                    </div>
-                }
+    const isEditing = props.mode === 'edit';
+    const isDisabled = !isEditing || props.disabled;
+    const slugWithModifier = props.slug + (props.slugModifier ?? '');
+
+    return (<>
+        <DataTitleCopyable
+            slug={props.slug}
+            slugModifier={props.slugModifier}
+            title={props.title}
+            tooltip={props.tooltip}
+            disabled={props.disabled || props.value == undefined || props.value.length === 0}
+            copy={copyable ? props.copy : undefined}
+        />
+        <div id={`${props.slug}-wrapper`}>
+            {
+                values.length === 0 && !isEditing &&
+                <div className="input-group">
+                    <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
+                </div>
+            }
+            <ul className="data-entry-list">
                 {
                     values.map((val, i) => (
                         <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
@@ -108,8 +84,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                                 name={`${slugWithModifier}-${i}`}
                                 id={`${slugWithModifier}-${i}`}
                                 value={val}
-                                disabled={!props.editableEntries || isDisabled}
-                                onChange={(key, val) => this.edit(i, val)}
+                                disabled={!editableEntries || isDisabled}
+                                onChange={(_key, val) => edit(i, val)}
 
                                 maxLength={props.maxLength}
                                 isUrl={props.isUrl}
@@ -121,51 +97,57 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                             {
                                 !isDisabled &&
                                 <div className="input-group-append">
-                                    <button type="button" onClick={e => this.remove(i)}
+                                    <button type="button" onClick={() => remove(i)}
                                         title="Remove"
-                                        data-index={i} className="btn btn-outline-dark">✕</button>
+                                        data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
                                 </div>
                             }
                         </li>
                     ))
                 }
-                </ul>
                 {
                     !isDisabled &&
-                    <div className="input-group">
-                        <DataEntryInput
-                            slug={props.slug}
-                            name={slugWithModifier}
-                            id={slugWithModifier}
-                            value={this.state.newValue}
-                            disabled={props.disabled}
-                            required={props.required && values.length < 1}
-                            onChange={(key, val) => this.setNewValue(val)}
-                            onConfirm={(key, val) => this.addNew(val)}
+                        <li className="input-group">
+                            <DataEntryInput
+                                slug={props.slug}
+                                name={slugWithModifier}
+                                id={slugWithModifier}
+                                value={newValue}
+                                disabled={props.disabled}
+                                required={props.required && values.length < 1}
+                                onChange={(_key, val) => setNewValue(val)}
+                                onConfirm={(_key, val) => addNew(val)}
 
-                            maxLength={props.maxLength}
-                            placeholder={props.placeholder}
-                            isUrl={props.isUrl}
-                            valueTransform={props.valueTransform}
-                            confirmOnEnter={props.confirmOnEnter}
+                                maxLength={props.maxLength}
+                                placeholder={props.placeholder}
+                                isUrl={props.isUrl}
+                                valueTransform={props.valueTransform}
+                                confirmOnEnter={confirmOnEnter}
 
-                            autofill={props.autofill}
-                            showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
-                            confirmOnAutofillSelect={true}
-                        />
-                        <div className="input-group-append">
-                            <button type="button"
-                                className="btn btn-outline-dark"
-                                title="Add to list"
-                                onClick={() => this.addNew()}
-                                disabled={this.state.newValue == undefined}
-                            >+</button>
-                        </div>
-                    </div>
+                                autofill={props.autofill}
+                                showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
+                                confirmOnAutofillSelect={true}
+                            />
+                            {
+                                newValue != undefined &&
+                                    <>
+                                        <div className="input-group-append">
+                                            <button type="button"
+                                                className="btn btn-primary data-entry-list-button"
+                                                title="Confirm new value"
+                                                onClick={() => addNew()}
+                                            ><SaveIcon /></button>
+                                        </div>
+                                        <div className="input-group-append">
+                                            <button type="button" onClick={() => clearNew()}
+                                                title="Clear new value"
+                                                className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
+                                        </div>
+                                    </>
+                            }
+                        </li>
                 }
-            </div>
-        </Fragment>;
-    }
-}
-
-export default MultiDataEntry;
+            </ul>
+        </div>
+    </>)
+};
diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx
index 0ef6a3dd..a74b5d79 100644
--- a/app/src/frontend/building/data-container.tsx
+++ b/app/src/frontend/building/data-container.tsx
@@ -364,6 +364,8 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                                 action={`/edit/${this.props.cat}/${this.props.building.building_id}`}
                                 method="POST"
                                 onSubmit={this.handleSubmit}>
+                                    {/* this disabled button prevents form submission on enter - see https://stackoverflow.com/a/51507806/1478817 */}
+                                    <button type="submit" disabled style={{display: 'none'}}></button>
                                 {
                                     (this.props.mode === 'edit' && !this.props.inactive) ?
                                         <div className='edit-bar'>
diff --git a/app/src/frontend/building/data-containers/age.tsx b/app/src/frontend/building/data-containers/age.tsx
index 2ac2f4a0..7175d54d 100644
--- a/app/src/frontend/building/data-containers/age.tsx
+++ b/app/src/frontend/building/data-containers/age.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { dataFields } from '../../config/data-fields-config';
-import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
+import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
 import NumericDataEntry from '../data-components/numeric-data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
 import TextboxDataEntry from '../data-components/textbox-data-entry';
diff --git a/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx b/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
index 3bcaa6a3..53e7d780 100644
--- a/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
+++ b/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
@@ -6,10 +6,11 @@ import { FieldRow } from '../../data-components/field-row';
 import DataEntry, { BaseDataEntryProps } from '../../data-components/data-entry';
 import { dataFields } from '../../../config/data-fields-config';
 import SelectDataEntry from '../../data-components/select-data-entry';
-import MultiDataEntry from '../../data-components/multi-data-entry/multi-data-entry';
+import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-data-entry';
 import { NumberRangeDataEntry } from './number-range-data-entry';
 
 import './dynamics-data-entry.css';
+import { CloseIcon } from '../../../components/icons';
 
 type DemolishedBuilding = (BuildingAttributes['demolished_buildings'][number]);
 
@@ -211,7 +212,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                             <label>Please supply sources for any edits of existing records</label>
                         </>
                 }
-                <ul className="data-link-list">
+                <ul className="data-entry-list">
                     {
                         values.length === 0 &&
                         <div className="input-group">
@@ -229,7 +230,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                                                 title="Delete Record"
                                                 onClick={() => remove(id)}
                                                 data-index={id}
-                                            >x</button>
+                                            ><CloseIcon /></button>
                                     }
                                     <DynamicsDataRow
                                         value={pastBuilding}
diff --git a/app/src/frontend/building/data-containers/use.tsx b/app/src/frontend/building/data-containers/use.tsx
index 545b569a..26ff6e11 100644
--- a/app/src/frontend/building/data-containers/use.tsx
+++ b/app/src/frontend/building/data-containers/use.tsx
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import InfoBox from '../../components/info-box';
 import { dataFields } from '../../config/data-fields-config';
 import DataEntry from '../data-components/data-entry';
-import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
+import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
@@ -28,7 +28,6 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => (
             copyable={true}
             autofill={true}
             showAllOptionsOnEmpty={true}
-            addOnAutofillSelect={true}
         />
         <Verification
             slug="current_landuse_group"
diff --git a/app/src/frontend/building/sidebar.css b/app/src/frontend/building/sidebar.css
index 037f294d..929dc904 100644
--- a/app/src/frontend/building/sidebar.css
+++ b/app/src/frontend/building/sidebar.css
@@ -162,13 +162,17 @@
     list-style: none;
     padding-left: 0;
 }
-.data-section .data-link-list {
+.data-section .data-entry-list {
     padding: 0;
     list-style: none;
     margin-bottom: 0;
     margin-top: 0.5rem;
 }
-.data-link-list li {
+.data-entry-list li {
     border-color: #6c757d;
     border-radius: 0;
 }
+
+.data-entry-list-button {
+    width: 2.5em;
+}
\ No newline at end of file
diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css
index d601573e..e982d29b 100644
--- a/app/src/frontend/styles/forms.css
+++ b/app/src/frontend/styles/forms.css
@@ -43,9 +43,7 @@ label {
     margin-bottom: 0.25rem;
     margin-right: 0.25rem;
 }
-form .btn {
-    margin-bottom: 0.25rem;
-}
+
 .buttons-container.btn-center {
     margin-right: 0;
     text-align: center;