From 75feeb2959ef0d2cc86ebd2d46b788a17c3db45f Mon Sep 17 00:00:00 2001
From: Rainer Simon <rainer.simon@ait.ac.at>
Date: Tue, 13 Oct 2020 14:04:11 +0200
Subject: [PATCH] Another attempt at fixing autosuggest behavior

---
 src/editor/widgets/Autocomplete.js | 158 ++++++++++++++++-------------
 1 file changed, 86 insertions(+), 72 deletions(-)

diff --git a/src/editor/widgets/Autocomplete.js b/src/editor/widgets/Autocomplete.js
index cae0435..c35a0a5 100644
--- a/src/editor/widgets/Autocomplete.js
+++ b/src/editor/widgets/Autocomplete.js
@@ -1,83 +1,97 @@
-import React, { useState } from 'react'
+import React, { Component, createRef } from 'react'
 import { useCombobox } from 'downshift'
 
-const Autocomplete = props => {
+export default class Autocomplete extends Component {
 
-  const [ inputItems, setInputItems ] = useState(props.vocabulary);
-  
-  const onInputValueChange = ({ inputValue }) => {
-    if (inputValue.length > 0) {
-      const prefixMatches = props.vocabulary.filter(item => {
-        return item.toLowerCase().startsWith(inputValue.toLowerCase());
-      });
+  constructor(props) {
+    super(props);
 
-      setInputItems(prefixMatches);
-    } else {
-      // ...or none, if the input is empty
-      setInputItems([]);
-    }      
-  }
-  
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    getComboboxProps,
-    highlightedIndex,
-    getItemProps,
-    setInputValue
-  } = useCombobox({ 
-    items: inputItems, 
-    onInputValueChange, 
-    onSelectedItemChange: ({ inputValue }) => {
-      onSubmit(inputValue);
-      setInputValue('');
-    } 
-  });
+    this.element = createRef();
 
-  const onSubmit = inputValue => {
-    setInputValue('');
-    if (inputValue.trim().length > 0)
-      props.onSubmit(inputValue);
-  }
-
-  const onKeyUp = evt => {
-    const { value } = evt.target;
-    
-    if (evt.which == 13 && highlightedIndex == -1) {
-      onSubmit(value);
-    } else if (evt.which == 40 && value.length == 0) {
-      setInputItems(props.vocabulary); // Show all options on key down
-    } else if (evt.which == 27) {
-      props.onCancel && props.onCancel();
-    } else {
-      props.onChange && props.onChange(value);
+    this.state = {
+      inputItems: props.vocabulary || []
     }
   }
 
-  return (
-    <div className="r6o-autocomplete">
-      <div {...getComboboxProps()}>
-        <input 
-          {...getInputProps({ onKeyUp })}
-          placeholder={props.placeholder} />
+  componentDidMount() {
+    if (this.props.initialValue && this.element.current)
+      this.element.current.querySelector('input').value = this.props.initialValue;
+  }
+  
+  onInputValueChange = ({ inputValue }) => {
+    if (inputValue.length > 0) {
+      const prefixMatches = this.props.vocabulary.filter(item => {
+        return item.toLowerCase().startsWith(inputValue.toLowerCase());
+      });
+
+      this.setState({ inputItems: prefixMatches });
+    } else {
+      // ...or none, if the input is empty
+      this.setState({ inputItems: [] });
+    }      
+  }
+
+  render() {
+
+    const {
+      isOpen,
+      getMenuProps,
+      getInputProps,
+      getComboboxProps,
+      highlightedIndex,
+      getItemProps,
+      setInputValue
+    } = useCombobox({ 
+      items: this.state.inputItems, 
+      onInputValueChange: this.onInputValueChange, 
+      onSelectedItemChange: ({ inputValue }) => {
+        onSubmit(inputValue);
+        setInputValue('');
+      } 
+    });
+
+    const onSubmit = inputValue => {
+      setInputValue('');
+      if (inputValue.trim().length > 0)
+        this.props.onSubmit(inputValue);
+    }
+
+    const onKeyUp = evt => {
+      const { value } = evt.target;
+      
+      if (evt.which == 13 && highlightedIndex == -1) {
+        onSubmit(value);
+      } else if (evt.which == 40 && value.length == 0) {
+        setInputItems(this.props.vocabulary); // Show all options on key down
+      } else if (evt.which == 27) {
+        this.props.onCancel && this.props.onCancel();
+      } else {
+        this.props.onChange && this.props.onChange(value);
+      }
+    }
+
+    return (
+      <div className="r6o-autocomplete" ref={this.element}>
+        <div {...getComboboxProps()}>
+          <input 
+            {...getInputProps({ onKeyUp })}
+            placeholder={this.props.placeholder} />
+        </div>
+        <ul {...getMenuProps()}>
+          {isOpen && this.state.inputItems.map((item, index) => (
+            <li style={
+                  highlightedIndex === index
+                    ? { backgroundColor: '#bde4ff' }
+                    : {}
+                }
+                key={`${item}${index}`}
+                {...getItemProps({ item, index })}>
+              {item}
+            </li>
+          ))}
+        </ul>
       </div>
-      <ul {...getMenuProps()}>
-        {isOpen && inputItems.map((item, index) => (
-          <li style={
-                highlightedIndex === index
-                  ? { backgroundColor: '#bde4ff' }
-                  : {}
-              }
-              key={`${item}${index}`}
-              {...getItemProps({ item, index })}>
-            {item}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+    )
+  }
   
 }
-
-export default Autocomplete;
\ No newline at end of file