Select and TypeaheadSelect improvements

src/select/Select.tsx

@@ -4,6 +4,7 @@ import React, {
   ForwardedRef,
   forwardRef,
   Ref,
+  useEffect,
   useImperativeHandle,
   useReducer,
   useRef
@@ -44,9 +45,19 @@ function SelectComponent<T extends Option = Option>(
     () => selectRef.current
   );
 
+  useEffect(() => {
+    if (props.options.length !== selectOwnState.options.length) {
+      dispatchSelectStateAction({
+        type: "SET_OPTIONS",
+        options: props.options
+      });
+    }
+  }, [props.options, selectOwnState.options.length]);
+
   return (
     <div
       ref={selectRef}
+      data-testid={props.testid}
       className={selectClassName}
       role={role}
       onKeyDown={handleSelectKeyDown}

src/select/item/SelectItem.tsx

@@ -35,7 +35,14 @@ 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 +90,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";
@@ -32,23 +31,21 @@ export interface TypeaheadSelectProps<
     TypeaheadInputProps,
     "id" | "placeholder" | "name" | "onFocus" | "type"
   >;
+  contentRenderer: (option: T) => React.ReactNode;
+  onKeywordChange: (value: string) => void;
   testid?: string;
-  onKeywordChange?: (value: string) => void;
-  initialKeyword?: string;
   controlledKeyword?: string;
   onTagRemove?: (option: Option) => void;
   selectedOptionLimit?: number;
   customClassName?: string;
   shouldDisplaySelectedOptions?: boolean;
-  shouldFilterOptionsByKeyword?: boolean;
   isDisabled?: boolean;
   customSpinner?: React.ReactNode;
   shouldShowEmptyOptions?: boolean;
   canOpenDropdownMenu?: boolean;
   areOptionsFetching?: boolean;
 }
 
-/* eslint-disable complexity */
 function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption>({
   testid,
   options,
@@ -57,32 +54,32 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
   onTagRemove,
   onKeywordChange,
   onSelect,
+  contentRenderer,
   customClassName,
   selectedOptionLimit,
   shouldDisplaySelectedOptions = true,
-  shouldFilterOptionsByKeyword = true,
   isDisabled,
   shouldShowEmptyOptions = true,
   canOpenDropdownMenu = true,
   areOptionsFetching,
   customSpinner,
-  initialKeyword = "",
-  controlledKeyword
+  controlledKeyword = ""
 }: TypeaheadSelectProps<T>) {
   const typeaheadInputRef = useRef<HTMLInputElement | null>(null);
 
   const [isMenuOpen, setMenuVisibility] = useState(false);
   const [computedDropdownOptions, setComputedDropdownOptions] = useState(options);
   const [shouldFocusOnInput, setShouldFocusOnInput] = useState(false);
-  const [keyword, setKeyword] = useState(initialKeyword);
-  const inputValue = typeof controlledKeyword === "string" ? controlledKeyword : keyword;
+  const [keyword, setKeyword] = useState(controlledKeyword);
 
-  const tags = mapOptionsToTagShapes(selectedOptions);
+  const tags = mapOptionsToTagShapes(selectedOptions, contentRenderer);
   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 +121,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 +132,7 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
       <TypeheadSelectTrigger
         tags={shouldDisplaySelectedOptions ? tags : []}
         handleTagRemove={handleRemove}
+        onClick={openDropdownMenu}
         input={
           !shouldDisplayOnlyTags && (
             <TypeaheadInput
@@ -143,8 +142,8 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
               name={typeaheadProps.name}
               type={typeaheadProps.type}
               placeholder={typeaheadProps.placeholder}
-              value={inputValue}
-              onQueryChange={handleKeywordChange}
+              value={keyword}
+              onQueryChange={handleQueryChange}
               onKeyDown={handleKeyDown}
               rightIcon={
                 areOptionsFetching ? spinnerContent : <CaretDownIcon aria-hidden={true} />
@@ -159,9 +158,10 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
       <Select.Content>
         {computedDropdownOptions.map((option) => (
           <Select.Item key={option.id} option={option}>
-            {option.title}
+            {contentRenderer(option)}
           </Select.Item>
         ))}
+
         {shouldShowEmptyOptions && !computedDropdownOptions.length && (
           <p
             data-testid={`${testid}.empty-message`}
@@ -192,32 +192,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!);
       setShouldFocusOnInput(true);
-    }
-  }
-
-  function handleKeywordChange(value: string) {
-    if (shouldFilterOptionsByKeyword) {
-      const unselectedOptions = options.filter(
-        (option) => selectedOptions.indexOf(option) < 0
-      );
-
-      setComputedDropdownOptions(filterOptionsByKeyword(unselectedOptions, value));
-    }
-
-    if (onKeywordChange) {
-      onKeywordChange(value);
-    }
-
-    if (typeof controlledKeyword === "undefined") {
-      setKeyword(value);
+      setMenuVisibility(false);
+      setKeyword("");
     }
   }
 
@@ -226,15 +215,20 @@ function TypeaheadSelect<T extends TypeaheadSelectOption = TypeaheadSelectOption
 
     if (
       key === KEYBOARD_EVENT_KEY.BACKSPACE &&
-      !inputValue &&
+      keyword === "" &&
       onTagRemove &&
       selectedOptions.length
     ) {
       event.stopPropagation();
       onTagRemove(selectedOptions[selectedOptions.length - 1]);
     }
   }
+
+  function handleQueryChange(value: string) {
+    setKeyword(value);
+
+    onKeywordChange(value);
+  }
 }
-/* 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,20 @@ 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"}
+      testid={"TypeaheadSelectTrigger"}
+      onClick={onClick}>
       <List
         customClassName={classNames(
           "typeahead-select-trigger__tag-list",
@@ -41,6 +46,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 {