@box/blueprint-web 12.2.0 → 12.3.0

package/dist/lib-esm/combobox/combobox.js

@@ -79,6 +79,7 @@ const RootInner = ({
     clearButtonAriaLabel,
     endComboboxIcon,
     idForLabel,
+    displaySingleSelectionAsChip = multiselect,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
@@ -152,6 +153,11 @@ const RootInner = ({
   const {
     setValue: setSelectedValue
   } = selectStore;
+  useEffect(() => {
+    if (inputValue.trim() === '' && !multiselect && selectedValue && !displaySingleSelectionAsChip && !clearOnBlur) {
+      setSelectedValue('');
+    }
+  }, [inputValue, multiselect, setSelectedValue, selectedValue, displaySingleSelectionAsChip, clearOnBlur]);
   const resetSelectedValue = useCallback(() => {
     setSelectedValue(multiselect ? [] : '');
   }, [multiselect, setSelectedValue]);
@@ -165,15 +171,28 @@ const RootInner = ({
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
   }, []);
+  const onOptionClick = useCallback(displayedValue => {
+    // Check if inputValue is different from displayedValue,
+    // if so, update inputValue to displayedValue
+    // Othwerwise, clicking the option will do nothing.
+    if (inputValue.trim() !== displayedValue && !displaySingleSelectionAsChip) {
+      setInputValue(displayedValue);
+    }
+  }, [inputValue, setInputValue, displaySingleSelectionAsChip]);
+  const createClickHandler = useCallback(displayedValue => () => {
+    onOptionClick(displayedValue);
+  }, [onOptionClick]);
   const renderSelectItemOption = useCallback(option => {
     const value = getOptionValue(option);
+    const displayedValue = displayValue ? displayValue(option) : value;
     return jsxs(OptionWithIndicator, {
       ...(typeof option === 'object' ? option : {}),
       disabled: typeof option === 'object' && option.disabled,
+      onClick: createClickHandler(displayedValue),
       value: value,
       children: [jsx(Indicator, {}), displayValue ? displayValue(option) : value]
     });
-  }, [displayValue]);
+  }, [displayValue, createClickHandler]);
   const renderOptionFn = renderOption || renderSelectItemOption;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const selectedValueMemoized = useMemo(() => selectedValue, [JSON.stringify(selectedValue)]);
@@ -182,7 +201,8 @@ const RootInner = ({
     if (Array.isArray(selectedValueMemoized) || showSingleSelectChip) {
       setInputValue('');
     } else if (selectedValueMemoized) {
-      setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue));
+      const selectedDisplayValue = getDisplayValueFromOptionValue(selectedValueMemoized, options, displayValue);
+      setInputValue(selectedDisplayValue);
       // Also focus input for single-select variant
       focusInput();
     }
@@ -259,7 +279,7 @@ const RootInner = ({
   const reference = useForkRef(inputRef, ref);
   const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
-  const showSingleSelectChip = showComboboxCancelButton && !Array.isArray(selectedValue) && !!selectedValue;
+  const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
   const Label = useLabelable(label, comboboxId);
   const inlineErrorId = useUniqueId('inline-error-');
   const ariaDescribedBy = clsx(rest['aria-describedby'], {

package/dist/lib-esm/combobox/types.d.ts

@@ -217,6 +217,13 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default true
      */
     hideOnEscape?: ComboboxPopoverProps['hideOnEscape'];
+    /**
+     * If `true`, displays the single selected value in the input field as a chip.
+     * This is independent of the clear button visibility.
+     *
+     * @default false
+     */
+    displaySingleSelectionAsChip?: boolean;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.2.0",
+    "version": "12.3.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {