fix(combobox): require prop now works as intended (#3450)

.changeset/great-lemons-itch.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[MultiselectCombobox] fix bug where passing `required` would block form submit events. `required` now only blocks the submit event if no items are selected rather than when the input box is blank.

packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
 import type {RenderOptions} from '@testing-library/react';
 import {Theme} from '@twilio-paste/theme';
+import {Form} from '@twilio-paste/form';
 import filter from 'lodash/filter';
 import uniq from 'lodash/uniq';
 
@@ -80,24 +81,30 @@ function getFilteredGroupedItems(inputValue: string): GroupedItem[] {
   return filter(groupedItems, (item: GroupedItem) => item.label.toLowerCase().includes(lowerCasedInputValue));
 }
 
+const onSubmitMock = jest.fn();
+const onKeyDownMock = jest.fn();
+
 const GroupedMultiselectComboboxMock: React.FC<Partial<MultiselectComboboxProps>> = (props) => {
   const [inputValue, setInputValue] = React.useState('');
   const filteredItems = React.useMemo(() => getFilteredGroupedItems(inputValue), [inputValue]);
 
   return (
-    <MultiselectCombobox
-      groupItemsBy="group"
-      items={filteredItems}
-      itemToString={(item: GroupedItem) => (item ? item.label : '')}
-      onInputValueChange={({inputValue: newInputValue = ''}) => {
-        setInputValue(newInputValue);
-      }}
-      labelText="Choose a component:"
-      helpText="This is group"
-      initialIsOpen
-      optionTemplate={(item: GroupedItem) => <div>{item.label}</div>}
-      {...props}
-    />
+    <Form onSubmit={onSubmitMock}>
+      <MultiselectCombobox
+        selectedItemsLabelText="Selected Paste components"
+        groupItemsBy="group"
+        items={filteredItems}
+        itemToString={(item: GroupedItem) => (item ? item.label : '')}
+        onInputValueChange={({inputValue: newInputValue = ''}) => {
+          setInputValue(newInputValue);
+        }}
+        labelText="Choose a component:"
+        helpText="This is group"
+        initialIsOpen
+        optionTemplate={(item: GroupedItem) => <div>{item.label}</div>}
+        {...props}
+      />
+    </Form>
   );
 };
 
@@ -130,7 +137,7 @@ describe('MultiselectCombobox', () => {
       expect(renderedTextbox.getAttribute('aria-controls')).toEqual(dropdownListbox.id);
       expect(renderedTextbox.getAttribute('aria-describedby')).not.toEqual('');
       expect(renderedTextbox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id);
-      expect(renderedTextbox.getAttribute('required')).toEqual('');
+      expect(renderedTextbox.getAttribute('required')).toEqual(null);
 
       // unique option ids
       const renderedOptions = screen.getAllByRole('option');
@@ -167,6 +174,27 @@ describe('MultiselectCombobox', () => {
       fireEvent.click(renderedOptions[0]);
       expect(renderedTextbox.getAttribute('value')).toEqual('');
     });
+
+    it('should handle required correctly', async () => {
+      render(<MultiselectComboboxMock initialIsOpen={false} required onKeyDown={onKeyDownMock} />, {
+        wrapper: ThemeWrapper,
+      });
+
+      // Open the combobox
+      const renderedCombobox = screen.getByRole('combobox');
+      fireEvent.click(renderedCombobox);
+
+      // Focus the textbox
+      const renderedTextbox = screen.getByRole('textbox');
+      renderedTextbox.focus();
+
+      expect(onKeyDownMock).toHaveBeenCalledTimes(0);
+      fireEvent.keyDown(renderedTextbox, {key: 'Enter', code: 'Enter'});
+      expect(onKeyDownMock).toHaveBeenCalledTimes(1);
+
+      // No form submit
+      expect(onSubmitMock).toHaveBeenCalledTimes(0);
+    });
   });
 
   describe('Groups', () => {

packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx

@@ -248,6 +248,24 @@ export const MultiselectCombobox = React.forwardRef<HTMLInputElement, Multiselec
       [items, selectedItems, highlightedIndex]
     );
 
+    /*
+     * If we press the enter key in a form, it will attempt to submit the form
+     * but if this is a required field and there are no selected items, we don't want
+     * to submit the form
+     */
+
+    const {onKeyDown} = props;
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.code === 'Enter' && required && selectedItems.length === 0) {
+          // Don't submit the form
+          event.preventDefault();
+        }
+        onKeyDown?.(event);
+      },
+      [required, selectedItems, onKeyDown]
+    );
+
     // FIX: a11y issue where `aria-expanded` isn't being set until the dropdown opens the very first time
     const comboboxProps = getComboboxProps({
       disabled,
@@ -332,9 +350,9 @@ export const MultiselectCombobox = React.forwardRef<HTMLInputElement, Multiselec
               // we spread props into `getInputProps` so that Downshift handles events correctly
               {...getInputProps({
                 ...getDropdownProps({ref, preventKeyAction: isOpen}),
-                disabled,
-                required,
                 ...props,
+                disabled,
+                onKeyDown: handleKeyDown,
               })}
               aria-describedby={helpTextId}
               element={`${element}_ELEMENT`}

packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx

@@ -7,6 +7,7 @@ import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
 import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon';
 import filter from 'lodash/filter';
+import {Form} from '@twilio-paste/form';
 import {Modal, ModalBody, ModalHeader, ModalHeading} from '@twilio-paste/modal';
 import {Button} from '@twilio-paste/button';
 import {useUID} from '@twilio-paste/uid-library';
@@ -186,21 +187,29 @@ export const MultiselectComboboxRequired = (): React.ReactNode => {
   const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
 
   return (
-    <MultiselectCombobox
-      required
-      labelText="Choose a Paste Component"
-      selectedItemsLabelText="Selected Paste components"
-      helpText="Paste components are the building blocks of your product UI."
-      items={filteredItems}
-      initialSelectedItems={['Alert', 'Anchor']}
-      onInputValueChange={({inputValue: newInputValue = ''}) => {
-        setInputValue(newInputValue);
-      }}
-      onSelectedItemsChange={(selectedItems: string[]) => {
+    <Form
+      onSubmit={(event) => {
+        event.preventDefault();
         // eslint-disable-next-line no-console
-        console.log(selectedItems);
+        console.log('The form was submit');
       }}
-    />
+    >
+      <MultiselectCombobox
+        required
+        labelText="Choose a Paste Component"
+        selectedItemsLabelText="Selected Paste components"
+        helpText="Paste components are the building blocks of your product UI."
+        items={filteredItems}
+        initialSelectedItems={['Alert', 'Anchor']}
+        onInputValueChange={({inputValue: newInputValue = ''}) => {
+          setInputValue(newInputValue);
+        }}
+        onSelectedItemsChange={(selectedItems: string[]) => {
+          // eslint-disable-next-line no-console
+          console.log(selectedItems);
+        }}
+      />
+    </Form>
   );
 };
 MultiselectComboboxRequired.storyName = 'Basic - Required';