From 5ab8ec58ccab374bf00ace89ed214bfec6325b09 Mon Sep 17 00:00:00 2001
From: Arthur Patterson <apatterson@homebound.com>
Date: Tue, 21 May 2024 10:43:22 -0500
Subject: [PATCH] fix: ComboBoxInput.tsx uses chips only if multiselect

---
 src/components/Pagination.tsx         | 2 +-
 src/inputs/internal/ComboBoxInput.tsx | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 7f8d06d60..1a701a736 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -50,7 +50,7 @@ export function Pagination(props: PaginationProps) {
       <div css={Css.df.mya.mr2.$} {...tid.pageSizeLabel}>
         Page size:
       </div>
-      <div css={Css.wPx(95).$}>
+      <div css={Css.wPx(78).$}>
         <SelectField
           compact
           label="Page Size"
diff --git a/src/inputs/internal/ComboBoxInput.tsx b/src/inputs/internal/ComboBoxInput.tsx
index 35558727f..0f8aee2ee 100644
--- a/src/inputs/internal/ComboBoxInput.tsx
+++ b/src/inputs/internal/ComboBoxInput.tsx
@@ -12,7 +12,6 @@ import { ComboBoxState } from "react-stately";
 import { Chips, Icon, Tooltip } from "src/components";
 import { PresentationFieldProps, usePresentationContext } from "src/components/PresentationContext";
 import { Css } from "src/Css";
-import { useGrowingTextField } from "src/inputs/hooks/useGrowingTextField";
 import { TextFieldBase } from "src/inputs/TextFieldBase";
 import { useTreeSelectFieldProvider } from "src/inputs/TreeSelectField/TreeSelectField";
 import { isLeveledNode } from "src/inputs/TreeSelectField/utils";
@@ -85,8 +84,8 @@ export function ComboBoxInput<O, V extends Value>(props: ComboBoxInputProps<O, V
   const [isFocused, setIsFocused] = useState(false);
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
   const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
-  // Show selections as chips
-  const hasSelection = state.selectionManager.selectedKeys.size > 0;
+  // Show selections as chips when using multiselect when unfocused
+  const showChipSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 0;
   // For MultiSelect only show the `fieldDecoration` when input is not in focus.
   const showFieldDecoration =
     (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
@@ -99,7 +98,7 @@ export function ComboBoxInput<O, V extends Value>(props: ComboBoxInputProps<O, V
     <TextFieldBase
       {...otherProps}
       {...multilineProps}
-      unfocusedPlaceholder={hasSelection && <Chips compact={otherProps.compact} values={chipLabels} />}
+      unfocusedPlaceholder={showChipSelection && <Chips compact={otherProps.compact} values={chipLabels} />}
       inputRef={inputRef}
       inputWrapRef={inputWrapRef}
       errorMsg={errorMsg}