Tag autocomplete behavior fix

src/editor/widgets/Autocomplete.js

@@ -5,19 +5,26 @@ const Autocomplete = props => {
 
   const element = useRef();
 
+  const [ value, setValue ] = useState('');
+
   const [ inputItems, setInputItems ] = useState(props.vocabulary);
 
-  useEffect(() =>
+  useEffect(() => element.current?.querySelector('input')?.focus(), []);
-    element.current?.querySelector('input').focus(), []);
 
+  const onSubmit = inputValue => {
+    setValue('');
+    setInputItems([]); // Force-hide the popup
+    if (inputValue.trim().length > 0)
+      props.onSubmit(inputValue);
+  }
+  
   const onInputValueChange = ({ inputValue }) => {
-    props.onChange(inputValue);
+    setValue(inputValue);
-
     setInputItems(
       props.vocabulary.filter(item =>
         item.toLowerCase().startsWith(inputValue.toLowerCase())))
   }
-
+  
   const {
     isOpen,
     getMenuProps,
@@ -25,19 +32,23 @@ const Autocomplete = props => {
     getComboboxProps,
     highlightedIndex,
     getItemProps,
-  } = useCombobox({ items: inputItems, onInputValueChange });
+    setInputValue
+  } = useCombobox({ 
+    items: inputItems, 
+    onInputValueChange, 
+    onSelectedItemChange: ({ inputValue }) => {
+      onSubmit(inputValue);
+      setInputValue('');
+    } 
+  });
 
-  // TODO onEnter?
   const onKeyDown = evt => {
-    if (evt.which == 13) {
+    if (evt.which == 13 && highlightedIndex == -1)
-      if (!isOpen || highlightedIndex == -1) {
+      onSubmit(value);
-        setInputItems([]); // To prevent the popup from showing up afterwards
+    else if (evt.which == 40 && value.length == 0)
-        props.onKeyDown(evt);
+      setInputItems(props.vocabulary); // Show all options on key down
-      }
+    else if (evt.which == 27)
-    } else if (evt.which == 40 && props.content.length == 0) {
+      props.onCancel && props.onCancel();
-      // To make options appear on key down
-      setInputItems(props.vocabulary);
-    }
   }
 
   return (
@@ -45,8 +56,9 @@ const Autocomplete = props => {
       <div {...getComboboxProps()}>
         <input 
           {...getInputProps({ onKeyDown  })}
-          placeholder={props.placeholder}  
+          placeholder={props.placeholder}
-          value={props.content} />
+          defaultValue={props.initialValue}
+          value={value} />
       </div>
       <ul {...getMenuProps()}>
         {isOpen && inputItems.map((item, index) => (

src/editor/widgets/tag/TagWidget.jsx

@@ -9,7 +9,6 @@ import Autocomplete from '../Autocomplete';
 const TagWidget = props => {
 
   const [ showDelete, setShowDelete ] = useState(false);
-  const [ newTag, setNewTag ] = useState('');
 
   // Every body with a 'tagging' purpose is considered a tag
   const tagBodies = props.annotation ? 
@@ -27,11 +26,8 @@ const TagWidget = props => {
     props.onRemoveBody(tag);
   }
 
-  const onKeyDown = evt => {
+  const onSubmit = tag => {
-    if (evt.which === 13) { // Enter
+    props.onAppendBody({ type: 'TextualBody', purpose: 'tagging', value: tag.trim() });
-      props.onAppendBody({ type: 'TextualBody', purpose: 'tagging', value: newTag.trim() });
-      setNewTag(''); // Clear the input
-    }
   }
 
   return (
@@ -58,10 +54,8 @@ const TagWidget = props => {
 
       { !props.readOnly &&
         <Autocomplete 
-          content={newTag}
           placeholder={i18n.t('Add tag...')}
-          onChange={setNewTag}
+          onSubmit={onSubmit}
-          onKeyDown={onKeyDown} 
           vocabulary={props.vocabulary || []} />
       }
     </div>

src/relations/editor/RelationEditor.jsx

@@ -26,11 +26,6 @@ export default class RelationEditor extends Component {
 
   constructor(props) {
     super(props);
-
-    this.state = {
-      content: getContent(props.relation)
-    }
-
     this.element = React.createRef();
   }
 
@@ -42,11 +37,6 @@ export default class RelationEditor extends Component {
     this.setPosition();
   }
 
-  componentWillReceiveProps(next) {
-    if (this.props.relation !== next.relation)
-      this.setState({ content : getContent(next.relation) });
-  }
-
   setPosition() {
     if (this.element.current) {
       const el = this.element.current;
@@ -56,33 +46,20 @@ export default class RelationEditor extends Component {
       el.style.left = `${midX}px`;
     }
   }
-
-  onChange = value =>
-    this.setState({ content: value });
-
-  onKeyDown = evt => {
-    if (evt.which === 13) { // Enter = Submit
-      evt.preventDefault();
-      this.onSubmit();
-    } else if (evt.which === 27) {
-      this.props.onCancel();
-    }
-  }
   
-  onSubmit = () => {
+  onSubmit = value => {
     const updatedAnnotation = this.props.relation.annotation.clone({
       motivation: 'linking',
       body: [{
         type: 'TextualBody',
-        value: this.state.content,
+        value,
         purpose: 'tagging'
       }]
     });
 
     const updatedRelation = { ...this.props.relation, annotation: updatedAnnotation };
-
     
-    if (this.state.content) {
+    if (value) {
       // Fire create or update event
       if (this.props.relation.annotation.bodies.length === 0) 
         this.props.onRelationCreated(updatedRelation, this.props.relation);
@@ -102,10 +79,10 @@ export default class RelationEditor extends Component {
       <div className="r6o-relation-editor" ref={this.element}>
         <div className="input-wrapper">
           <Autocomplete 
-            content={this.state.content}
+            initialValue={getContent(this.props.relation)}
             placeholder="Tag..."
-            onChange={this.onChange}
+            onSubmit={this.onSubmit} 
-            onKeyDown={this.onKeyDown} 
+            onCancel={this.props.onCancel}
             vocabulary={this.props.vocabulary || []} />
         </div>