fix: searchbox cta warnings in form (#1368)

Author: Ninfa-Jeon

src/components/CustomSelect/CustomSelectDropdown/__snapshots__/CustomSelectDropdown.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CustomSelectDropdown renders 1`] = `
 <div>
@@ -32,6 +32,7 @@ exports[`CustomSelectDropdown renders 1`] = `
         />
         <button
           class="p-search-box__button"
+          type="submit"
         >
           <i
             class="p-icon--search"

src/components/MultiSelect/MultiSelect.test.tsx

@@ -432,3 +432,36 @@ it("can add additional classes to help", () => {
     "additional-help-text-class",
   );
 });
+
+it("can add custom classNames to dropdown (search variant)", async () => {
+  render(
+    <MultiSelect
+      variant="search"
+      items={items}
+      dropdownClassName="custom-dropdown-class"
+      inputClassName="custom-input-class"
+      footerClassName="custom-footer-class"
+    />,
+  );
+  const input = screen.getByRole("combobox");
+  expect(input.closest(".multi-select__input")).toHaveClass(
+    "custom-input-class",
+  );
+
+  await userEvent.click(input);
+  expect(document.querySelector(".multi-select__dropdown")).toHaveClass(
+    "custom-dropdown-class",
+  );
+  expect(document.querySelector(".multi-select__footer")).toHaveClass(
+    "custom-footer-class",
+  );
+});
+
+it("can change search button type to 'button'", async () => {
+  render(
+    <MultiSelect variant="search" items={items} searchButtonType="button" />,
+  );
+  await userEvent.click(screen.getByRole("combobox"));
+  const searchButton = screen.getByRole("button", { name: /search/i });
+  expect(searchButton).toHaveAttribute("type", "button");
+});

src/components/MultiSelect/MultiSelect.tsx

@@ -31,6 +31,9 @@ export type MultiSelectProps = {
   renderItem?: (item: MultiSelectItem) => ReactNode;
   dropdownHeader?: ReactNode;
   dropdownFooter?: ReactNode;
+  footerClassName?: string;
+  inputClassName?: string;
+  dropdownClassName?: string;
   emptyState?: ReactNode;
   emptyMessage?: string;
   showDropdownFooter?: boolean;
@@ -42,6 +45,7 @@ export type MultiSelectProps = {
   onSearchChange?: (value: string) => void;
   onOpen?: () => void;
   onClose?: () => void;
+  searchButtonType?: "submit" | "button";
 };
 
 type ValueSet = Set<MultiSelectItem["value"]>;
@@ -59,6 +63,8 @@ type MultiSelectDropdownProps = {
   onDeselectItem?: (item: MultiSelectItem) => void;
   onSelectItem?: (item: MultiSelectItem) => void;
   footer?: ReactNode;
+  footerClassName?: string;
+  dropdownClassName?: string;
   emptyState?: ReactNode;
   emptyMessage?: string;
   groupFn?: GroupFn;
@@ -105,6 +111,8 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
   onDeselectItem,
   isOpen,
   footer,
+  dropdownClassName,
+  footerClassName,
   emptyState,
   emptyMessage,
   sortFn = sortAlphabetically,
@@ -155,7 +163,11 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
 
   return (
     <FadeInDown isVisible={isOpen}>
-      <div className="multi-select__dropdown" role="listbox" {...props}>
+      <div
+        className={classNames("multi-select__dropdown", dropdownClassName)}
+        role="listbox"
+        {...props}
+      >
         {header ? header : null}
         {hasItems
           ? groupedItems.map(({ group, items }) => (
@@ -193,7 +205,11 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
             (emptyMessage ? (
               <p className="multi-select__empty-state">{emptyMessage}</p>
             ) : null))}
-        {footer ? <div className="multi-select__footer">{footer}</div> : null}
+        {footer ? (
+          <div className={classNames("multi-select__footer", footerClassName)}>
+            {footer}
+          </div>
+        ) : null}
       </div>
     </FadeInDown>
   );
@@ -219,8 +235,12 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
   disabledItems = [],
   dropdownHeader,
   dropdownFooter,
+  footerClassName,
+  dropdownClassName,
+  inputClassName,
   emptyState,
   emptyMessage,
+  searchButtonType = "submit",
   showDropdownFooter = true,
   variant = "search",
   scrollOverflow = false,
@@ -355,7 +375,8 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
               required={required}
               type="text"
               value={filter}
-              className="multi-select__input"
+              searchButtonType={searchButtonType}
+              className={classNames("multi-select__input", inputClassName)}
             />
           ) : (
             <button
@@ -414,6 +435,8 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
           onSelectItem={onSelectItem}
           onDeselectItem={onDeselectItem}
           footer={footer}
+          footerClassName={footerClassName}
+          dropdownClassName={dropdownClassName}
           emptyState={emptyState}
           emptyMessage={emptyMessage}
           sortFn={isSortedAlphabetically ? sortAlphabetically : () => 0}

src/components/SearchBox/SearchBox.tsx

@@ -44,6 +44,10 @@ export type Props = PropsWithSpread<
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search button should be a button or submit type.
+     */
+    searchButtonType?: "submit" | "button";
     /**
      * Whether the search input should lose focus when searching.
      */
@@ -77,6 +81,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
       onChange,
       onSearch,
       onClear,
+      searchButtonType = "submit",
       placeholder = "Search",
       shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
@@ -159,6 +164,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
           className="p-search-box__button"
           disabled={disabled}
           onClick={triggerSearch}
+          type={searchButtonType}
         >
           <Icon name="search">{Label.Search}</Icon>
         </button>

src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchBox  renders 1`] = `
 <div
@@ -20,6 +20,7 @@ exports[`SearchBox  renders 1`] = `
   />
   <button
     class="p-search-box__button"
+    type="submit"
   >
     <i
       class="p-icon--search"