Can't type in react input field

Question

I have a simple form with an input field that I can't type on. I first thought the problem was with the onChange or the value props that were setting the input to readonly, but the fact is that I cant type with the browser suggestions and the state updates perfectly (See gif here) it's just that I won't let me type with the keyboard, even after reloading the page.

I also have a Login page that works perfectly except when I log out and redirect back to that page, it won't work until I reload the page, now it will work.

<input
value={name}
onChange={handleChange}
name="name"
/>

const [name, setName] = useState("");

const handleChange = (e:any) => {
    setName(e.target.value);
}

Weird thing is that it's in like a readonly state but when I use browser suggestions it works and updates the state.

Here is the whole component:

import React, { useEffect, useState } from 'react';
import { useForm } from '../../utils/useForm';

import { CubeType } from '../../interfaces';

//import useStore from '../store/Store';

import { Modal, Button, Row, Col, FormGroup, FormLabel, FormControl } from 'react-bootstrap';

type Props = {
    show: Boolean,
    onClose: () => void,
    cubeTypes: CubeType[]
};

const ModalTimelist = (props: Props) => {
    //const store = useStore();
    const [values, handleChangee] = useForm({ cubeType: 1, name: '' });


    const [name, setName] = useState("");

    const handleChange = (e:any) => {
        setName(e.target.value);
    }

    useEffect(() => {
        const modal = document.getElementsByClassName('modal')[0];
        if(modal) modal.removeAttribute('tabindex');
    }, [props.show]);

    return (
        <>
            <Modal show={props.show} onHide={ props.onClose }>
                <Modal.Header>
                    <Modal.Title>Timelist { name }</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row>
                        <Col md="3">
                            <FormGroup>
                                <FormLabel>Cube Type</FormLabel>
                                <select
                                    value={values.cubeType}
                                    onChange={ handleChangee }
                                    className="form-select"
                                    name="cubeType"
                                >
                                    {props.cubeTypes.map((it, idx) => {
                                        return (<option value={ idx } key={"cube"+idx}>{it.name}</option>);
                                    }) }
                                </select>
                            </FormGroup>
                        </Col>
                        <Col md="9">
                            <FormGroup>
                                <FormLabel>Name</FormLabel>
                                <FormControl
                                    value={name}
                                    onChange={handleChange}
                                    name="name"
                                />
                            </FormGroup>
                        </Col>
                    </Row>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="success" onClick={() => props.onClose()}>
                        Save
                    </Button>
                    <Button variant="outline-danger" onClick={() => props.onClose()}>
                        Cancel
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default ModalTimelist;

You're going to need to post handleChange and how you're storing state — im_baby, Aug 14 '21 at 14:49
have you have checked that on change event is fired or not using console some time its happen with the react-bootstrap modal — Anurag Sharma, Aug 14 '21 at 15:24

score 2 · Answer 1 · answered Aug 14 '21 at 14:56

2

value of input must be the state value otherwise it will not change use this code

const App = () => {
   const [name,setName] = useState("")
   const handle = ({target:{value}}) => setName(value)
   return <input
     value={name}
     onChange={handle}
      name="name"
    />
}

answered Aug 14 '21 at 14:56

Omar Khaled

439
1
4
16

Sorry I do actually have it like you, just forgot to edit. I have the same you posted and not working. Thanks anyway :) – Roger Esteve Aug 14 '21 at 14:58
can you post the whole component please – Omar Khaled Aug 14 '21 at 14:59
Just did! Thanks – Roger Esteve Aug 14 '21 at 15:05

score 2 · Answer 2 · answered Aug 18 '21 at 18:22

2

Use a debounce for setting name on state.

Example:

const handleChange = (e:any) => {
    debounce(() => { setName(e.target.value) }, 300);
}

answered Aug 18 '21 at 18:22

Suneel K

84
1
9

AasthaChaudhary · Answer 3 · 2023-02-20T04:44:08.803

1

Names specified by you in input field attributes must be same as useState names. Otherwise this problem occurs.

Example:

<input type={"text"} className="form-control" placeholder='Enter your User Name' name="username" value={username} onChange={(e)=>onInputChange(e)}/>

In name="username" , username spell must be same as the spell you used in State.

edited Feb 20 '23 at 04:44

answered Feb 20 '23 at 04:42

AasthaChaudhary

41
5

score 0 · Answer 4 · answered Aug 14 '21 at 15:14

0

I tried the code and it works fine I think you should change the browser

and if you want

change this

const ModalTimelist = (props: Props) => {

with

const ModalTimelist:React.FC<Props> = (props) => {

answered Aug 14 '21 at 15:14

Omar Khaled

439
1
4
16

Tried with a different browser and still not working. Tried on an older branch and it works so... I'll just have to investigate changes I guess. – Roger Esteve Aug 14 '21 at 15:22
maybe the problem with the library that you use for ui ,if you use alpha version change it with stable version – Omar Khaled Aug 14 '21 at 15:24
any luck ? I am running into the same issue. – user3148077 Aug 26 '22 at 10:43

Can't type in react input field

4 Answers4

Linked