input validation in react-select-CodePudding

I am using react-select to display a list of countries, but when I click on the input box it accepts numbers and letters, and search with both too, but I want to search only using letters.

<>
                      <div
                        style={{
                          display: hide && "none",
                          position: "absolute",
                          marginLeft: "12px",
                          lineHeight: "2.5",
                          zIndex: 1,
                          fontSize: "26px",
                          fontFamily: "Poppins-Regular",
                        }}
                      >
                        {countryName}
                      </div>
                      <Select
                        onInputChange={setHide}
                        className="form_control_country"
                        onChange={onChangeCountryHandler}
                        options={countryOptions}
                        styles={customStyle}
                        components={{
                          SingleValue: () => {
                            return null;
                          },
                        }}
                      ></Select>
                    </>

 const customStyle = {
    container: (base, state) => ({
      ...base,
    }),
    menu: (styles) => ({
      ...styles,
      width: "100%",
    }),
  };

CodePudding user response：

Use the onKeyDown event & cancel the numeric inputs. CodeSandbox.

const onKeyDown = (e) => {
    if (/[0-9]/i.test(e.key)) {
      e.preventDefault();
    }
  };

<Select options={options} onKeyDown={onKeyDown} />

CodePudding user response：

react-select provides props to handle the input value user is entering. https://github.com/JedWatson/react-select#controllable-props

You can disable the entering of anything other than letters as follows:

const [inputValue, setInputValue] = React.useState("");
      const _onInputChange = (newValue) => {
        let val = newValue.replace(/[^A-Za-z]/gi, "");
        setInputValue(val);
      };

and add these props to select component:

<Select
            ...
            inputValue={inputValue}
            onInputChange={_onInputChange}
          />