CODEWITHSUNDEEP
react-select
Pablote
Pablote

Reputation: 5083

Does react-select support maxlength in search?

There's no mention of it in the docs it seems, I would like to limit the search to n characters.

I can successfully try this in Chrome dev tools by adding a maxlength attribute to the input element, but I'm not sure how to tell a react-select component to do that.

thanks

Upvotes: 6

Views: 6207

Answers (4)

Ahmet Firat Keler
Ahmet Firat Keler

Reputation: 4031

In your select component, you can put it like below

import { components } from "react-select"

<AsyncSelect
  className="form-control p-0"
  placeholder="Search.."
  components={{
    Input: (props) => (
      <components.Input {...props} maxLength={50} />
    ),
  }}
/>

Upvotes: 3

pa7ryk
pa7ryk

Reputation: 551

Since react-select v2 inputProps prop no longer exist. In react-select v2+ you should use Components API. In this case code may looks like this:

import React from "react";
import Select, { components } from "react-select";

const Input = props => <components.Input {...props} maxLength={5} />;

export default () => (
  <Select
    ...
    components={{ Input }}
    ...
  />
);

Upvotes: 8

Lalit Yadav
Lalit Yadav

Reputation: 909

this is how you can apply maxLength

pass maxLength as a prop or define in your file

<Select
...
onInputChange={inputValue =>
            (inputValue.length <= maxLength ? inputValue : inputValue.substr(0, maxLength))
          }
....
/>

Upvotes: 5

Pablote
Pablote

Reputation: 5083

I'm gonna answer myself. You can use inputProps which will be passed through to the input element.

Upvotes: 0

Related Questions