ui: autocomplete: fix value is not a function

packages/ui-default/components/autocomplete/components/AutoComplete.jsx

@@ -28,8 +28,8 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
   const freeSoloConverter = freeSolo ? props.freeSoloConverter ?? ((i) => i) : ((i) => i);
 
   const [focused, setFocused] = useState(false); // is focused
-  const [selected, setSelected] = useState(defaultItems); // selected items
+  const [selected, setSelected] = useState(multi ? defaultItems : []); // selected items
-  const [selectedKeys, setSelectedKeys] = useState(defaultItems.map((i) => itemKey(i))); // keys of selected items
+  const [selectedKeys, setSelectedKeys] = useState(multi ? defaultItems.map((i) => itemKey(i)) : []); // keys of selected items
   const [itemList, setItemList] = useState([]); // items list
   const [currentItem, setCurrentItem] = useState(null); // index of current item (in item list)
 
@@ -99,6 +99,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
       inputRef.current.focus();
     } else {
       inputRef.current.value = itemKey(item);
+      dispatchChange();
     }
     setItemList([]);
     setCurrentItem(null);
@@ -214,6 +215,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
           }}
           onBlur={() => setFocused(false)}
           onKeyDown={handleInputKeyDown}
+          defaultValue={multi ? '' : defaultItems.join(',')}
         />
       </div>
       {focused && itemList.length > 0 && (

packages/ui-default/components/autocomplete/index.jsx

@@ -17,7 +17,14 @@ export default class AutoComplete extends DOMAttachedObject {
       ...options,
     };
     this.ref = null;
+    this.clear = this.clear.bind(this);
     this.onChange = this.onChange.bind(this);
+    this.attach = this.attach.bind(this);
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+    this.value = this.value.bind(this);
+    this.detach = this.detach.bind(this);
+    this.focus = this.focus.bind(this);
     this.container = document.createElement('div');
     this.$dom.addClass('autocomplete-dummy').after(this.container);
     // Note: use `setTimeout(fn, 0)` to ensure that code is executed after browser autofill
@@ -63,6 +70,10 @@ export default class AutoComplete extends DOMAttachedObject {
     this.ref.closeList();
   }
 
+  value() {
+    return this.$dom.val();
+  }
+
   detach() {
     if (this.detached) return;
     super.detach();