carbon-react 123.6.0 → 123.7.0

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

@@ -86,7 +86,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -96,13 +96,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
-  const triggerChange = useCallback(newValue => {
+  const triggerChange = useCallback((newValue, selectionConfirmed) => {
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }, [onChange, createCustomEvent]);
   function findElementWithMatchingText(textToMatch, list) {
@@ -110,7 +111,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       const {
         text
       } = child.props;
-      return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
     });
   }
   const updateValues = useCallback((newFilterText, isDeleteEvent) => {
@@ -119,15 +120,15 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       const isFilterCleared = isDeleteEvent && newFilterText === "";
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
-        triggerChange("");
+        triggerChange("", false);
         return "";
       }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value);
-      if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      triggerChange(match.props.value, false);
+      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -143,7 +144,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -156,7 +157,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }, [updateValues]);
   const fillLastFilterCharacter = useCallback(key => {
     setFilterText(previousFilterText => {
-      if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
+      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
       return previousFilterText;
@@ -251,9 +252,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     };
   }, [handleGlobalClick]);
   useEffect(() => {
-    const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
+    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
@@ -262,7 +263,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       id: selectedOptionId,
       text,
       value: newValue,
-      selectionType
+      selectionType,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "tab") {
       setOpen(false);
@@ -273,8 +275,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
-    setTextValue(text);
-    triggerChange(newValue);
+    setTextValue(text || /* istanbul ignore next */"");
+    triggerChange(newValue, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpen(false);

package/esm/components/select/index.d.ts

@@ -5,7 +5,7 @@ export type { OptionRowProps } from "./option-row";
 export { default as OptionGroupHeader } from "./option-group-header";
 export type { OptionGroupHeaderProps } from "./option-group-header";
 export { default as Select } from "./simple-select";
-export type { SimpleSelectProps } from "./simple-select";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select";
 export { default as FilterableSelect } from "./filterable-select";
 export type { FilterableSelectProps } from "./filterable-select";
 export { default as MultiSelect } from "./multi-select";

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

@@ -100,7 +100,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return true;
     });
   }, [onOpen]);
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -110,7 +110,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -119,11 +120,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-  const updateValue = useCallback(updateFunction => {
+  const updateValue = useCallback((updateFunction, selectionConfirmed) => {
     const newValue = updateFunction(actualValue);
     // only call onChange if an option has been selected or deselected
     if (onChange && newValue.length !== actualValue?.length) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
 
     // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
@@ -158,7 +159,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
       newValue.splice(index, 1);
       return newValue;
-    });
+    }, true);
   }, [updateValue]);
   const handleTextboxKeydown = useCallback(event => {
     const {
@@ -210,6 +211,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, singleValue));
       let pillProps = {};
+      if (!matchingOption) {
+        return null;
+      }
+
+      /* istanbul ignore else */
       if ( /*#__PURE__*/React.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -217,8 +223,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-      const title = pillProps.title || "";
-      const key = title + ( /*#__PURE__*/React.isValidElement(matchingOption) && matchingOption.props.value || index);
+      const title = pillProps.title || /* istanbul ignore next */"";
+      const key = title + ( /*#__PURE__*/React.isValidElement(matchingOption) && matchingOption.props.value || /* istanbul ignore next */index);
       return /*#__PURE__*/React.createElement(StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/React.createElement(Pill, _extends({
@@ -331,7 +337,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     const {
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
@@ -350,7 +357,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         return previousValue;
       }
       return [...previousValue, newValue];
-    });
+    }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = useCallback(() => {
     setOpenState(false);

package/esm/components/select/option/option.component.js

@@ -42,7 +42,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children || text);
+  }, rest, {
+    fill: undefined
+  }), children || text);
 });
 Option.propTypes = {
   "about": PropTypes.string,

package/esm/components/select/select-list/select-list.component.d.ts

@@ -17,6 +17,7 @@ export interface SelectListProps {
         value?: string | Record<string, unknown>;
         id?: string;
         selectionType: string;
+        selectionConfirmed: boolean;
     }) => void;
     /** A callback for when the list should be closed */
     onSelectListClose: () => void;

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

@@ -93,7 +93,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const handleSelect = useCallback(optionData => {
     onSelect({
       ...optionData,
-      selectionType: "click"
+      selectionType: "click",
+      selectionConfirmed: true
     });
   }, [onSelect]);
   const childIdsRef = useRef(null);
@@ -177,13 +178,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined
+      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      selectionConfirmed: false
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
-        selectionType: "tab"
+        selectionType: "tab",
+        selectionConfirmed: false
       });
     } else {
       event.preventDefault();
@@ -222,7 +225,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
         text,
         value,
-        selectionType: "enterKey"
+        selectionType: "enterKey",
+        selectionConfirmed: true
       });
     } else if (isNavigationKey(key)) {
       focusOnAnchor();

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { CommonTextboxProps } from "../../textbox";
 import { ValidationProps } from "../../../__internal__/validations";
-export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+import { CustomSelectChangeEvent } from "../simple-select/simple-select.component";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Prop to specify the aria-label attribute of the component input */
@@ -29,7 +30,7 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/esm/components/select/simple-select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./simple-select.component";
-export type { SimpleSelectProps } from "./simple-select.component";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select.component";

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../select-textbox";
+export interface OptionData {
+    text?: string;
+    value?: string | Record<string, unknown>;
+    id?: string;
+    selectionType: string;
+    selectionConfirmed?: boolean;
+}
+export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElement> {
+    selectionConfirmed?: boolean;
+}
 export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;

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

@@ -82,7 +82,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const childOptions = useMemo(() => React.Children.toArray(children), [children]);
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed = false) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -92,7 +92,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -245,13 +246,13 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
-  function updateValue(newValue, text) {
+  function updateValue(newValue, text, selectionConfirmed) {
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setTextValue(text);
     }
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }
   function onSelectOption(optionData) {
@@ -259,10 +260,11 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       text,
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     const isClickTriggered = selectionType === "click";
-    updateValue(newValue, text);
+    updateValue(newValue, text, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpenState(false);

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

@@ -95,7 +95,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -105,13 +105,14 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
-  const triggerChange = (0, _react.useCallback)(newValue => {
+  const triggerChange = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }, [onChange, createCustomEvent]);
   function findElementWithMatchingText(textToMatch, list) {
@@ -119,7 +120,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       const {
         text
       } = child.props;
-      return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
     });
   }
   const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
@@ -128,15 +129,15 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       const isFilterCleared = isDeleteEvent && newFilterText === "";
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
-        triggerChange("");
+        triggerChange("", false);
         return "";
       }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value);
-      if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      triggerChange(match.props.value, false);
+      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -152,7 +153,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -165,7 +166,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, [updateValues]);
   const fillLastFilterCharacter = (0, _react.useCallback)(key => {
     setFilterText(previousFilterText => {
-      if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
+      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
       return previousFilterText;
@@ -260,9 +261,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     };
   }, [handleGlobalClick]);
   (0, _react.useEffect)(() => {
-    const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
+    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
@@ -271,7 +272,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       id: selectedOptionId,
       text,
       value: newValue,
-      selectionType
+      selectionType,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "tab") {
       setOpen(false);
@@ -282,8 +284,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
-    setTextValue(text);
-    triggerChange(newValue);
+    setTextValue(text || /* istanbul ignore next */"");
+    triggerChange(newValue, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpen(false);

package/lib/components/select/index.d.ts

@@ -5,7 +5,7 @@ export type { OptionRowProps } from "./option-row";
 export { default as OptionGroupHeader } from "./option-group-header";
 export type { OptionGroupHeaderProps } from "./option-group-header";
 export { default as Select } from "./simple-select";
-export type { SimpleSelectProps } from "./simple-select";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select";
 export { default as FilterableSelect } from "./filterable-select";
 export type { FilterableSelectProps } from "./filterable-select";
 export { default as MultiSelect } from "./multi-select";

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

@@ -109,7 +109,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return true;
     });
   }, [onOpen]);
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -119,7 +119,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -128,11 +129,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-  const updateValue = (0, _react.useCallback)(updateFunction => {
+  const updateValue = (0, _react.useCallback)((updateFunction, selectionConfirmed) => {
     const newValue = updateFunction(actualValue);
     // only call onChange if an option has been selected or deselected
     if (onChange && newValue.length !== actualValue?.length) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
 
     // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
@@ -167,7 +168,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
       newValue.splice(index, 1);
       return newValue;
-    });
+    }, true);
   }, [updateValue]);
   const handleTextboxKeydown = (0, _react.useCallback)(event => {
     const {
@@ -219,6 +220,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     return actualValue.map((singleValue, index) => {
       const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, singleValue));
       let pillProps = {};
+      if (!matchingOption) {
+        return null;
+      }
+
+      /* istanbul ignore else */
       if ( /*#__PURE__*/_react.default.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -226,8 +232,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-      const title = pillProps.title || "";
-      const key = title + ( /*#__PURE__*/_react.default.isValidElement(matchingOption) && matchingOption.props.value || index);
+      const title = pillProps.title || /* istanbul ignore next */"";
+      const key = title + ( /*#__PURE__*/_react.default.isValidElement(matchingOption) && matchingOption.props.value || /* istanbul ignore next */index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
@@ -340,7 +346,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     const {
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
@@ -359,7 +366,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
         return previousValue;
       }
       return [...previousValue, newValue];
-    });
+    }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);

package/lib/components/select/option/option.component.js

@@ -51,7 +51,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children || text);
+  }, rest, {
+    fill: undefined
+  }), children || text);
 });
 Option.propTypes = {
   "about": _propTypes.default.string,

package/lib/components/select/select-list/select-list.component.d.ts

@@ -17,6 +17,7 @@ export interface SelectListProps {
         value?: string | Record<string, unknown>;
         id?: string;
         selectionType: string;
+        selectionConfirmed: boolean;
     }) => void;
     /** A callback for when the list should be closed */
     onSelectListClose: () => void;

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

@@ -102,7 +102,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const handleSelect = (0, _react.useCallback)(optionData => {
     onSelect({
       ...optionData,
-      selectionType: "click"
+      selectionType: "click",
+      selectionConfirmed: true
     });
   }, [onSelect]);
   const childIdsRef = (0, _react.useRef)(null);
@@ -186,13 +187,15 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined
+      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      selectionConfirmed: false
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
-        selectionType: "tab"
+        selectionType: "tab",
+        selectionConfirmed: false
       });
     } else {
       event.preventDefault();
@@ -231,7 +234,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
         text,
         value,
-        selectionType: "enterKey"
+        selectionType: "enterKey",
+        selectionConfirmed: true
       });
     } else if ((0, _isNavigationKey.default)(key)) {
       focusOnAnchor();

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { CommonTextboxProps } from "../../textbox";
 import { ValidationProps } from "../../../__internal__/validations";
-export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+import { CustomSelectChangeEvent } from "../simple-select/simple-select.component";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Prop to specify the aria-label attribute of the component input */
@@ -29,7 +30,7 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/lib/components/select/simple-select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./simple-select.component";
-export type { SimpleSelectProps } from "./simple-select.component";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select.component";

package/lib/components/select/simple-select/simple-select.component.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../select-textbox";
+export interface OptionData {
+    text?: string;
+    value?: string | Record<string, unknown>;
+    id?: string;
+    selectionType: string;
+    selectionConfirmed?: boolean;
+}
+export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElement> {
+    selectionConfirmed?: boolean;
+}
 export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;

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

@@ -91,7 +91,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed = false) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -101,7 +101,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -254,13 +255,13 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       });
     }
   }
-  function updateValue(newValue, text) {
+  function updateValue(newValue, text, selectionConfirmed) {
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setTextValue(text);
     }
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }
   function onSelectOption(optionData) {
@@ -268,10 +269,11 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     const isClickTriggered = selectionType === "click";
-    updateValue(newValue, text);
+    updateValue(newValue, text, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpenState(false);

package/package.json

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