CODEWITHSUNDEEP
javascriptreactjs
user2965258
user2965258

Reputation: 147

set maximum character input size of react CreatableSelect

I am using creatable select to allow the user to input a new option that is not in the dropdown list. But after looking I cannot seem to see a way of setting the maximum input to 50 characters for input before creating in the creatable select.

I have looked at taking the new entry and if over 50 characters deleting it however this seems a long way round and would like to use something that is shorter on the actual input when the user selects create. 

import CreatableSelect from 'react-select/creatable';

const cars = [
  { label: "audi", value: 1 },
  { label: "bmw", value: 2 },
  { label: "ford", value: 3 },
  { label: "VW", value: 4 },
];

const selectOption = () => (
  <div className="app">
    <div className="container">
      <CreatableSelect
         options={cars} 
         placeholder={"check and enter new car name here"}
         isClearable
         onChange={(opt, meta) => console.log(opt, meta)}
      />
    </div>
  </div>
);

export default selectOption

I am hoping there is a max input option i just dont know. Thank you for taking the time to look at this/help, very much appreciated.

Upvotes: 0

Views: 2121

Answers (3)

Phương Nam
Phương Nam

Reputation: 41

I was looking for a similar answer, and then I realized it is possible to use props components

         components={
           Input: (props) => {
             return (
               <components.Input {...props} maxLength={50}>
                 {props.children}
               </components.Input>
             );
           },
         }

code full here:

import CreatableSelect from 'react-select/creatable';

const cars = [
  { label: "audi", value: 1 },
  { label: "bmw", value: 2 },
  { label: "ford", value: 3 },
  { label: "VW", value: 4 },
];

const selectOption = () => (
  <div className="app">
    <div className="container">
      <CreatableSelect
         options={cars} 
         placeholder={"check and enter new car name here"}
         isClearable
         onChange={(opt, meta) => console.log(opt, meta)}
         components={
           Input: (props) => {
             return (
               <components.Input {...props} maxLength={50}>
                 {props.children}
               </components.Input>
             );
           },
         }
      />
    </div>
  </div>
);

export default selectOption

Upvotes: 1

faiza07
faiza07

Reputation: 56

If you don't want the user to be able to type more than the limit, you can add maxLength attribute to the input.

import React, { useEffect, useRef } from 'react';

const myRef = useRef(null);

useEffect(() => {
myRef.current.inputRef.style.minWidth = 'max-content';
myRef.current.inputRef.placeholder = placeholderText;
myRef.current.inputRef.maxLength = 20;
}, []);

<CreatableSelect
    ref={myRef}
    {...props}
    options={options}
    value={value}
    name={name}
    onChange={handleChange}
    placeholder={''}
    classNamePrefix="multi-select-custom"
    isMulti={isMulti}
  />

Upvotes: 1

Anuja
Anuja

Reputation: 1038

Simply put you can use the <CreatableSelect/> s onCreateOption prop. You will have to maintain your options and value in component state. Then put your control logic inside handleCreateOption function ( for onCreateOption prop ). Your handleCreateOption will be something like this. ( look at codesandbox for full code )

handleCreateOption = inputValues => {
   if (inputValue.length < 50) {
    const newOption = createOption(inputValue);
    this.setState({
      options: [...options, newOption],
      value: newOption
    });
   }
}

codesandbox : https://codesandbox.io/embed/react-codesandboxer-example-cjbgu

Upvotes: 1

Related Questions