Add ability to define custom keys to create values in select

src/form/Select/MultiSelect.story.tsx

@@ -134,6 +134,7 @@ export const Createable = () => {
         multiple
         closeOnSelect={false}
         createable
+        valuesSplitterKeyCodes={['Enter', 'Space', 'Comma']}
         placeholder="Add some categories or pick existing one..."
         value={value}
         onChange={v => setValue(v)}

src/form/Select/Select.tsx

@@ -119,6 +119,11 @@ export interface SelectProps {
    */
   createable?: boolean;
 
+  /**
+   * The list of KeyCodes for creating select values.
+   */
+  valuesSplitterKeyCodes?: string[];
+
   /**
    * The options of the select.
    */
@@ -206,6 +211,7 @@ export const Select: FC<Partial<SelectProps>> = ({
   placeholder,
   disabled,
   createable,
+  valuesSplitterKeyCodes,
   loading,
   multiple,
   error,
@@ -492,10 +498,15 @@ export const Select: FC<Partial<SelectProps>> = ({
     ]
   );
 
-  const onEnterKeyUp = useCallback(
+  const onAddSelection = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       const inputElement = event.target as HTMLInputElement;
-      const inputValue = inputElement.value.trim();
+      let inputValue = inputElement.value.trim();
+      // Remove the last character if it is a valuesSplitterKeyCode
+      inputValue =
+        inputValue.charAt(inputValue.length - 1) === event.key
+          ? inputValue.slice(0, -1)
+          : inputValue;
 
       if (index === -1 && createable && !inputValue) {
         return;
@@ -533,7 +544,7 @@ export const Select: FC<Partial<SelectProps>> = ({
       }
 
       if (index > -1 || (createable && inputValue)) {
-        onEnterKeyUp(event);
+        onAddSelection(event);
       }
 
       if (multiple) {
@@ -542,26 +553,33 @@ export const Select: FC<Partial<SelectProps>> = ({
         setOpen(false);
       }
     },
-    [index, onEnterKeyUp, setOpen, multiple, createable]
+    [index, onAddSelection, setOpen, multiple, createable]
   );
 
   const onInputKeyedUp = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
-      const key = event.key;
+      const key = event.code;
 
       if (key === 'ArrowUp') {
         onArrowUpKeyUp(event);
       } else if (key === 'ArrowDown') {
         onArrowDownKeyUp(event);
       } else if (key === 'Escape') {
         resetSelect();
-      } else if (key === 'Enter') {
-        onEnterKeyUp(event);
+      } else if (valuesSplitterKeyCodes?.includes(key)) {
+        onAddSelection(event);
       }
 
       onInputKeyUp?.(event);
     },
-    [onArrowDownKeyUp, onArrowUpKeyUp, onEnterKeyUp, onInputKeyUp, resetSelect]
+    [
+      valuesSplitterKeyCodes,
+      onInputKeyUp,
+      onArrowUpKeyUp,
+      onArrowDownKeyUp,
+      resetSelect,
+      onAddSelection
+    ]
   );
 
   const onInputKeyedDown = useCallback(
@@ -693,6 +711,7 @@ export const Select: FC<Partial<SelectProps>> = ({
 
 Select.defaultProps = {
   clearable: true,
+  valuesSplitterKeyCodes: ['Enter'],
   filterable: true,
   menuPlacement: 'bottom-start',
   closeOnSelect: true,