From 17089beaec28043077a875381b7ca9422b062996 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 3 Mar 2026 12:10:50 +0100
Subject: [PATCH 1/4] combobox custom value

---
 .changeset/pretty-foxes-pull.md               |  5 +++
 .../Combobox/Common/useCombobox.tsx           | 30 ++++++++++++-
 .../Dynamic/DynamicCombobox.stories.tsx       | 44 +++++++++++++++++++
 .../Combobox/Dynamic/DynamicCombobox.tsx      | 25 ++++++++++-
 src/components/Combobox/Static/Combobox.tsx   | 28 +++++++++++-
 .../Static/StaticCombobox.stories.tsx         | 18 ++++++++
 6 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/pretty-foxes-pull.md

diff --git a/.changeset/pretty-foxes-pull.md b/.changeset/pretty-foxes-pull.md
new file mode 100644
index 000000000..126e54a8c
--- /dev/null
+++ b/.changeset/pretty-foxes-pull.md
@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": minor
+---
+
+Combobox and DynamicCombobox now accepts new props that allow entering custom values
diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 892ebbc81..58c2497d6 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -3,7 +3,7 @@ import {
   useCombobox as useDownshiftCombobox,
   UseComboboxGetInputPropsOptions,
 } from "downshift";
-import { FocusEvent, useState } from "react";
+import { FocusEvent, useState, KeyboardEvent } from "react";
 
 import {
   Option,
@@ -34,6 +34,8 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   onInputValueChange,
   onFocus,
   onBlur,
+  allowCustomValue,
+  onCustomValueSubmit,
 }: {
   selectedItem: T | null | undefined;
   options: T[];
@@ -42,6 +44,8 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   onInputValueChange?: (value: string) => void;
   onFocus?: (e: FocusEvent<HTMLInputElement, Element>) => void;
   onBlur?: (e: FocusEvent<HTMLInputElement, Element>) => void;
+  allowCustomValue?: boolean;
+  onCustomValueSubmit?: (value: string) => void;
 }) => {
   const [inputValue, setInputValue] = useState<string>("");
   const [active, setActive] = useState(false);
@@ -55,6 +59,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
 
   const {
     isOpen,
+    closeMenu,
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
@@ -92,9 +97,21 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     },
   });
 
+  const hasItemsToSelect = itemsToSelect.length > 0;
+  const trimmedInputValue = inputValue.trim();
+  const hasCustomValueToSubmit =
+    !!allowCustomValue && !hasItemsToSelect && trimmedInputValue.length > 0;
+
+  const handleCustomValueSubmit = (value: string) => {
+    onCustomValueSubmit?.(value);
+    closeMenu();
+    setInputValue("");
+  };
+
   return {
     active,
     itemsToSelect,
+    inputValue: trimmedInputValue,
     typed,
     isOpen,
     getToggleButtonProps,
@@ -107,6 +124,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
       _getInputProps<{
         onFocus: (e: FocusEvent<HTMLInputElement>) => void;
         onBlur: (e: FocusEvent<HTMLInputElement>) => void;
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
       }>(
         {
           onFocus: (e) => {
@@ -117,12 +135,20 @@ export const useCombobox = <T extends Option, V extends string | Option>({
             onBlur?.(e);
             setActive(false);
           },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && hasCustomValueToSubmit) {
+              e.preventDefault();
+              handleCustomValueSubmit(trimmedInputValue);
+            }
+          },
           ...options,
         },
         otherOptions
       ),
     highlightedIndex,
     getItemProps,
-    hasItemsToSelect: itemsToSelect.length > 0,
+    hasItemsToSelect,
+    hasCustomValueToSubmit,
+    handleCustomValueSubmit,
   };
 };
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
index 26327a7f0..0f30db71c 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
 import { useState } from "react";
 
 import { DynamicCombobox } from "..";
@@ -177,3 +178,46 @@ export const NoOptions = () => {
     </DynamicCombobox>
   );
 };
+
+export const AllowCustomValue = () => {
+  const [options, setOptions] = useState<Option[]>([]);
+  const [value, setValue] = useState<Option | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleInputValueChange = async (criteria: string) => {
+    if (!criteria) {
+      setOptions([]);
+      return;
+    }
+
+    setLoading(true);
+    const response = await fetch(
+      `https://swapi.dev/api/people/?search=${criteria}`
+    );
+    const body = await response.json();
+
+    setOptions(
+      body.results.map((result: { name: string }) => ({
+        value: result.name,
+        label: result.name,
+      }))
+    );
+    setLoading(false);
+  };
+
+  return (
+    <DynamicCombobox
+      __width="300px"
+      value={value}
+      label="Pick or create a character"
+      onChange={(value) => setValue(value)}
+      options={options}
+      loading={loading}
+      onInputValueChange={(inputValue) => {
+        handleInputValueChange(inputValue);
+      }}
+      allowCustomValue
+      onCustomValueSubmit={fn()}
+    />
+  );
+};
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index e789ee3b6..f64403a6c 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -54,8 +54,11 @@ export type DynamicComboboxProps<T> = PropsWithBox<
     children?: ReactNode;
     locale?: {
       loadingText?: string;
+      addNewLabel?: string;
     };
     onScrollEnd?: () => void;
+    allowCustomValue?: boolean;
+    onCustomValueSubmit?: (value: string) => void;
   }
 > &
   InputVariants;
@@ -81,6 +84,8 @@ const DynamicComboboxInner = <T extends Option>(
     startAdornment,
     endAdornment,
     onScrollEnd,
+    allowCustomValue,
+    onCustomValueSubmit,
     ...props
   }: DynamicComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -97,6 +102,9 @@ const DynamicComboboxInner = <T extends Option>(
     getItemProps,
     itemsToSelect,
     hasItemsToSelect,
+    hasCustomValueToSubmit,
+    handleCustomValueSubmit,
+    inputValue,
   } = useCombobox({
     selectedItem: value,
     options,
@@ -105,6 +113,8 @@ const DynamicComboboxInner = <T extends Option>(
     onInputValueChange,
     onFocus,
     onBlur,
+    allowCustomValue,
+    onCustomValueSubmit,
   });
 
   const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
@@ -159,7 +169,7 @@ const DynamicComboboxInner = <T extends Option>(
             disabled,
             loading,
             hasItemsToSelect,
-            showEmptyState: hasNoOptions(children),
+            showEmptyState: hasNoOptions(children) || hasCustomValueToSubmit,
           })}
           className={listWrapperRecipe({ size })}
           data-portal-for={id}
@@ -193,6 +203,19 @@ const DynamicComboboxInner = <T extends Option>(
                 </List.Item>
               ))}
 
+            {isOpen && !loading && hasCustomValueToSubmit && (
+              <List.Item
+                data-test-id="combobox-custom-value"
+                className={listItemStyle}
+                onClick={() => handleCustomValueSubmit(inputValue)}
+                cursor="pointer"
+              >
+                <Text size={getListTextSize(size)}>
+                  {locale?.addNewLabel ?? "Add new"}: {inputValue}
+                </Text>
+              </List.Item>
+            )}
+
             {isOpen && !loading && !hasItemsToSelect && children}
 
             {loading && (
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index bd81d0981..d9831d2d0 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -48,6 +48,11 @@ export type ComboboxProps<T, V> = PropsWithBox<
     options: T[];
     onChange?: SingleChangeHandler<V | null>;
     value: V | null;
+    allowCustomValue?: boolean;
+    onCustomValueSubmit?: (value: string) => void;
+    locale?: {
+      addNewLabel?: string;
+    };
   }
 > &
   InputVariants;
@@ -69,6 +74,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     startAdornment,
     endAdornment,
     children,
+    allowCustomValue,
+    onCustomValueSubmit,
+    locale,
     ...props
   }: ComboboxProps<T, V>,
   ref: ForwardedRef<HTMLInputElement>
@@ -87,6 +95,9 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     getItemProps,
     itemsToSelect,
     hasItemsToSelect,
+    hasCustomValueToSubmit,
+    handleCustomValueSubmit,
+    inputValue,
   } = useCombobox({
     selectedItem: isValuePassedAsString
       ? options.find((option) => option.value === value)
@@ -96,6 +107,8 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     onChange,
     onFocus,
     onBlur,
+    allowCustomValue,
+    onCustomValueSubmit,
   });
 
   const { refs, floatingStyles } = useFloating<HTMLLabelElement>({
@@ -151,7 +164,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
             disabled,
             hasItemsToSelect,
             isOpen,
-            showEmptyState: hasNoOptions(children),
+            showEmptyState: hasNoOptions(children) || hasCustomValueToSubmit,
           })}
           className={listWrapperRecipe({ size })}
           data-portal-for={id}
@@ -185,6 +198,19 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
                 </List.Item>
               ))}
 
+            {isOpen && hasCustomValueToSubmit && (
+              <List.Item
+                data-test-id="combobox-custom-value"
+                className={listItemStyle}
+                onClick={() => handleCustomValueSubmit(inputValue)}
+                cursor="pointer"
+              >
+                <Text size={getListTextSize(size)}>
+                  {locale?.addNewLabel ?? "Add new"}: {inputValue}
+                </Text>
+              </List.Item>
+            )}
+
             {isOpen && !hasItemsToSelect && children}
           </List>
         </Box>
diff --git a/src/components/Combobox/Static/StaticCombobox.stories.tsx b/src/components/Combobox/Static/StaticCombobox.stories.tsx
index edc6c9953..5cf2b1821 100644
--- a/src/components/Combobox/Static/StaticCombobox.stories.tsx
+++ b/src/components/Combobox/Static/StaticCombobox.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 import { useState } from "react";
 
 import { Option } from "~/components/BaseSelect";
@@ -268,3 +269,20 @@ export const NoOptions = () => {
     </Box>
   );
 };
+
+export const AllowCustomValue: Story = {
+  ...ComboboxTemplate,
+  args: {
+    allowCustomValue: true,
+    onCustomValueSubmit: fn(),
+  },
+};
+
+export const AllowCustomValueWithLocale: Story = {
+  ...ComboboxTemplate,
+  args: {
+    allowCustomValue: true,
+    onCustomValueSubmit: fn(),
+    locale: { addNewLabel: "Dodaj nowy" },
+  },
+};

From b32c3935980959c5c846fe0948cdc5a3d3f538f1 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Tue, 3 Mar 2026 16:41:20 +0100
Subject: [PATCH 2/4] Update src/components/Combobox/Common/useCombobox.tsx

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>
---
 src/components/Combobox/Common/useCombobox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 58c2497d6..16ec4cd03 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -100,7 +100,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   const hasItemsToSelect = itemsToSelect.length > 0;
   const trimmedInputValue = inputValue.trim();
   const hasCustomValueToSubmit =
-    !!allowCustomValue && !hasItemsToSelect && trimmedInputValue.length > 0;
+    !!allowCustomValue && !hasItemsToSelect && trimmedInputValue.length > 0 && onCustomValueSubmit;
 
   const handleCustomValueSubmit = (value: string) => {
     onCustomValueSubmit?.(value);

From a7ff475982adb889df01b04b1b3c3a8b7905e25b Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 5 Mar 2026 07:31:42 +0100
Subject: [PATCH 3/4] cr fix

---
 src/components/Combobox/Common/useCombobox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index 16ec4cd03..a468a2dbc 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -100,7 +100,10 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   const hasItemsToSelect = itemsToSelect.length > 0;
   const trimmedInputValue = inputValue.trim();
   const hasCustomValueToSubmit =
-    !!allowCustomValue && !hasItemsToSelect && trimmedInputValue.length > 0 && onCustomValueSubmit;
+    !!allowCustomValue &&
+    !hasItemsToSelect &&
+    trimmedInputValue.length > 0 &&
+    !!onCustomValueSubmit;
 
   const handleCustomValueSubmit = (value: string) => {
     onCustomValueSubmit?.(value);

From be8bff948cd84d117452c32915acc2daa49d63fc Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Thu, 5 Mar 2026 08:06:17 +0100
Subject: [PATCH 4/4] use downshit native api

---
 .../Combobox/Common/useCombobox.tsx           | 71 ++++++++++-------
 .../Combobox/Dynamic/DynamicCombobox.tsx      | 77 ++++++++++---------
 src/components/Combobox/Static/Combobox.tsx   | 76 +++++++++---------
 3 files changed, 122 insertions(+), 102 deletions(-)

diff --git a/src/components/Combobox/Common/useCombobox.tsx b/src/components/Combobox/Common/useCombobox.tsx
index a468a2dbc..5643aa961 100644
--- a/src/components/Combobox/Common/useCombobox.tsx
+++ b/src/components/Combobox/Common/useCombobox.tsx
@@ -11,6 +11,11 @@ import {
   useHighlightedIndex,
 } from "~/components/BaseSelect";
 
+const CUSTOM_VALUE_SENTINEL = "__macaw_custom_value__";
+
+export const isCustomValueOption = (item: Option): boolean =>
+  item.value === CUSTOM_VALUE_SENTINEL;
+
 const getItemsFilter = <T extends Option>(
   inputValue: string | undefined,
   options: T[]
@@ -51,7 +56,26 @@ export const useCombobox = <T extends Option, V extends string | Option>({
   const [active, setActive] = useState(false);
   const typed = Boolean(selectedItem || active || inputValue);
 
-  const itemsToSelect = getItemsFilter<T>(inputValue, options);
+  const filteredItems = getItemsFilter<T>(inputValue, options);
+  const hasFilteredItems = filteredItems.length > 0;
+  const trimmedInputValue = inputValue.trim();
+
+  const canSubmitCustomValue =
+    !!allowCustomValue &&
+    !hasFilteredItems &&
+    trimmedInputValue.length > 0 &&
+    !!onCustomValueSubmit;
+
+  const customValueOption = canSubmitCustomValue
+    ? ({ label: trimmedInputValue, value: CUSTOM_VALUE_SENTINEL } as T)
+    : null;
+
+  const itemsToSelect = customValueOption
+    ? [...filteredItems, customValueOption]
+    : filteredItems;
+
+  const hasItemsToSelect = itemsToSelect.length > 0;
+
   const { highlightedIndex, onHighlightedIndexChange } = useHighlightedIndex(
     itemsToSelect,
     selectedItem
@@ -59,7 +83,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
 
   const {
     isOpen,
-    closeMenu,
+    selectItem,
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
@@ -67,6 +91,7 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     getItemProps,
   } = useDownshiftCombobox({
     items: itemsToSelect,
+    inputValue,
     itemToString: (item) => item?.label ?? "",
     selectedItem,
     highlightedIndex,
@@ -87,30 +112,22 @@ export const useCombobox = <T extends Option, V extends string | Option>({
       }
     },
     onSelectedItemChange: ({ selectedItem }) => {
-      if (selectedItem) {
-        const selectedValue = isValuePassedAsString
-          ? selectedItem.value
-          : selectedItem;
+      if (!selectedItem) return;
+
+      if (selectedItem.value === CUSTOM_VALUE_SENTINEL) {
+        onCustomValueSubmit?.(trimmedInputValue);
         setInputValue("");
-        onChange?.(selectedValue as V);
+        return;
       }
+
+      const selectedValue = isValuePassedAsString
+        ? selectedItem.value
+        : selectedItem;
+      setInputValue("");
+      onChange?.(selectedValue as V);
     },
   });
 
-  const hasItemsToSelect = itemsToSelect.length > 0;
-  const trimmedInputValue = inputValue.trim();
-  const hasCustomValueToSubmit =
-    !!allowCustomValue &&
-    !hasItemsToSelect &&
-    trimmedInputValue.length > 0 &&
-    !!onCustomValueSubmit;
-
-  const handleCustomValueSubmit = (value: string) => {
-    onCustomValueSubmit?.(value);
-    closeMenu();
-    setInputValue("");
-  };
-
   return {
     active,
     itemsToSelect,
@@ -139,9 +156,13 @@ export const useCombobox = <T extends Option, V extends string | Option>({
             setActive(false);
           },
           onKeyDown: (e) => {
-            if (e.key === "Enter" && hasCustomValueToSubmit) {
-              e.preventDefault();
-              handleCustomValueSubmit(trimmedInputValue);
+            if (
+              e.key === "Enter" &&
+              canSubmitCustomValue &&
+              customValueOption &&
+              highlightedIndex === -1
+            ) {
+              selectItem(customValueOption);
             }
           },
           ...options,
@@ -151,7 +172,5 @@ export const useCombobox = <T extends Option, V extends string | Option>({
     highlightedIndex,
     getItemProps,
     hasItemsToSelect,
-    hasCustomValueToSubmit,
-    handleCustomValueSubmit,
   };
 };
diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
index f64403a6c..813721104 100644
--- a/src/components/Combobox/Dynamic/DynamicCombobox.tsx
+++ b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -26,7 +26,8 @@ import {
   SingleChangeHandler,
 } from "../../BaseSelect";
 
-import { ComboboxWrapper, useCombobox } from "../Common";
+import { ComboboxWrapper } from "../Common";
+import { isCustomValueOption, useCombobox } from "../Common/useCombobox";
 
 export type DynamicComboboxProps<T> = PropsWithBox<
   Omit<
@@ -102,8 +103,6 @@ const DynamicComboboxInner = <T extends Option>(
     getItemProps,
     itemsToSelect,
     hasItemsToSelect,
-    hasCustomValueToSubmit,
-    handleCustomValueSubmit,
     inputValue,
   } = useCombobox({
     selectedItem: value,
@@ -169,7 +168,7 @@ const DynamicComboboxInner = <T extends Option>(
             disabled,
             loading,
             hasItemsToSelect,
-            showEmptyState: hasNoOptions(children) || hasCustomValueToSubmit,
+            showEmptyState: hasNoOptions(children),
           })}
           className={listWrapperRecipe({ size })}
           data-portal-for={id}
@@ -180,41 +179,43 @@ const DynamicComboboxInner = <T extends Option>(
             {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
-              itemsToSelect?.map((item, index) => (
-                <List.Item
-                  data-test-id="select-option"
-                  key={`${id}-${item.value}-${index}-${highlightedIndex}`}
-                  className={listItemStyle}
-                  {...getItemProps({
-                    item,
-                    index,
-                    disabled: item.disabled,
-                  })}
-                  active={highlightedIndex === index}
-                >
-                  {item?.startAdornment}
-                  <Text
-                    color={item.disabled ? "defaultDisabled" : undefined}
-                    size={getListTextSize(size)}
+              itemsToSelect?.map((item, index) =>
+                isCustomValueOption(item) ? (
+                  <List.Item
+                    data-test-id="combobox-custom-value"
+                    key={`${id}-custom-value`}
+                    className={listItemStyle}
+                    {...getItemProps({ item, index })}
+                    active={highlightedIndex === index}
+                    cursor="pointer"
                   >
-                    {item.label}
-                  </Text>
-                  {item?.endAdornment}
-                </List.Item>
-              ))}
-
-            {isOpen && !loading && hasCustomValueToSubmit && (
-              <List.Item
-                data-test-id="combobox-custom-value"
-                className={listItemStyle}
-                onClick={() => handleCustomValueSubmit(inputValue)}
-                cursor="pointer"
-              >
-                <Text size={getListTextSize(size)}>
-                  {locale?.addNewLabel ?? "Add new"}: {inputValue}
-                </Text>
-              </List.Item>
-            )}
+                    <Text size={getListTextSize(size)}>
+                      {locale?.addNewLabel ?? "Add new"}: {inputValue}
+                    </Text>
+                  </List.Item>
+                ) : (
+                  <List.Item
+                    data-test-id="select-option"
+                    key={`${id}-${item.value}-${index}-${highlightedIndex}`}
+                    className={listItemStyle}
+                    {...getItemProps({
+                      item,
+                      index,
+                      disabled: item.disabled,
+                    })}
+                    active={highlightedIndex === index}
+                  >
+                    {item?.startAdornment}
+                    <Text
+                      color={item.disabled ? "defaultDisabled" : undefined}
+                      size={getListTextSize(size)}
+                    >
+                      {item.label}
+                    </Text>
+                    {item?.endAdornment}
+                  </List.Item>
+                )
+              )}
 
             {isOpen && !loading && !hasItemsToSelect && children}
 
diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
index d9831d2d0..e04814f58 100644
--- a/src/components/Combobox/Static/Combobox.tsx
+++ b/src/components/Combobox/Static/Combobox.tsx
@@ -24,7 +24,7 @@ import { classNames, isString } from "~/utils";
 import { useFloating } from "~/hooks/useFloating";
 import { formEventTypeAdapter } from "~/utils/formEventTypeAdapter";
 import { ComboboxWrapper } from "../Common";
-import { useCombobox } from "../Common/useCombobox";
+import { isCustomValueOption, useCombobox } from "../Common/useCombobox";
 
 export type ComboboxProps<T, V> = PropsWithBox<
   Omit<
@@ -95,8 +95,6 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
     getItemProps,
     itemsToSelect,
     hasItemsToSelect,
-    hasCustomValueToSubmit,
-    handleCustomValueSubmit,
     inputValue,
   } = useCombobox({
     selectedItem: isValuePassedAsString
@@ -164,7 +162,7 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
             disabled,
             hasItemsToSelect,
             isOpen,
-            showEmptyState: hasNoOptions(children) || hasCustomValueToSubmit,
+            showEmptyState: hasNoOptions(children),
           })}
           className={listWrapperRecipe({ size })}
           data-portal-for={id}
@@ -175,41 +173,43 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
             {...getMenuProps({ ref: refs.floating })}
           >
             {isOpen &&
-              itemsToSelect?.map((item, index) => (
-                <List.Item
-                  data-test-id="select-option"
-                  key={`${id}-${item.value}-${index}`}
-                  disabled={item.disabled}
-                  className={listItemStyle}
-                  {...getItemProps({
-                    item,
-                    index,
-                  })}
-                  active={highlightedIndex === index}
-                >
-                  {item?.startAdornment}
-                  <Text
-                    color={item.disabled ? "defaultDisabled" : undefined}
-                    size={getListTextSize(size)}
+              itemsToSelect?.map((item, index) =>
+                isCustomValueOption(item) ? (
+                  <List.Item
+                    data-test-id="combobox-custom-value"
+                    key={`${id}-custom-value`}
+                    className={listItemStyle}
+                    {...getItemProps({ item, index })}
+                    active={highlightedIndex === index}
+                    cursor="pointer"
                   >
-                    {item.label}
-                  </Text>
-                  {item?.endAdornment}
-                </List.Item>
-              ))}
-
-            {isOpen && hasCustomValueToSubmit && (
-              <List.Item
-                data-test-id="combobox-custom-value"
-                className={listItemStyle}
-                onClick={() => handleCustomValueSubmit(inputValue)}
-                cursor="pointer"
-              >
-                <Text size={getListTextSize(size)}>
-                  {locale?.addNewLabel ?? "Add new"}: {inputValue}
-                </Text>
-              </List.Item>
-            )}
+                    <Text size={getListTextSize(size)}>
+                      {locale?.addNewLabel ?? "Add new"}: {inputValue}
+                    </Text>
+                  </List.Item>
+                ) : (
+                  <List.Item
+                    data-test-id="select-option"
+                    key={`${id}-${item.value}-${index}`}
+                    disabled={item.disabled}
+                    className={listItemStyle}
+                    {...getItemProps({
+                      item,
+                      index,
+                    })}
+                    active={highlightedIndex === index}
+                  >
+                    {item?.startAdornment}
+                    <Text
+                      color={item.disabled ? "defaultDisabled" : undefined}
+                      size={getListTextSize(size)}
+                    >
+                      {item.label}
+                    </Text>
+                    {item?.endAdornment}
+                  </List.Item>
+                )
+              )}
 
             {isOpen && !hasItemsToSelect && children}
           </List>