New field feature enable in multi select when search text doesn't match any option

src/hooks/use-multi-select.tsx

@@ -10,6 +10,7 @@ const defaultStrings = {
   search: "Search",
   selectAll: "Select All",
   selectSomeItems: "Select...",
+  create: "Create",
 };
 
 const defaultProps: Partial<ISelectProps> = {

src/lib/interfaces.ts

@@ -33,4 +33,6 @@ export interface ISelectProps {
   ClearSelectedIcon?: ReactNode;
   defaultIsOpen?: boolean;
   isOpen?: boolean;
+  isCreatable?: boolean;
+  onCreate?: Function;
 }

src/select-panel/index.tsx

@@ -39,6 +39,8 @@ const SelectPanel = () => {
     hasSelectAll,
     ClearIcon,
     debounceDuration,
+    isCreatable,
+    onCreate=()=>{}
   } = useMultiSelect();
 
   const listRef = useRef<any>();
@@ -126,6 +128,11 @@ const SelectPanel = () => {
     setFocusIndex(FocusType.SEARCH);
   };
 
+  const handleNewField = () => {
+    onCreate(searchText);
+    onChange([...value, {label: searchText, value: searchText.toLowerCase()}]);
+  };
+
   const getFilteredOptions = async () =>
     customFilterOptions
       ? await customFilterOptions(options, searchTextForFilter)
@@ -203,7 +210,11 @@ const SelectPanel = () => {
             onClick={(_e, index) => handleItemClicked(index)}
           />
         ) : (
-          <li className="no-options">{t("noOptions")}</li>
+          isCreatable ? (
+            <li onClick={handleNewField} className="add-option">{t("create")} "{searchText}"</li>
+          ) : (
+            <li className="no-options">{t("noOptions")}</li>
+          )
         )}
       </ul>
     </div>

src/style.css

@@ -137,6 +137,15 @@
   display: none;
 }
 
+.rmsc .add-option {
+  padding: var(--rmsc-p);
+  text-align: left;
+}
+
+.rmsc .add-option:hover {
+  background: var(--rmsc-hover);
+}
+
 .rmsc .item-renderer {
   display: flex;
   align-items: baseline;

stories/enabled-new-field.stories.tsx

@@ -0,0 +1,43 @@
+import { text, withKnobs } from "@storybook/addon-knobs";
+import React, { useState } from "react";
+
+import MultiSelect from "../src/multi-select";
+
+export default {
+  title: "Multiselect",
+  decorators: [withKnobs],
+};
+
+const INITIAL_OPTIONS = [
+  { label: "Grapes 🍇", value: "grapes" },
+  { label: "Mango 🥭", value: "mango", disabled: true },
+  { label: "Strawberry 🍓", value: "strawberry" },
+];
+
+export const ExampleNewField = () => {
+
+  function handleNewField(newVal) {
+    setOptions([...options, {label: newVal, value: newVal.toLowerCase()}]);
+  }
+
+  const [options, setOptions] = useState(INITIAL_OPTIONS);
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <div>
+      <pre>{JSON.stringify(selected)}</pre>
+      <MultiSelect
+        options={options}
+        value={selected}
+        onChange={setSelected}
+        labelledBy={text("labelledBy", "Select Fruits")}
+        isCreatable
+        onCreate={handleNewField}
+      />
+    </div>
+  );
+};
+
+ExampleNewField.story = {
+  name: "New field",
+};