carbon-react 142.0.3 → 142.0.4
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/esm/components/select/filterable-select/filterable-select.component.js +1 -0
- package/esm/components/select/multi-select/multi-select.component.js +16 -0
- package/lib/components/select/filterable-select/filterable-select.component.js +1 -0
- package/lib/components/select/multi-select/multi-select.component.js +16 -0
- package/package.json +1 -1
|
@@ -66,6 +66,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
66
66
|
const isClickTriggeredBySelect = useRef(false);
|
|
67
67
|
const isMouseDownReported = useRef(false);
|
|
68
68
|
const isMouseDownOnInput = useRef(false);
|
|
69
|
+
const isOpenedByFocus = useRef(false);
|
|
69
70
|
const isControlled = useRef(value !== undefined);
|
|
70
71
|
const [textboxRef, setTextboxRef] = useState();
|
|
71
72
|
const [isOpen, setOpenState] = useState(false);
|
|
@@ -271,6 +272,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
271
272
|
if (onClick) {
|
|
272
273
|
onClick(event);
|
|
273
274
|
}
|
|
275
|
+
if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
|
|
276
|
+
if (isOpen) {
|
|
277
|
+
setFilterText("");
|
|
278
|
+
setOpenState(false);
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
onOpen?.();
|
|
282
|
+
setOpenState(true);
|
|
283
|
+
} else {
|
|
284
|
+
isOpenedByFocus.current = false;
|
|
285
|
+
}
|
|
274
286
|
}
|
|
275
287
|
function handleDropdownIconClick(event) {
|
|
276
288
|
isMouseDownReported.current = false;
|
|
@@ -329,8 +341,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
|
|
|
329
341
|
isInputFocused.current = true;
|
|
330
342
|
}
|
|
331
343
|
if (isMouseDownReported.current && !isMouseDownOnInput.current) {
|
|
344
|
+
isOpenedByFocus.current = false;
|
|
332
345
|
return false;
|
|
333
346
|
}
|
|
347
|
+
if (isMouseDownOnInput.current) {
|
|
348
|
+
isOpenedByFocus.current = true;
|
|
349
|
+
}
|
|
334
350
|
return true;
|
|
335
351
|
});
|
|
336
352
|
});
|
|
@@ -75,6 +75,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
|
|
|
75
75
|
const isClickTriggeredBySelect = (0, _react.useRef)(false);
|
|
76
76
|
const isMouseDownReported = (0, _react.useRef)(false);
|
|
77
77
|
const isMouseDownOnInput = (0, _react.useRef)(false);
|
|
78
|
+
const isOpenedByFocus = (0, _react.useRef)(false);
|
|
78
79
|
const isControlled = (0, _react.useRef)(value !== undefined);
|
|
79
80
|
const [textboxRef, setTextboxRef] = (0, _react.useState)();
|
|
80
81
|
const [isOpen, setOpenState] = (0, _react.useState)(false);
|
|
@@ -280,6 +281,17 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
|
|
|
280
281
|
if (onClick) {
|
|
281
282
|
onClick(event);
|
|
282
283
|
}
|
|
284
|
+
if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
|
|
285
|
+
if (isOpen) {
|
|
286
|
+
setFilterText("");
|
|
287
|
+
setOpenState(false);
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
onOpen?.();
|
|
291
|
+
setOpenState(true);
|
|
292
|
+
} else {
|
|
293
|
+
isOpenedByFocus.current = false;
|
|
294
|
+
}
|
|
283
295
|
}
|
|
284
296
|
function handleDropdownIconClick(event) {
|
|
285
297
|
isMouseDownReported.current = false;
|
|
@@ -338,8 +350,12 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
|
|
|
338
350
|
isInputFocused.current = true;
|
|
339
351
|
}
|
|
340
352
|
if (isMouseDownReported.current && !isMouseDownOnInput.current) {
|
|
353
|
+
isOpenedByFocus.current = false;
|
|
341
354
|
return false;
|
|
342
355
|
}
|
|
356
|
+
if (isMouseDownOnInput.current) {
|
|
357
|
+
isOpenedByFocus.current = true;
|
|
358
|
+
}
|
|
343
359
|
return true;
|
|
344
360
|
});
|
|
345
361
|
});
|