How to allow a leading space in CreatableSelect isMulti entries?

[apetersonflc]

I am building a replace to a program created 20+ years ago and need to maintain the data structure. For whatever reason, the developer of the original application decided they would use leading and trailing space to indicate a wildcard for a text string.

As a result, I need to be able to allow the end users to begin the entries with a white space. Here's what I found:

• There is no issue with trailing white spaces using the default behavior.
• There is an issue with attempting to begin a new entry with a blank space.
• There is no issue typing any other character, returning to the start, adding a space, and then pressing enter.

So, it would seem that the functionality works fine when a leading space is added but it is not intuitive and requires extra steps. Any tips for getting this functionality to work without the extra steps? I am not sure where to begin looking, perhaps on the onKeyDown ?

Here's an image, here I have opened a new option for typing, but I can't hit space -- any other key works as described above.

Below is my component:

import React, { useState, useEffect } from "react";
import "../../../css/Template.scss";
import CreatableSelect from "react-select/creatable";
const components = {
  DropdownIndicator: null
};

const TemplateSingleSelectTagCloud = (props) => {
  const [state, setState] = useState(props);
  const [inputValue, setInputValue] = useState("");
  const [value, setValue] = useState([]);

  useEffect(() => {
    setState(props);
  }, [props]);
 
  const createOption = (label) => ({
    label,
    value: label.toLowerCase().replace(/\W/g, "")
  });

  let thisClassName = "templateSelect-reactSelect elementTagCloud";
  if (typeof state.classOverride != "undefined") {
    thisClassName = thisClassName+" "+state.classOverride;
  }

  //Custom style for tag cloud appearance multivalue= for the tag, multivalueLabel= for the text inside the tag, valueContainer= for the input of the tags
  const customStyles = {
    multiValue: (baseStyles, { data }) => ({
      ...baseStyles,
      background:"#f8fafb",
      margin:"6px",
      borderRadius: "6px",
      border: '1px solid #D0E3E5',
      boxShadow: 'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px',
    }),
    multiValueLabel: (baseStyles, { data }) => ({
      ...baseStyles,
      padding:'8px',
      color: 'black',
      background: '#DEEBEC',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      maxHeight: '30px',
    }),
    valueContainer: (baseStyles) => ({data}) => ({
      ...baseStyles,
      padding: '5px',
    }),
  };

  useEffect(() => {
    let defaultValue = [];
    let tempDefValueHolder;
    if (typeof state.defaultValue == "string" && state.defaultValue !== "") {
      tempDefValueHolder = state.defaultValue.split("||");
      tempDefValueHolder.forEach((tdvItem, tdvIndex) => {
        defaultValue.push({ label: tdvItem, value: tdvItem });
      });
      setValue(defaultValue);
    }
  }, [state]);

  let thisRef = state?.ref !== undefined ? state.ref : state?.thisRef !== undefined ? state.thisRef : null;
  let thisId = state?.id !== undefined ? state.id : null;
  let thisKey = state?.thisKey !== undefined ? state.thisKey : null;
  let thisDisabled = state?.isDisabled !== undefined ? state.isDisabled : false;
  let thisDataTTid = state.hasOwnProperty("thisDataTTid") ? state["thisDataTTid"] : null;
  let thisDataTTcontent = state.hasOwnProperty(" thisDataTTcontent") ? state["thisDataTTcontent"] : null;
  let thisDataTTplace = state.hasOwnProperty("thisDataTTplace") ? state["thisDataTTplace"] : null;
  //let value = state?.value !== undefined ?  { label: state.value, value: state.value } : defaultValue;

  const handleKeyDown = (event) => {
    if (!inputValue) return;
    switch (event.key) {
      case "Enter":
      case "Tab":
        setValue((prev) => [...prev, createOption(inputValue)]);
        setInputValue("");
        event.preventDefault();
    }
  };

  const handleSendToParent = (e) => {
    state.handler(e, value);
  };

  return (
    <h5 className="tagsH5">
      {state.inputHeader}&nbsp;
      <CreatableSelect
        isMulti 
        isClearable
        menuIsOpen={false}
        components={components}
        className={thisClassName}
        styles={customStyles}
        ref={thisRef}
        id={thisId}
        key={thisKey}
        value={value}
        isDisabled={thisDisabled}
        onBlur={handleSendToParent}
        onChange={(newValue) => setValue(newValue)}
        onInputChange={(newValue) => setInputValue(newValue)}
        onKeyDown={handleKeyDown}
        data-tooltip-id={thisDataTTid}
        data-tooltip-content={thisDataTTcontent}
        data-tooltip-place={thisDataTTplace}
        placeholder="Type a keyword and press enter..."
        inputValue={inputValue}
      />
    </h5>
  );
};

export default React.memo(TemplateSingleSelectTagCloud);

[apetersonflc]

I solved it by adding this at the start of the handleKeyDown event:

  const handleKeyDown = (event) => {
    if (event.code==="Space" && inputValue.length === 0) { 
      setInputValue(" ");
    }