@leafygreen-ui/combobox 0.9.0 → 1.0.2

package/src/Combobox.spec.tsx

@@ -154,6 +154,22 @@ describe('packages/combobox', () => {
         const [optionEl] = Array.from(optionElements!);
         expect(optionEl).toHaveTextContent('abc-def');
       });
+
+      test('Options with long names are rendered with the full text', () => {
+        const displayName = `Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.`;
+        const options: Array<OptionObject> = [
+          {
+            value: 'paragraph',
+            displayName,
+          },
+        ];
+
+        const { openMenu } = renderCombobox(select, { options });
+        const { optionElements } = openMenu();
+        const [optionEl] = Array.from(optionElements!);
+        expect(optionEl).toHaveTextContent(displayName);
+      });
+
       // Grouped Options
       describe('Grouped Options', () => {
         test('Grouped items should render', () => {
@@ -213,6 +229,26 @@ describe('packages/combobox', () => {
         expect(inputEl).toHaveValue('Apple');
       });
 
+      testSingleSelect(
+        'Initial value prop renders truncated long text input value',
+        () => {
+          const displayName = `Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.`;
+          const options: Array<OptionObject> = [
+            {
+              value: 'paragraph',
+              displayName,
+            },
+            ...defaultOptions,
+          ];
+          const initialValue = 'paragraph';
+          const { inputEl } = renderCombobox(select, { initialValue, options });
+          expect(inputEl).toHaveValue(displayName);
+          expect(inputEl.scrollWidth).toBeGreaterThanOrEqual(
+            inputEl.clientWidth,
+          );
+        },
+      );
+
       testMultiSelect('Initial value prop renders chips', () => {
         const initialValue = ['apple', 'banana'];
         const { queryChipsByName, queryAllChips } = renderCombobox(select, {
@@ -248,11 +284,40 @@ describe('packages/combobox', () => {
       );
     });
 
+    /**
+     * Input element
+     */
+    describe('Input interaction', () => {
+      test('Typing any character updates the input', () => {
+        const { inputEl } = renderCombobox(select);
+        userEvent.type(inputEl, 'zy');
+        expect(inputEl).toHaveValue('zy');
+      });
+
+      test('Initial value prop renders truncated long text input value', () => {
+        const displayName = `Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.`;
+        const { inputEl } = renderCombobox(select);
+        userEvent.type(inputEl, displayName);
+        expect(inputEl).toHaveValue(displayName);
+        expect(inputEl.scrollWidth).toBeGreaterThanOrEqual(inputEl.clientWidth);
+      });
+    });
+
     /**
      * Controlled
      * (i.e. `value` prop)
      */
     describe('When value is controlled', () => {
+      test('Typing any character updates the input', () => {
+        const value = select === 'multiple' ? [] : '';
+        const { inputEl } = renderCombobox(select, {
+          value,
+        });
+        expect(inputEl).toHaveValue('');
+        userEvent.type(inputEl, 'z');
+        expect(inputEl).toHaveValue('z');
+      });
+
       testSingleSelect('Text input renders with value update', () => {
         let value = 'apple';
         const { inputEl, rerenderCombobox } = renderCombobox(select, {
@@ -347,6 +412,18 @@ describe('packages/combobox', () => {
         expect(containerEl).not.toContainFocus();
       });
 
+      test('Clicking an option sets selection', () => {
+        const { openMenu, queryChipsByName, inputEl } = renderCombobox(select);
+        const { optionElements } = openMenu();
+        expect(optionElements).not.toBeUndefined();
+        userEvent.click((optionElements as HTMLCollectionOf<HTMLLIElement>)[2]);
+        if (select === 'multiple') {
+          expect(queryChipsByName('Carrot')).toBeInTheDocument();
+        } else {
+          expect(inputEl).toHaveValue('Carrot');
+        }
+      });
+
       testSingleSelect('Clicking selected option closes menu', async () => {
         const { openMenu } = renderCombobox(select, {
           initialValue: 'apple',
@@ -358,29 +435,58 @@ describe('packages/combobox', () => {
         expect(menuContainerEl).not.toBeInTheDocument();
       });
 
-      test('Menu does not close on interaction with the menu', () => {
-        const { getMenuElements, openMenu } = renderCombobox(select);
-        const { optionElements } = openMenu();
+      testMultiSelect(
+        'Clicking selected option toggles selection & does NOT close menu',
+        async () => {
+          const { openMenu, queryChipsByName } = renderCombobox(select, {
+            initialValue: ['apple'],
+          });
+          const selectedChip = queryChipsByName('Apple');
+          expect(selectedChip).toBeInTheDocument();
+          const { optionElements, menuContainerEl } = openMenu();
+          expect(optionElements).not.toBeUndefined();
+
+          userEvent.click(
+            (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
+          );
+
+          await waitFor(() => {
+            expect(selectedChip).not.toBeInTheDocument();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+        },
+      );
+
+      testSingleSelect('Clicking any option closes menu', async () => {
+        const { openMenu } = renderCombobox(select);
+        const { optionElements, menuContainerEl } = openMenu();
         expect(optionElements).not.toBeUndefined();
         userEvent.click((optionElements as HTMLCollectionOf<HTMLLIElement>)[1]);
-        const { menuContainerEl } = getMenuElements();
-        expect(menuContainerEl).toBeInTheDocument();
+        await waitForElementToBeRemoved(menuContainerEl);
+        expect(menuContainerEl).not.toBeInTheDocument();
       });
 
-      test('Clicking an option sets selection', () => {
-        const { openMenu, queryChipsByName, inputEl } = renderCombobox(select);
-        const { optionElements } = openMenu();
-        expect(optionElements).not.toBeUndefined();
-        userEvent.click((optionElements as HTMLCollectionOf<HTMLLIElement>)[2]);
-        if (select === 'multiple') {
-          expect(queryChipsByName('Carrot')).toBeInTheDocument();
-        } else {
-          expect(inputEl).toHaveValue('Carrot');
-        }
-      });
+      testMultiSelect(
+        'Clicking any option toggles selection & does NOT close menu',
+        async () => {
+          const { openMenu, queryChipsByName } = renderCombobox(select);
+          const { optionElements, menuContainerEl } = openMenu();
+          expect(optionElements).not.toBeUndefined();
+
+          userEvent.click(
+            (optionElements as HTMLCollectionOf<HTMLLIElement>)[0],
+          );
+
+          await waitFor(() => {
+            const selectedChip = queryChipsByName('Apple');
+            expect(selectedChip).toBeInTheDocument();
+            expect(menuContainerEl).toBeInTheDocument();
+          });
+        },
+      );
 
       testSingleSelect(
-        'Input value is set to selection value when menu closes',
+        'Input returned to previous selection when menu closes',
         () => {
           const initialValue = 'apple';
           const { inputEl } = renderCombobox(select, {
@@ -391,70 +497,71 @@ describe('packages/combobox', () => {
         },
       );
 
-      testMultiSelect('Clicking chip X button removes option', async () => {
-        const initialValue = ['apple', 'banana', 'carrot'];
-        const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-          initialValue,
-        });
-        const appleChip = queryChipsByName('Apple');
-        expect(appleChip).not.toBeNull();
-        const appleChipButton = appleChip!.querySelector('button')!;
-        userEvent.click(appleChipButton);
-        await waitFor(() => {
-          expect(appleChip).not.toBeInTheDocument();
-          const allChips = queryChipsByName(['Banana', 'Carrot']);
-          allChips?.forEach(chip => expect(chip).toBeInTheDocument());
-          expect(queryAllChips()).toHaveLength(2);
-        });
-      });
+      testSingleSelect(
+        'Unfocusing the menu should keep text if input is a valid value',
+        async () => {
+          const { inputEl, containerEl, openMenu } = renderCombobox(select);
+          const { menuContainerEl } = openMenu();
+          userEvent.type(inputEl, 'Apple');
+          userEvent.click(document.body);
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(containerEl).not.toContainFocus();
+          expect(inputEl).toHaveValue('Apple');
+        },
+      );
 
-      testMultiSelect('Clicking chip text focuses the chip', () => {
-        const initialValue = ['apple', 'banana', 'carrot'];
-        const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-          initialValue,
-        });
-        const appleChip = queryChipsByName('Apple');
-        userEvent.click(appleChip!);
-        expect(appleChip!).toContainFocus();
-        expect(queryAllChips()).toHaveLength(3);
-      });
+      testSingleSelect(
+        'Unfocusing the menu should NOT keep text if input is not a valid value',
+        async () => {
+          const { inputEl, containerEl, openMenu } = renderCombobox(select);
+          const { menuContainerEl } = openMenu();
+          userEvent.type(inputEl, 'abc');
+          userEvent.click(document.body);
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(containerEl).not.toContainFocus();
+          expect(inputEl).toHaveValue('');
+        },
+      );
 
       testMultiSelect(
-        'Clicking chip X button does nothing when disabled',
+        'Unfocusing the menu should keep text as typed',
         async () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
-            initialValue,
-            disabled: true,
-          });
-          const carrotChip = queryChipsByName('Carrot');
-          const carrotChipButton = carrotChip!.querySelector('button');
-          userEvent.click(carrotChipButton!);
-          await waitFor(() => {
-            expect(queryAllChips()).toHaveLength(3);
-          });
+          const { inputEl, containerEl, openMenu } = renderCombobox(select);
+          const { menuContainerEl } = openMenu();
+          userEvent.type(inputEl, 'abc');
+          userEvent.click(document.body);
+          await waitForElementToBeRemoved(menuContainerEl);
+          expect(containerEl).not.toContainFocus();
+          expect(inputEl).toHaveValue('abc');
         },
       );
 
-      testMultiSelect(
-        'Removing a chip sets focus to the next chip',
+      testSingleSelect(
+        'Clicking the combobox after making a selection should re-open the menu',
         async () => {
-          const initialValue = ['apple', 'banana', 'carrot'];
-          const { queryChipsByName } = renderCombobox(select, {
-            initialValue,
-          });
-          const appleChip = queryChipsByName('Apple');
-          const bananaChip = queryChipsByName('Banana');
-          const appleChipButton = appleChip!.querySelector('button');
-          const bananaChipButton = bananaChip!.querySelector('button');
-          userEvent.click(appleChipButton!);
+          const {
+            comboboxEl,
+            inputEl,
+            openMenu,
+            getMenuElements,
+          } = renderCombobox(select);
+          const { optionElements, menuContainerEl } = openMenu();
+          const firstOption = optionElements![0];
+          userEvent.click(firstOption);
+          await waitForElementToBeRemoved(menuContainerEl);
+          userEvent.click(comboboxEl);
           await waitFor(() => {
-            expect(appleChip).not.toBeInTheDocument();
-            expect(bananaChipButton!).toHaveFocus();
+            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
+            expect(newMenuContainerEl).not.toBeNull();
+            expect(newMenuContainerEl).toBeInTheDocument();
+            expect(inputEl).toHaveFocus();
           });
         },
       );
 
+      /**
+       * Clicking buttons
+       */
       test('Clicking clear all button clears selection', () => {
         const initialValue =
           select === 'single' ? 'apple' : ['apple', 'banana', 'carrot'];
@@ -492,44 +599,71 @@ describe('packages/combobox', () => {
         }
       });
 
-      testSingleSelect(
-        "Unfocusing the menu should keep text if it's a valid selection",
-        async () => {
-          const { inputEl, containerEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, 'Apple');
-          userEvent.click(document.body);
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(containerEl).not.toContainFocus();
-          expect(inputEl).toHaveValue('Apple');
-        },
-      );
+      describe('Clicking chips', () => {
+        testMultiSelect('Clicking chip X button removes option', async () => {
+          const initialValue = ['apple', 'banana', 'carrot'];
+          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
+            initialValue,
+          });
+          const appleChip = queryChipsByName('Apple');
+          expect(appleChip).not.toBeNull();
+          const appleChipButton = appleChip!.querySelector('button')!;
+          userEvent.click(appleChipButton);
+          await waitFor(() => {
+            expect(appleChip).not.toBeInTheDocument();
+            const allChips = queryChipsByName(['Banana', 'Carrot']);
+            allChips?.forEach(chip => expect(chip).toBeInTheDocument());
+            expect(queryAllChips()).toHaveLength(2);
+          });
+        });
 
-      testSingleSelect(
-        'Unfocusing the menu should NOT keep text if not a valid selection',
-        async () => {
-          const { inputEl, containerEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, 'abc');
-          userEvent.click(document.body);
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(containerEl).not.toContainFocus();
-          expect(inputEl).toHaveValue('');
-        },
-      );
+        testMultiSelect('Clicking chip text focuses the chip', () => {
+          const initialValue = ['apple', 'banana', 'carrot'];
+          const { queryChipsByName, queryAllChips } = renderCombobox(select, {
+            initialValue,
+          });
+          const appleChip = queryChipsByName('Apple');
+          userEvent.click(appleChip!);
+          expect(appleChip!).toContainFocus();
+          expect(queryAllChips()).toHaveLength(3);
+        });
 
-      testMultiSelect(
-        'Unfocusing the menu should keep text as typed',
-        async () => {
-          const { inputEl, containerEl, openMenu } = renderCombobox(select);
-          const { menuContainerEl } = openMenu();
-          userEvent.type(inputEl, 'abc');
-          userEvent.click(document.body);
-          await waitForElementToBeRemoved(menuContainerEl);
-          expect(containerEl).not.toContainFocus();
-          expect(inputEl).toHaveValue('abc');
-        },
-      );
+        testMultiSelect(
+          'Clicking chip X button does nothing when disabled',
+          async () => {
+            const initialValue = ['apple', 'banana', 'carrot'];
+            const { queryChipsByName, queryAllChips } = renderCombobox(select, {
+              initialValue,
+              disabled: true,
+            });
+            const carrotChip = queryChipsByName('Carrot');
+            const carrotChipButton = carrotChip!.querySelector('button');
+            userEvent.click(carrotChipButton!);
+            await waitFor(() => {
+              expect(queryAllChips()).toHaveLength(3);
+            });
+          },
+        );
+
+        testMultiSelect(
+          'Removing a chip sets focus to the next chip',
+          async () => {
+            const initialValue = ['apple', 'banana', 'carrot'];
+            const { queryChipsByName } = renderCombobox(select, {
+              initialValue,
+            });
+            const appleChip = queryChipsByName('Apple');
+            const bananaChip = queryChipsByName('Banana');
+            const appleChipButton = appleChip!.querySelector('button');
+            const bananaChipButton = bananaChip!.querySelector('button');
+            userEvent.click(appleChipButton!);
+            await waitFor(() => {
+              expect(appleChip).not.toBeInTheDocument();
+              expect(bananaChipButton!).toHaveFocus();
+            });
+          },
+        );
+      });
 
       test.todo(
         'Clicking in the middle of the input text should set the cursor there',
@@ -549,26 +683,47 @@ describe('packages/combobox', () => {
         ).toHaveAttribute('aria-selected', 'true');
       });
 
-      test('Enter key selects highlighted option', () => {
-        const { inputEl, openMenu, queryChipsByName } = renderCombobox(select);
-        openMenu();
-        userEvent.type(inputEl!, '{arrowdown}{enter}');
-        if (select === 'multiple') {
-          expect(queryChipsByName('Banana')).toBeInTheDocument();
-        } else {
-          expect(inputEl).toHaveValue('Banana');
-        }
+      describe('Enter key', () => {
+        test('selects highlighted option', () => {
+          const { inputEl, openMenu, queryChipsByName } = renderCombobox(
+            select,
+          );
+          openMenu();
+          userEvent.type(inputEl!, '{arrowdown}{enter}');
+          if (select === 'multiple') {
+            expect(queryChipsByName('Banana')).toBeInTheDocument();
+          } else {
+            expect(inputEl).toHaveValue('Banana');
+          }
+        });
+
+        testSingleSelect('Re-opens menu after making a selection', async () => {
+          const { inputEl, openMenu, getMenuElements } = renderCombobox(
+            'single',
+          );
+          const { optionElements, menuContainerEl } = openMenu();
+          const firstOption = optionElements![0];
+          userEvent.click(firstOption);
+          await waitForElementToBeRemoved(menuContainerEl);
+          userEvent.type(inputEl, '{emter}');
+          await waitFor(() => {
+            const { menuContainerEl: newMenuContainerEl } = getMenuElements();
+            expect(newMenuContainerEl).not.toBeNull();
+            expect(newMenuContainerEl).toBeInTheDocument();
+          });
+        });
       });
 
-      test('Space key selects highlighted option', () => {
-        const { inputEl, openMenu, queryChipsByName } = renderCombobox(select);
-        openMenu();
-        userEvent.type(inputEl, '{arrowdown}{space}');
-        if (select === 'multiple') {
-          expect(queryChipsByName('Banana')).toBeInTheDocument();
-        } else {
-          expect(inputEl).toHaveValue('Banana');
-        }
+      describe('Space key', () => {
+        test('Types a space character', () => {
+          const { inputEl, openMenu, queryAllChips } = renderCombobox(select);
+          openMenu();
+          userEvent.type(inputEl, 'a{space}fruit');
+          expect(inputEl).toHaveValue('a fruit');
+          if (select === 'multiple') {
+            expect(queryAllChips()).toHaveLength(0);
+          }
+        });
       });
 
       test('Escape key closes menu', async () => {
@@ -872,8 +1027,15 @@ describe('packages/combobox', () => {
       describe('Any other key', () => {
         test('Updates the value of the input', () => {
           const { inputEl } = renderCombobox(select);
-          userEvent.type(inputEl, 'a');
-          expect(inputEl).toHaveValue('a');
+          userEvent.type(inputEl, 'z');
+          expect(inputEl).toHaveValue('z');
+        });
+
+        test('Updates the input when options are highlighted', () => {
+          const { inputEl, openMenu } = renderCombobox(select);
+          openMenu();
+          userEvent.type(inputEl, '{arrowdown}z');
+          expect(inputEl).toHaveValue('z');
         });
 
         test("Opens the menu if it's closed", async () => {

package/src/Combobox.story.tsx

@@ -50,6 +50,14 @@ storiesOf('Combobox', module)
           <ComboboxOption value="apple" displayName="Apple" />
           <ComboboxOption value="banana" displayName="Banana" />
           <ComboboxOption value="carrot" displayName="Carrot" />
+          <ComboboxOption
+            value="paragraph"
+            displayName="Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper."
+          />
+          <ComboboxOption
+            value="hash"
+            displayName="5f4dcc3b5aa765d61d8327deb882cf99"
+          />
           <ComboboxOption value="dragonfruit" displayName="Dragonfruit" />
           <ComboboxOption value="eggplant" displayName="Eggplant" />
           <ComboboxOption value="fig" displayName="Fig" />
@@ -189,10 +197,9 @@ storiesOf('Combobox', module)
     );
   })
   .add('Controlled single select', () => {
-    const [selection, setSelection] = useState<string | null>('apple');
+    const [selection, setSelection] = useState<string | null>(null);
 
     const handleChange = (value: string | null) => {
-      console.log({ value });
       setSelection(value);
     };
 
@@ -215,10 +222,9 @@ storiesOf('Combobox', module)
     );
   })
   .add('Controlled multiselect', () => {
-    const [selection, setSelection] = useState(['apple']);
+    const [selection, setSelection] = useState([] as Array<string>);
 
     const handleChange = (value: Array<string>) => {
-      console.log({ value });
       setSelection(value);
     };
 

package/src/Combobox.styles.ts

@@ -50,7 +50,6 @@ export const comboboxParentStyle = ({
           --lg-combobox-font-size: 14px;
           --lg-combobox-line-height: 20px;
           --lg-combobox-border-radius: 3px;
-          --lg-combobox-input-default-width: 12ch;
           --lg-combobox-icon-height: 16px;
         `;
     }
@@ -139,19 +138,11 @@ export const inputWrapperStyle = ({
   const isMultiselect = isArray(selection) && selection.length > 0;
   const inputLength = value?.length ?? 0;
 
-  // The input should be hidden when there are elements selected in a multiselect
-  // We don't set \`display: none\` since we need to be able to set .focus() on the element
-  const inputWidth = isMultiselect
-    ? isOpen || inputLength > 0
-      ? `${inputLength + 1}ch`
-      : '0'
-    : 'var(--lg-combobox-input-default-width)';
-
   const baseWrapperStyle = css`
     flex-grow: 1;
     width: var(--lg-combobox-width);
 
-    --lg-combobox-input-width: ${inputWidth};
+    --lg-combobox-input-width: ${isMultiselect ? `${inputLength}ch` : '100%'};
   `;
 
   switch (overflow) {
@@ -178,12 +169,12 @@ export const inputWrapperStyle = ({
         & > * {
           margin-inline: 2px;
 
-          &:first-child {
-            margin-inline-start: var(--lg-combobox-padding-x);
+          &:first-child:not(input) {
+            margin-inline-start: 0;
           }
 
-          &:last-child {
-            margin-inline-end: var(--lg-combobox-padding-x);
+          &:last-child:not(input) {
+            margin-inline-end: 0;
           }
         }
       `;
@@ -196,7 +187,8 @@ export const inputWrapperStyle = ({
         gap: 4px;
         flex-wrap: nowrap;
         white-space: nowrap;
-        --lg-combobox-input-transition: width 150ms ease-in-out;
+        height: var(--lg-combobox-height);
+        --lg-combobox-input-transition: none;
       `;
     }
 
@@ -208,6 +200,7 @@ export const inputWrapperStyle = ({
         flex-wrap: wrap;
         gap: 4px;
         overflow-x: visible;
+        min-height: var(--lg-combobox-height);
       `;
     }
   }
@@ -218,15 +211,12 @@ export const inputElementStyle = css`
   cursor: inherit;
   background-color: inherit;
   box-sizing: content-box;
-  padding-block: calc(
-    (var(--lg-combobox-height) - var(--lg-combobox-line-height)) / 2
-  );
-  padding-inline: 0;
-  height: var(--lg-combobox-line-height);
-  width: var(
-    --lg-combobox-input-width,
-    var(--lg-combobox-input-default-width, auto)
-  );
+  padding: 0;
+  margin: 0;
+  text-overflow: ellipsis;
+  line-height: var(--lg-combobox-line-height);
+  height: var(--lg-combobox-height);
+  width: var(--lg-combobox-input-width, 0);
   transition: var(--lg-combobox-input-transition);
 
   &:focus {