From c9372df9141a27ea685e7d9c3d5e7fcb24e783ba Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Tue, 7 May 2024 15:27:16 +0100
Subject: [PATCH] Free text combobox (#3358)

---
 .../stories/combo-box/combo-box.stories.tsx   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/core/stories/combo-box/combo-box.stories.tsx b/packages/core/stories/combo-box/combo-box.stories.tsx
index 6d5bb9ab7ba..59c2df88709 100644
--- a/packages/core/stories/combo-box/combo-box.stories.tsx
+++ b/packages/core/stories/combo-box/combo-box.stories.tsx
@@ -652,3 +652,53 @@ MultiplePillsTruncated.args = {
   multiselect: true,
   truncate: true,
 };
+
+export const FreeText: StoryFn<ComboBoxProps> = (args) => {
+  const [value, setValue] = useState(getTemplateDefaultValue(args));
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    // React 16 backwards compatibility
+    event.persist();
+
+    const value = event.target.value;
+    setValue(value);
+  };
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[]
+  ) => {
+    // React 16 backwards compatibility
+    event.persist();
+
+    args.onSelectionChange?.(event, newSelected);
+    setSelectedValues(newSelected);
+
+    setValue("");
+  };
+
+  return (
+    <ComboBox
+      {...args}
+      multiselect
+      onChange={handleChange}
+      onSelectionChange={handleSelectionChange}
+      value={value}
+      style={{ width: 150 }}
+    >
+      {Array.from(new Set(usStates.concat(selectedValues)))
+        .filter((state) =>
+          state.toLowerCase().includes(value.trim().toLowerCase())
+        )
+        .map((state) => (
+          <Option value={state} key={state} />
+        ))}
+      {value && !usStates.includes(value) && (
+        <Option value={value} key={value}>
+          Add "{value}"
+        </Option>
+      )}
+    </ComboBox>
+  );
+};