@box/blueprint-web 6.13.0 → 6.15.0
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.
- package/lib-esm/combobox/combobox.js +16 -6
- package/package.json +2 -2
|
@@ -100,7 +100,14 @@ const RootInner = ({
|
|
|
100
100
|
}
|
|
101
101
|
return getSelectedOptionValues(valueProp);
|
|
102
102
|
}, [getSelectedOptionValues, valueProp]);
|
|
103
|
+
const focusInput = useCallback(() => {
|
|
104
|
+
inputRef.current?.focus();
|
|
105
|
+
}, []);
|
|
103
106
|
const setValue = newSelectedValue => {
|
|
107
|
+
// Move focus back to input for single selects
|
|
108
|
+
if (!Array.isArray(newSelectedValue)) {
|
|
109
|
+
focusInput();
|
|
110
|
+
}
|
|
104
111
|
if (!onValueChange) {
|
|
105
112
|
return;
|
|
106
113
|
}
|
|
@@ -141,9 +148,6 @@ const RootInner = ({
|
|
|
141
148
|
},
|
|
142
149
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
150
|
[displayAvatar]);
|
|
144
|
-
const focusInput = useCallback(() => {
|
|
145
|
-
inputRef.current?.focus();
|
|
146
|
-
}, []);
|
|
147
151
|
const renderSelectItemOption = useCallback(option => {
|
|
148
152
|
const value = getOptionValue(option);
|
|
149
153
|
return jsxs(OptionWithIndicator, {
|
|
@@ -162,10 +166,8 @@ const RootInner = ({
|
|
|
162
166
|
setInputValue('');
|
|
163
167
|
} else if (selectedValueMemoized) {
|
|
164
168
|
setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
|
|
165
|
-
// Also focus input for single-select variant
|
|
166
|
-
focusInput();
|
|
167
169
|
}
|
|
168
|
-
}, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue
|
|
170
|
+
}, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue]);
|
|
169
171
|
const handleKeyDown = useCallback(event => {
|
|
170
172
|
// Close menu
|
|
171
173
|
if (event.key === 'Enter' || event.key === 'Tab') {
|
|
@@ -185,6 +187,12 @@ const RootInner = ({
|
|
|
185
187
|
}
|
|
186
188
|
}
|
|
187
189
|
}, [clearOnEscape, isOpen, multiselect, setInputValue, setOpen, setSelectedValue]);
|
|
190
|
+
const handleOnKeyUp = useCallback(event => {
|
|
191
|
+
// Clear selected value when the input is empty for single-select variant
|
|
192
|
+
if (inputValue === '' && !multiselect) {
|
|
193
|
+
setSelectedValue('');
|
|
194
|
+
}
|
|
195
|
+
}, [inputValue, multiselect, setSelectedValue]);
|
|
188
196
|
// Reset input on blur
|
|
189
197
|
const handleOnBlur = useCallback(() => {
|
|
190
198
|
if (!clearOnBlur || isOpen) {
|
|
@@ -246,6 +254,7 @@ const RootInner = ({
|
|
|
246
254
|
id: comboboxId,
|
|
247
255
|
onBlur: handleOnBlur,
|
|
248
256
|
onKeyDown: handleKeyDown,
|
|
257
|
+
onKeyUp: handleOnKeyUp,
|
|
249
258
|
required: required,
|
|
250
259
|
store: comboboxStore
|
|
251
260
|
})
|
|
@@ -270,6 +279,7 @@ const RootInner = ({
|
|
|
270
279
|
label: label,
|
|
271
280
|
onBlur: handleOnBlur,
|
|
272
281
|
onKeyDown: handleKeyDown,
|
|
282
|
+
onKeyUp: handleOnKeyUp,
|
|
273
283
|
required: required
|
|
274
284
|
}),
|
|
275
285
|
store: comboboxStore
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.15.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@box/storybook-utils": "^0.0.3"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "1cb81c22422493ae61f0e7362180d8d07e03ba2e",
|
|
61
61
|
"module": "lib-esm/index.js",
|
|
62
62
|
"main": "lib-esm/index.js",
|
|
63
63
|
"exports": {
|