Another attempt at fixing autosuggest behavior

src/editor/widgets/Autocomplete.js

@@ -1,23 +1,38 @@
-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);
+  constructor(props) {
+    super(props);
 
-  const onInputValueChange = ({ inputValue }) => {
+    this.element = createRef();
+
+    this.state = {
+      inputItems: props.vocabulary || []
+    }
+  }
+
+  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 = props.vocabulary.filter(item => {
+      const prefixMatches = this.props.vocabulary.filter(item => {
         return item.toLowerCase().startsWith(inputValue.toLowerCase());
       });
 
-      setInputItems(prefixMatches);
+      this.setState({ inputItems: prefixMatches });
     } else {
       // ...or none, if the input is empty
-      setInputItems([]);
+      this.setState({ inputItems: [] });
     }      
   }
 
+  render() {
+
     const {
       isOpen,
       getMenuProps,
@@ -27,8 +42,8 @@ const Autocomplete = props => {
       getItemProps,
       setInputValue
     } = useCombobox({ 
-    items: inputItems, 
+      items: this.state.inputItems, 
-    onInputValueChange, 
+      onInputValueChange: this.onInputValueChange, 
       onSelectedItemChange: ({ inputValue }) => {
         onSubmit(inputValue);
         setInputValue('');
@@ -38,7 +53,7 @@ const Autocomplete = props => {
     const onSubmit = inputValue => {
       setInputValue('');
       if (inputValue.trim().length > 0)
-      props.onSubmit(inputValue);
+        this.props.onSubmit(inputValue);
     }
 
     const onKeyUp = evt => {
@@ -47,23 +62,23 @@ const Autocomplete = props => {
       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
+        setInputItems(this.props.vocabulary); // Show all options on key down
       } else if (evt.which == 27) {
-      props.onCancel && props.onCancel();
+        this.props.onCancel && this.props.onCancel();
       } else {
-      props.onChange && props.onChange(value);
+        this.props.onChange && this.props.onChange(value);
       }
     }
 
     return (
-    <div className="r6o-autocomplete">
+      <div className="r6o-autocomplete" ref={this.element}>
         <div {...getComboboxProps()}>
           <input 
             {...getInputProps({ onKeyUp })}
-          placeholder={props.placeholder} />
+            placeholder={this.props.placeholder} />
         </div>
         <ul {...getMenuProps()}>
-        {isOpen && inputItems.map((item, index) => (
+          {isOpen && this.state.inputItems.map((item, index) => (
             <li style={
                   highlightedIndex === index
                     ? { backgroundColor: '#bde4ff' }
@@ -77,7 +92,6 @@ const Autocomplete = props => {
         </ul>
       </div>
     )
-  
   }
   
-export default Autocomplete;
+}