@leafygreen-ui/combobox 1.0.0 → 1.0.3

package/src/Combobox.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { clone, isArray, isNull, isString, isUndefined } from 'lodash';
+import { clone, isArray, isEqual, isNull, isString, isUndefined } from 'lodash';
 import { Description, Label } from '@leafygreen-ui/typography';
 import Popover from '@leafygreen-ui/popover';
 import {
@@ -20,7 +20,7 @@ import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import { cx } from '@leafygreen-ui/emotion';
 import { uiColors } from '@leafygreen-ui/palette';
-import { isComponentType } from '@leafygreen-ui/lib';
+import { consoleOnce, isComponentType } from '@leafygreen-ui/lib';
 import {
   ComboboxProps,
   getNullSelection,
@@ -114,8 +114,19 @@ export default function Combobox<M extends boolean>({
 
   // Tells typescript that selection is multiselect
   const isMultiselect = useCallback(
-    <T extends number | string>(test: Array<T> | T | null): test is Array<T> =>
-      multiselect && isArray(test),
+    <T extends string>(val?: Array<T> | T | null): val is Array<T> => {
+      if (multiselect && (typeof val == 'string' || typeof val == 'number')) {
+        consoleOnce.error(
+          `Error in Combobox: multiselect is set to \`true\`, but recieved a ${typeof val} value: "${val}"`,
+        );
+      } else if (!multiselect && isArray(val)) {
+        consoleOnce.error(
+          'Error in Combobox: multiselect is set to `false`, but recieved an Array value',
+        );
+      }
+
+      return multiselect && isArray(val);
+    },
     [multiselect],
   );
 
@@ -211,10 +222,10 @@ export default function Combobox<M extends boolean>({
     [filteredOptions, getDisplayNameForValue, inputValue],
   );
 
-  const visibleOptions = useMemo(() => allOptions.filter(isOptionVisible), [
-    allOptions,
-    isOptionVisible,
-  ]);
+  const visibleOptions = useMemo(
+    () => allOptions.filter(isOptionVisible),
+    [allOptions, isOptionVisible],
+  );
 
   const isValueValid = useCallback(
     (value: string | null): boolean => {
@@ -497,10 +508,8 @@ export default function Combobox<M extends boolean>({
 
       if (focusedElementRef && focusedElementRef.current && menuRef.current) {
         const { offsetTop: optionTop } = focusedElementRef.current;
-        const {
-          scrollTop: menuScroll,
-          offsetHeight: menuHeight,
-        } = menuRef.current;
+        const { scrollTop: menuScroll, offsetHeight: menuHeight } =
+          menuRef.current;
 
         if (optionTop > menuHeight || optionTop < menuScroll) {
           menuRef.current.scrollTop = optionTop;
@@ -583,10 +592,10 @@ export default function Combobox<M extends boolean>({
     ],
   );
 
-  const renderedOptions = useMemo(() => renderInternalOptions(children), [
-    children,
-    renderInternalOptions,
-  ]);
+  const renderedOptions = useMemo(
+    () => renderInternalOptions(children),
+    [children, renderInternalOptions],
+  );
 
   const renderedChips = useMemo(() => {
     if (isMultiselect(selection)) {
@@ -676,9 +685,10 @@ export default function Combobox<M extends boolean>({
   ]);
 
   // Do any of the options have an icon?
-  const withIcons = useMemo(() => allOptions.some(opt => opt.hasGlyph), [
-    allOptions,
-  ]);
+  const withIcons = useMemo(
+    () => allOptions.some(opt => opt.hasGlyph),
+    [allOptions],
+  );
 
   /**
    *
@@ -770,7 +780,7 @@ export default function Combobox<M extends boolean>({
   // onSelect
   // Side effects to run when the selection changes
   useEffect(() => {
-    if (selection !== prevSelection) {
+    if (!isEqual(selection, prevSelection)) {
       onSelect();
     }
   }, [onSelect, prevSelection, selection]);
@@ -848,10 +858,8 @@ export default function Combobox<M extends boolean>({
     const menuMargin = 8;
 
     if (viewportSize && comboboxRef.current && menuRef.current) {
-      const {
-        top: triggerTop,
-        bottom: triggerBottom,
-      } = comboboxRef.current.getBoundingClientRect();
+      const { top: triggerTop, bottom: triggerBottom } =
+        comboboxRef.current.getBoundingClientRect();
 
       // Find out how much space is available above or below the trigger
       const safeSpace = Math.max(
@@ -880,7 +888,7 @@ export default function Combobox<M extends boolean>({
 
   // Prevent combobox from gaining focus by default
   const handleInputWrapperMousedown = (e: React.MouseEvent) => {
-    if (e.target !== inputRef.current) {
+    if (disabled) {
       e.preventDefault();
     }
   };
@@ -976,13 +984,7 @@ export default function Combobox<M extends boolean>({
           break;
         }
 
-        case keyMap.Enter:
-        case keyMap.Space: {
-          if (isOpen) {
-            // prevent typing the space character
-            event.preventDefault();
-          }
-
+        case keyMap.Enter: {
           if (
             // Focused on input element
             document.activeElement === inputRef.current &&

package/src/Combobox.types.ts

@@ -16,7 +16,8 @@ export const TrunctationLocation = {
   end: 'end',
   none: 'none',
 } as const;
-export type TrunctationLocation = typeof TrunctationLocation[keyof typeof TrunctationLocation];
+export type TrunctationLocation =
+  typeof TrunctationLocation[keyof typeof TrunctationLocation];
 
 export const Overflow = {
   expandY: 'expand-y',
@@ -55,7 +56,7 @@ export function getNullSelection<M extends boolean>(
   multiselect: M,
 ): SelectValueType<M> {
   if (multiselect) {
-    return ([] as Array<string>) as SelectValueType<M>;
+    return [] as Array<string> as SelectValueType<M>;
   } else {
     return null as SelectValueType<M>;
   }

package/src/ComboboxOption.tsx

@@ -91,9 +91,8 @@ const InternalComboboxOption = React.forwardRef<
     }: InternalComboboxOptionProps,
     forwardedRef,
   ) => {
-    const { multiselect, darkMode, withIcons, inputValue } = useContext(
-      ComboboxContext,
-    );
+    const { multiselect, darkMode, withIcons, inputValue } =
+      useContext(ComboboxContext);
     const optionTextId = useIdAllocator({ prefix: 'combobox-option-text' });
     const optionRef = useForwardedRef(forwardedRef, null);