Select and TypeaheadSelect improvements

src/select/Select.tsx

@@ -29,8 +29,7 @@ function SelectComponent<T extends Option = Option>(
   const {children, role = "listbox", customClassName, value} = props;
   const [selectOwnState, dispatchSelectStateAction] = useReducer(selectStateReducer, {
     focusedOptionIndex: -1,
-    isMenuOpen: false,
-    options: props.options || []
+    isMenuOpen: false
   });
   const selectRef = useRef<HTMLDivElement | null>(null);
   const selectState = generateSelectState(selectOwnState, props);
@@ -47,6 +46,7 @@ function SelectComponent<T extends Option = Option>(
   return (
     <div
       ref={selectRef}
+      data-testid={props.testid}
       className={selectClassName}
       role={role}
       onKeyDown={handleSelectKeyDown}

src/select/item/SelectItem.tsx

@@ -35,7 +35,8 @@ function SelectItemComponent<T extends Option = Option>(
 ) {
   const selectState = useSelectContext();
   const dispatchSelectStateAction = useSelectDispatchContext();
-  const {onSelect, value, focusedOptionIndex, shouldCloseOnSelect, options} = selectState;
+  const {onSelect, value, focusedOptionIndex, shouldCloseOnSelect, options, isMenuOpen} =
+    selectState;
   const optionIndex = options.findIndex((opt) => opt?.id === option?.id);
   const isSelected = Array.isArray(value)
     ? Boolean(value.find((currentOption) => currentOption.id === option?.id))
@@ -83,7 +84,7 @@ function SelectItemComponent<T extends Option = Option>(
         payload: optionIndex
       });
 
-      if (shouldCloseOnSelect) {
+      if (shouldCloseOnSelect && isMenuOpen) {
         dispatchSelectStateAction({type: "TOGGLE_MENU_VISIBILITY"});
       }
     }

src/select/typeahead/TypeaheadSelect.tsx

@@ -8,7 +8,6 @@ import TypeaheadInput, {
 } from "../../form/input/typeahead/TypeaheadInput";
 import {mapOptionsToTagShapes} from "../../tag/util/tagUtils";
 import {TagShape} from "../../tag/Tag";
-import {filterOptionsByKeyword} from "./util/typeaheadSelectUtils";
 import {filterOutItemsByKey} from "../../core/utils/array/arrayUtils";
 import Spinner from "../../spinner/Spinner";
 import {KEYBOARD_EVENT_KEY} from "../../core/utils/keyboard/keyboardEventConstants";
@@ -19,6 +18,7 @@ import {
 } from "../util/selectTypes";
 import Select from "../Select";
 import TypeheadSelectTrigger from "./trigger/TypeheadSelectTrigger";
+import {filterOptionsByKeyword} from "./util/typeaheadSelectUtils";
 
 import "./_typeahead-select.scss";
 
@@ -39,33 +39,32 @@ export interface TypeaheadSelectProps<
   onTagRemove?: (option: Option) => void;
   selectedOptionLimit?: number;
   customClassName?: string;
-  shouldDisplaySelectedOptions?: boolean;
   shouldFilterOptionsByKeyword?: boolean;
+  shouldDisplaySelectedOptions?: boolean;
   isDisabled?: boolean;
   customSpinner?: React.ReactNode;
   shouldShowEmptyOptions?: boolean;
   canOpenDropdownMenu?: boolean;
   areOptionsFetching?: boolean;
 }
 
-/* eslint-disable complexity */
 function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption>({
   testid,
   options,
   selectedOptions,
   typeaheadProps,
   onTagRemove,
-  onKeywordChange,
   onSelect,
   customClassName,
   selectedOptionLimit,
   shouldDisplaySelectedOptions = true,
-  shouldFilterOptionsByKeyword = true,
   isDisabled,
+  shouldFilterOptionsByKeyword,
   shouldShowEmptyOptions = true,
   canOpenDropdownMenu = true,
   areOptionsFetching,
   customSpinner,
+  onKeywordChange,
   initialKeyword = "",
   controlledKeyword
 }: TypeaheadSelectProps<T>) {
@@ -78,11 +77,14 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
   const inputValue = typeof controlledKeyword === "string" ? controlledKeyword : keyword;
 
   const tags = mapOptionsToTagShapes(selectedOptions);
+
   const shouldDisplayOnlyTags = Boolean(
     selectedOptionLimit && selectedOptions.length >= selectedOptionLimit
   );
 
-  const canSelectMultiple = !selectedOptionLimit || selectedOptionLimit > 1;
+  const canSelectMultiple =
+    options.length > 1 && (!selectedOptionLimit || selectedOptionLimit > 1);
+
   const shouldCloseOnSelect =
     !canSelectMultiple ||
     Boolean(selectedOptionLimit && selectedOptions.length >= selectedOptionLimit - 1);
@@ -124,6 +126,7 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
   return (
     // TODO: Add isMenuOpenHook when we have it
     <Select
+      testid={testid}
       role={"listbox"}
       onSelect={handleSelect}
       options={computedDropdownOptions}
@@ -134,6 +137,7 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
       <TypeheadSelectTrigger
         tags={shouldDisplaySelectedOptions ? tags : []}
         handleTagRemove={handleRemove}
+        onClick={openDropdownMenu}
         input={
           !shouldDisplayOnlyTags && (
             <TypeaheadInput
@@ -162,6 +166,7 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
             {option.title}
           </Select.Item>
         ))}
+
         {shouldShowEmptyOptions && !computedDropdownOptions.length && (
           <p
             data-testid={`${testid}.empty-message`}
@@ -192,14 +197,21 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
       onSelect(option);
       setComputedDropdownOptions(options);
       setKeyword("");
-      setShouldFocusOnInput(true);
+
+      if (shouldCloseOnSelect) {
+        setMenuVisibility(false);
+      } else {
+        setShouldFocusOnInput(true);
+      }
     }
   }
 
   function handleRemove(tag: TagShape<Option>) {
-    if (onTagRemove) {
-      onTagRemove(tag.context!);
+    if (onTagRemove && tag.context) {
+      onTagRemove(tag.context);
       setShouldFocusOnInput(true);
+      setMenuVisibility(false);
+      setKeyword("");
     }
   }
 
@@ -235,6 +247,5 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
     }
   }
 }
-/* eslint-enable complexity */
 
 export default TypeaheadSelect;

src/select/typeahead/_typeahead-select.scss

@@ -2,16 +2,6 @@
   width: 100%;
 }
 
-.typeahead-select__header-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-
-  border: 1px solid var(--default-border-color);
-  border-radius: var(--small-border-radius);
-}
-
 .typeahead-select--can-select-multiple {
   .input {
     height: auto;

src/select/typeahead/trigger/TypeheadSelectTrigger.tsx

@@ -13,15 +13,17 @@ export interface TypeheadSelectTriggerProps {
   handleTagRemove: (tag: TagShape) => void;
   customClassName?: string;
   input?: React.ReactNode;
+  onClick?: VoidFunction;
 }
 function TypeheadSelectTrigger({
   handleTagRemove,
   tags,
   customClassName,
-  input
+  input,
+  onClick
 }: TypeheadSelectTriggerProps) {
   return (
-    <Select.Trigger customClassName={"typeahead-select-trigger"}>
+    <Select.Trigger customClassName={"typeahead-select-trigger"} onClick={onClick}>
       <List
         customClassName={classNames(
           "typeahead-select-trigger__tag-list",
@@ -41,6 +43,7 @@ function TypeheadSelectTrigger({
           </ListItem>
         )}
       </List>
+
       {input}
     </Select.Trigger>
   );

src/select/typeahead/trigger/_typehead-select-trigger.scss

@@ -8,8 +8,12 @@
 
   padding: 0;
 
-  border: 1px solid var(--default-border-color);
-  border-radius: var(--small-border-radius);
+  .typeahead-select__input {
+    .input {
+      border: none;
+      border-radius: 8px;
+    }
+  }
 }
 
 .typeahead-select-trigger__tag-list {