CODEWITHSUNDEEP
htmlreactjs
stackoverflow_user
stackoverflow_user

Reputation: 289

Input element not accepting capital letters

i have a basic input element and would want it to allow user to enter capital letters along with lowercase. However, this input elements allows user to enter only lowercase letters.

Below is the code,

search_change = (event) => {
    const query = event.target.value.toLowerCase();
    this.setState({
        search_query: query,
    });
};


<Input
          icon={<Svg width="24" height="24"/>}
          value={state.search_query}
          onChange={this.search_change}
          name="search_query" type="text" placeholder="Search..."/>

Here Input is the component and below is the code to the input component.

 handle_input_change = (event) => {
    this.props.onChange(event);
    this.setState({input_value: event.target.value});
};

return (
        <div className={'input'}>
            <div>
                {React.cloneElement(icon, {
                    onClick: this.icon_click,
                })}
            </div>
            <input {...rest}
                onChange={this.input_change}
                ref={this.input_ref}/>
            {(this.state.input_value.length > 0) && <div 
                className="close_icon_wrapper">
                <Svg width="28" height="28" onClick={this.icon_click}/>
            </div>}
        </div>
    );

Could someone let me know what are the possible cases when input element doesnt accept capital letters from user and help me solve this. Thanks.

Upvotes: 0

Views: 757

Answers (2)

stackoverflow_user
stackoverflow_user

Reputation: 289

I found an answer to my question based on Sergey Kirienko's answer. Basically i was converting the search_query to lowercase before i use the query to filter actually.

From the given code, In the method search_change() i was changing search query to lowercase like below,

const query = event.target.value.toLowerCase();

So i replaced it like so const query = event.target.value;

Also in order to filter the data in both upper and lowercase converted the query to lowercase in the actual search method.

search = (query, items) => {
    if (!query) {
        return items;
    }
    query = query.toLowerCase();
    /* perform other operations*/
}

Upvotes: 1

Sergey Kirienko
Sergey Kirienko

Reputation: 313

There are no such cases by default.

The logic of preventing some characters from inputting probably lays in the onChange event handler which fires every time a user changes the text in input field.

Look at your this.input_change method.

Upvotes: 1

Related Questions