carbon-react 144.9.4 → 144.9.5

package/esm/components/select/multi-select/multi-select.component.js

@@ -63,16 +63,18 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const accessibilityLabelId = useRef(guid());
   const containerRef = useRef(null);
   const listboxRef = useRef(null);
+  const isInputFocused = useRef(false);
   const isClickTriggeredBySelect = useRef(false);
   const isMouseDownReported = useRef(false);
   const isMouseDownOnInput = useRef(false);
-  const [isOpenedByFocus, setIsOpenedByFocus] = useState(false);
+  const isOpenedByFocus = useRef(false);
   const isControlled = useRef(value !== undefined);
   const [textboxRef, setTextboxRef] = useState();
-  const [open, setOpen] = useState(false);
+  const [isOpen, setOpenState] = useState(false);
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = useState("");
+  const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
   const inputId = useRef(id || guid());
   const {
@@ -81,12 +83,21 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
+  const focusTimer = useRef(null);
   const actualValue = isControlled.current ? value : selectedValue;
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  const setOpen = useCallback(() => {
+    setOpenState(isAlreadyOpen => {
+      if (!isAlreadyOpen && onOpen) {
+        onOpen();
+      }
+      return true;
+    });
+  }, [onOpen]);
   const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
@@ -133,12 +144,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     if (match) {
       setHighlightedValue(match.props.value);
     }
+    setFilterText(newValue);
     setTextValue(newValue);
-    if (!open) {
-      onOpen?.();
-    }
-    setOpen(true);
-  }, [children, open, onOpen]);
+    setOpen();
+  }, [children, setOpen]);
   const removeSelectedValue = useCallback(index => {
     isClickTriggeredBySelect.current = true;
     updateValue(previousValue => {
@@ -155,21 +164,21 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-    onKeyDown?.(event);
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
     if (readOnly) {
       return;
     }
     if (!event.defaultPrevented && isNavigationKey(key)) {
       event.preventDefault();
-      if (!open) {
-        onOpen?.();
-      }
-      setOpen(true);
+      setOpen();
     }
-    if (isDeleteKey && textValue === "") {
+    if (isDeleteKey && (filterText === "" || textValue === "")) {
       removeSelectedValue(-1);
     }
-  }, [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
     return actualValue && actualValue.length ? React.Children.map(children, child => {
       return /*#__PURE__*/React.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
@@ -179,18 +188,19 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
-    if (!open) {
+    if (!isOpen) {
       return;
     }
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
+      setFilterText("");
       setHighlightedValue("");
-      setOpen(false);
+      setOpenState(false);
     }
     isClickTriggeredBySelect.current = false;
-  }, [open]);
+  }, [isOpen]);
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
     let matchingOptionValue;
@@ -251,53 +261,103 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const onFilterChange = useStableCallback(onFilterChangeProp);
   const isFirstRender = useRef(true);
   useEffect(() => {
-    if (!isFirstRender.current) {
-      onFilterChange?.(textValue);
+    if (onFilterChange && !isFirstRender.current) {
+      onFilterChange(filterText);
     }
-  }, [onFilterChange, textValue]);
+  }, [onFilterChange, filterText]);
   useEffect(() => {
     isFirstRender.current = false;
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    onClick?.(event);
-    if (openOnFocus && isOpenedByFocus) {
-      setIsOpenedByFocus(false);
-      return;
+    if (onClick) {
+      onClick(event);
     }
-    if (open) {
-      setTextValue("");
-      setOpen(false);
-    } else {
+
+    /* istanbul ignore else */
+    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
+      if (isOpen) {
+        setFilterText("");
+        setOpenState(false);
+        return;
+      }
       onOpen?.();
-      setOpen(true);
+      setOpenState(true);
+    } else {
+      // This is tested in Playwright.
+      // This line of code is triggered when a user initially clicks on the input when `openOnFocus` is true.
+      isOpenedByFocus.current = false;
     }
   }
+  function handleDropdownIconClick(event) {
+    isMouseDownReported.current = false;
+    if (onClick) {
+      onClick(event);
+    }
+    setOpenState(isAlreadyOpen => {
+      if (isAlreadyOpen) {
+        setFilterText("");
+        return false;
+      }
+      if (onOpen) {
+        onOpen();
+      }
+      return true;
+    });
+  }
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
     if (isMouseDownReported.current) {
       return;
     }
-    onBlur?.(event);
-    setTextValue("");
-    setOpen(false);
+    isInputFocused.current = false;
+    if (onBlur) {
+      onBlur(event);
+    }
   }
-  function handleTextboxMouseDown() {
+  function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
-    isMouseDownOnInput.current = true;
+    if (event.target.dataset.element === "input") {
+      isMouseDownOnInput.current = true;
+    }
   }
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
   function handleTextboxFocus(event) {
-    onFocus?.(event);
+    const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      if (open) return;
-      onOpen?.();
-      if (isMouseDownOnInput.current) {
-        setIsOpenedByFocus(true);
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
       }
-      setOpen(true);
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            isOpenedByFocus.current = false;
+            return false;
+          }
+          if (isMouseDownOnInput.current) {
+            isOpenedByFocus.current = true;
+          }
+          return true;
+        });
+      });
+    } else if (onFocus && !isInputFocused.current) {
+      triggerFocus();
+      isInputFocused.current = true;
     }
   }
   const onSelectOption = useCallback(optionData => {
@@ -327,8 +387,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = useCallback(() => {
-    setOpen(false);
-    setTextValue("");
+    setOpenState(false);
+    setFilterText("");
   }, []);
   const assignInput = useCallback(element => {
     if (!element) return;
@@ -355,6 +415,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
+      iconOnClick: handleDropdownIconClick,
+      iconOnMouseDown: handleTextboxMouseDown,
       onKeyDown: handleTextboxKeydown,
       onChange: handleTextboxChange,
       tooltipPosition,
@@ -383,7 +445,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: textValue.trim(),
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     isLoading: isLoading,
@@ -393,7 +455,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     multiselectValues: actualValue,
-    isOpen: open,
+    isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
@@ -407,7 +469,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    isOpen: open
+    isOpen: isOpen
   }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(StyledAccessibilityLabelContainer, {
@@ -421,7 +483,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
-    isOpen: open,
+    isOpen: isOpen,
     labelId: labelId
   }, getTextboxProps()))), selectList);
 });

package/lib/components/select/multi-select/multi-select.component.js

@@ -72,16 +72,18 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);
   const listboxRef = (0, _react.useRef)(null);
+  const isInputFocused = (0, _react.useRef)(false);
   const isClickTriggeredBySelect = (0, _react.useRef)(false);
   const isMouseDownReported = (0, _react.useRef)(false);
   const isMouseDownOnInput = (0, _react.useRef)(false);
-  const [isOpenedByFocus, setIsOpenedByFocus] = (0, _react.useState)(false);
+  const isOpenedByFocus = (0, _react.useRef)(false);
   const isControlled = (0, _react.useRef)(value !== undefined);
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
-  const [open, setOpen] = (0, _react.useState)(false);
+  const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
+  const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
   const inputId = (0, _react.useRef)(id || (0, _guid.default)());
   const {
@@ -90,12 +92,21 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     id: inputId.current,
     label
   });
+  const focusTimer = (0, _react.useRef)(null);
   const actualValue = isControlled.current ? value : selectedValue;
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  const setOpen = (0, _react.useCallback)(() => {
+    setOpenState(isAlreadyOpen => {
+      if (!isAlreadyOpen && onOpen) {
+        onOpen();
+      }
+      return true;
+    });
+  }, [onOpen]);
   const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
@@ -142,12 +153,10 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     if (match) {
       setHighlightedValue(match.props.value);
     }
+    setFilterText(newValue);
     setTextValue(newValue);
-    if (!open) {
-      onOpen?.();
-    }
-    setOpen(true);
-  }, [children, open, onOpen]);
+    setOpen();
+  }, [children, setOpen]);
   const removeSelectedValue = (0, _react.useCallback)(index => {
     isClickTriggeredBySelect.current = true;
     updateValue(previousValue => {
@@ -164,21 +173,21 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-    onKeyDown?.(event);
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
     if (readOnly) {
       return;
     }
     if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
-      if (!open) {
-        onOpen?.();
-      }
-      setOpen(true);
+      setOpen();
     }
-    if (isDeleteKey && textValue === "") {
+    if (isDeleteKey && (filterText === "" || textValue === "")) {
       removeSelectedValue(-1);
     }
-  }, [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = (0, _react.useMemo)(() => {
     return actualValue && actualValue.length ? _react.default.Children.map(children, child => {
       return /*#__PURE__*/_react.default.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
@@ -188,18 +197,19 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   }, [children, actualValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
-    if (!open) {
+    if (!isOpen) {
       return;
     }
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
+      setFilterText("");
       setHighlightedValue("");
-      setOpen(false);
+      setOpenState(false);
     }
     isClickTriggeredBySelect.current = false;
-  }, [open]);
+  }, [isOpen]);
   const mapValuesToPills = (0, _react.useMemo)(() => {
     const canDelete = !disabled && !readOnly;
     let matchingOptionValue;
@@ -260,53 +270,103 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
   const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
-    if (!isFirstRender.current) {
-      onFilterChange?.(textValue);
+    if (onFilterChange && !isFirstRender.current) {
+      onFilterChange(filterText);
     }
-  }, [onFilterChange, textValue]);
+  }, [onFilterChange, filterText]);
   (0, _react.useEffect)(() => {
     isFirstRender.current = false;
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    onClick?.(event);
-    if (openOnFocus && isOpenedByFocus) {
-      setIsOpenedByFocus(false);
-      return;
+    if (onClick) {
+      onClick(event);
     }
-    if (open) {
-      setTextValue("");
-      setOpen(false);
-    } else {
+
+    /* istanbul ignore else */
+    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
+      if (isOpen) {
+        setFilterText("");
+        setOpenState(false);
+        return;
+      }
       onOpen?.();
-      setOpen(true);
+      setOpenState(true);
+    } else {
+      // This is tested in Playwright.
+      // This line of code is triggered when a user initially clicks on the input when `openOnFocus` is true.
+      isOpenedByFocus.current = false;
     }
   }
+  function handleDropdownIconClick(event) {
+    isMouseDownReported.current = false;
+    if (onClick) {
+      onClick(event);
+    }
+    setOpenState(isAlreadyOpen => {
+      if (isAlreadyOpen) {
+        setFilterText("");
+        return false;
+      }
+      if (onOpen) {
+        onOpen();
+      }
+      return true;
+    });
+  }
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
     if (isMouseDownReported.current) {
       return;
     }
-    onBlur?.(event);
-    setTextValue("");
-    setOpen(false);
+    isInputFocused.current = false;
+    if (onBlur) {
+      onBlur(event);
+    }
   }
-  function handleTextboxMouseDown() {
+  function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
-    isMouseDownOnInput.current = true;
+    if (event.target.dataset.element === "input") {
+      isMouseDownOnInput.current = true;
+    }
   }
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
   function handleTextboxFocus(event) {
-    onFocus?.(event);
+    const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {
-      if (open) return;
-      onOpen?.();
-      if (isMouseDownOnInput.current) {
-        setIsOpenedByFocus(true);
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
       }
-      setOpen(true);
+
+      // we need to use a timeout here as there is a race condition when rendered in a modal
+      // whereby the select list isn't visible when the select is auto focused straight away
+      focusTimer.current = setTimeout(() => {
+        setOpenState(isAlreadyOpen => {
+          if (isAlreadyOpen) {
+            return true;
+          }
+          if (onOpen) {
+            onOpen();
+          }
+          if (onFocus && !isInputFocused.current) {
+            triggerFocus();
+            isInputFocused.current = true;
+          }
+          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
+            isOpenedByFocus.current = false;
+            return false;
+          }
+          if (isMouseDownOnInput.current) {
+            isOpenedByFocus.current = true;
+          }
+          return true;
+        });
+      });
+    } else if (onFocus && !isInputFocused.current) {
+      triggerFocus();
+      isInputFocused.current = true;
     }
   }
   const onSelectOption = (0, _react.useCallback)(optionData => {
@@ -336,8 +396,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = (0, _react.useCallback)(() => {
-    setOpen(false);
-    setTextValue("");
+    setOpenState(false);
+    setFilterText("");
   }, []);
   const assignInput = (0, _react.useCallback)(element => {
     if (!element) return;
@@ -364,6 +424,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
+      iconOnClick: handleDropdownIconClick,
+      iconOnMouseDown: handleTextboxMouseDown,
       onKeyDown: handleTextboxKeydown,
       onChange: handleTextboxChange,
       tooltipPosition,
@@ -392,7 +454,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: textValue.trim(),
+    filterText: filterText.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     isLoading: isLoading,
@@ -402,7 +464,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     multiselectValues: actualValue,
-    isOpen: open,
+    isOpen: isOpen,
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
@@ -416,7 +478,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    isOpen: open
+    isOpen: isOpen
   }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
@@ -430,7 +492,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
-    isOpen: open,
+    isOpen: isOpen,
     labelId: labelId
   }, getTextboxProps()))), selectList);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.9.4",
+  "version": "144.9.5",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",