@homebound/beam 2.377.0 → 2.377.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -191,8 +191,18 @@ function ComboBoxBase(props) {
|
|
|
191
191
|
const [debouncedSearch] = (0, use_debounce_1.useDebounce)(searchValue, 300);
|
|
192
192
|
// Reset inputValue when closed or selected changes
|
|
193
193
|
(0, react_1.useEffect)(() => {
|
|
194
|
-
if (state.isOpen && multiselect) {
|
|
195
|
-
//
|
|
194
|
+
if (state.isOpen && multiselect && !debouncedSearch) {
|
|
195
|
+
// When a single-select is open, with "inputValue=Blue", when "Blue" is actually
|
|
196
|
+
// selected (our value changes), the box will close immediately, so the inputValue
|
|
197
|
+
// will get reset in the `!isOpen` case.
|
|
198
|
+
//
|
|
199
|
+
// When a multi-select is open, with "inputValue=Blue", when "Blue" is actually
|
|
200
|
+
// selected (our value changes), we leave the box open, and we want to reset
|
|
201
|
+
// the "inputValue=(empty) so the user can now type "inputType=Green".
|
|
202
|
+
//
|
|
203
|
+
// ...unless the multi-select is using onSearch, in which case we want to let them
|
|
204
|
+
// only explicitly trigger a new `onSearch` by changing the existing inputValue,
|
|
205
|
+
// i.e. they might want to keep typing "Blueish".
|
|
196
206
|
setFieldState((prevState) => ({
|
|
197
207
|
...prevState,
|
|
198
208
|
inputValue: "",
|
|
@@ -206,7 +216,7 @@ function ComboBoxBase(props) {
|
|
|
206
216
|
inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
|
|
207
217
|
}));
|
|
208
218
|
}
|
|
209
|
-
}, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]);
|
|
219
|
+
}, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly, debouncedSearch]);
|
|
210
220
|
// Call on search callback when the user types in the input field
|
|
211
221
|
(0, react_1.useEffect)(() => {
|
|
212
222
|
onSearch === null || onSearch === void 0 ? void 0 : onSearch(debouncedSearch !== null && debouncedSearch !== void 0 ? debouncedSearch : "");
|