Improve multi-edit, autofill usability

app/src/frontend/building/data-components/autofill/autofillDropdown.tsx

@@ -27,14 +27,14 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> =  props => {
 
     useEffect(() => {
         const doAsync = async () => {
-            if (!props.editing || props.fieldValue === '') return setOptions(null);
+            if (!props.editing || (props.fieldValue === '' && options == null)) return setOptions(null);
 
             const url = `/api/autofill?field_name=${props.fieldName}&field_value=${props.fieldValue}`;
-            const { options } = await apiGet(url);
+            const { options: newOptions } = await apiGet(url);
 
             if (!props.editing) return;
 
-            setOptions(options);
+            setOptions(newOptions);
         };
 
         doAsync();
@@ -47,6 +47,7 @@ export const AutofillDropdown: React.FC<AutofillDropdownProps> =  props => {
             {
                 options.map(option =>
                     <div
+                        key={option.id}
                         onMouseDown={e => /* prevent input blur */ e.preventDefault()}
                         onClick={e => {
                             props.onSelect(option.value);

app/src/frontend/building/data-components/data-entry-input.tsx

@@ -5,6 +5,7 @@ import { AutofillDropdown } from './autofill/autofillDropdown';
 export interface TextDataEntryInputProps {
     slug: string;
     name?: string;
+    id?: string;
     onChange?: (key: string, val: any) => void;
 
     maxLength?: number;
@@ -16,6 +17,8 @@ export interface TextDataEntryInputProps {
 
 export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}> = props => {
     const [isEditing, setEditing] = useState(false);
+    const nameAttr = props.name || props.slug;
+    const idAttr = props.id || props.slug;
 
     const handleChange = (value: string) => {
         console.log(value);
@@ -27,17 +30,18 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
     };
 
     return (
-        <div
-            onFocus={e => setEditing(true)}
-            onBlur={e => setEditing(false)}
-        >
+        <>
             <input className="form-control" type="text"
-                name={props.slug}
+                id={idAttr}
+                name={nameAttr}
                 value={props.value || ''}
                 maxLength={props.maxLength}
                 disabled={props.disabled}
                 placeholder={props.placeholder}
                 onChange={e => handleChange(e.target.value)}
+                onInput={e => setEditing(true)}
+                onFocus={e => setEditing(true)}
+                onBlur={e => setEditing(false)}
             />
             {
                 props.autofill &&
@@ -49,6 +53,6 @@ export const DataEntryInput: React.FC<TextDataEntryInputProps & {value?: string}
                     fieldValue={props.value}
                 />
             }
-        </div>
+        </>
     );
 };

app/src/frontend/building/data-components/multi-data-entry.tsx

@@ -69,16 +69,18 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                 tooltip={props.tooltip}
                 disabled={props.disabled || props.value == undefined || props.value.length === 0}
             />
-            <ul className="data-link-list">
+            <ul id={props.slug} className="data-link-list">
             {
                 values.length === 0 &&
                 <div>No entries</div>
             }
             {
                 values.map((val, i) => (
-                    <li className="input-group" key={i}>
+                    <li className="input-group" key={i /* is as key prevents input component recreation on edit */}>
                         <DataEntryInput
                             slug={props.slug}
+                            name={`${props.slug}-${i}`}
+                            id={`${props.slug}-${i}`}
                             value={val}
                             disabled={isDisabled}
                             onChange={(key, val) => this.edit(i, val)}
@@ -105,6 +107,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                 <div className="input-group">
                     <DataEntryInput
                         slug={props.slug}
+                        name={`${props.slug}-new`}
+                        id={`${props.slug}-new`}
                         value={this.state.newValue}
                         disabled={props.disabled}
                         onChange={(key, val) => this.setNewValue(val)}