diff --git a/packages/ui-default/components/autocomplete/components/AutoComplete.jsx b/packages/ui-default/components/autocomplete/components/AutoComplete.jsx index 296d5227a..06178f072 100644 --- a/packages/ui-default/components/autocomplete/components/AutoComplete.jsx +++ b/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 [selectedKeys, setSelectedKeys] = useState(defaultItems.map((i) => itemKey(i))); // keys of selected items + const [selected, setSelected] = useState(multi ? defaultItems : []); // 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(',')} /> {focused && itemList.length > 0 && ( diff --git a/packages/ui-default/components/autocomplete/index.jsx b/packages/ui-default/components/autocomplete/index.jsx index dc8d64fc5..3c6c349d4 100644 --- a/packages/ui-default/components/autocomplete/index.jsx +++ b/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();