Input unfocusing after entering 1 letter

Question

So I have this component with multiple inputs and whenever I try to type anything in any of the inputs it seems to re-render thus unfocusing the input field.

export default function EventModal({ data, show, setShown }: Props) {
    const [saveState, setSaveState] = useState(<>Save</>);
    const [deleteState, setDeleteState] = useState(<>Delete</>);

    const [event, setEvent] = useState({
        eventId: data.id,
        location: data.location,
    });

    const setEventId = (id: number) => setEvent((s) => ({ ...s, eventId: id }));
    const setLocation = (location: string) => setEvent((s) => ({ ...s, location }));

    return (
        <Modal
            id={`event-modal-${data.id ?? "new"}`}
            show={show}
            size="3xl"
            popup={true}
        >
            <Modal.Header className="bg-gray-800" />
            <Modal.Body className="bg-gray-800">
                <div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
                    <h3 className="text-xl font-medium text-white">
                        {data.id ? `Edit event "${data.name}"` : "Create a new event"}
                    </h3>
                    <Box
                        component="form"
                        autoComplete="off"
                        sx={{
                            "& .MuiTextField-root": { m: 1, width: "25ch" },
                        }}
                    >
                        <TextField
                            type="number"
                            label="TruckersMP event ID"
                            variant="outlined"
                            value={event.eventId}
                            onChange={(e) => setEventId(parseInt(e.target.value))}
                            required
                            InputProps={{
                                readOnly: !!data.id
                            }}
                        />

                        <TextField
                            label="Starting location"
                            value={event.location}
                            onChange={(e) => setLocation(e.target.value)}
                            required
                        />
                    </Box>
                </div>
            </Modal.Body>
        </Modal>
    );
};

I tried multiple solutions I found on Stackoverflow but none of them helped. Even asked ChatGPT but still no success.

Does this answer your question? [React Hooks - Input loses focus when 1 character is typed in](https://stackoverflow.com/questions/59715158/react-hooks-input-loses-focus-when-1-character-is-typed-in) — 0stone0, Jul 04 '23 at 14:52
@0stone0 nope, all of my components are in separate files so I don't think that can be the problem. — itzJOH_, Jul 04 '23 at 14:58
Then I suggest creating a [mre]. You can read more about creating React snippets [in this meta post](https://meta.stackoverflow.com/questions/338537/how-do-i-create-a-react-stack-snippet-with-jsx-support). — 0stone0, Jul 04 '23 at 14:59

score 0 · Answer 1 · answered Jul 04 '23 at 15:52

Please check this out

https://stackblitz.com/edit/react-playground-practice-tqlbsp?file=index.js,App.jsx,EventModal.jsx,Clock.js

I do not know which package you're using but I got a working example ready for ya using https://mui.com/

I do not see any problem in your setter methods

import React, { useState } from 'react';

import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import TextField from '@mui/material/TextField';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

const EventModal = ({ data, show }) => {
  const handleClose = () => setOpen(false);
  const [event, setEvent] = useState({
    eventId: data.id,
    location: data.location,
  });

  const setEventId = (id) => setEvent((s) => ({ ...s, eventId: id }));
  const setLocation = (location) => setEvent((s) => ({ ...s, location }));
  return (
    <Modal
      open={show}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        <Typography id="modal-modal-title" variant="h6" component="h2">
          Text in a modal
        </Typography>

        <TextField
          //type="number"
          label="TruckersMP event ID"
          variant="outlined"
          value={event.eventId}
          onChange={(e) => setEventId(e.target.value)}
          required
          InputProps={{
            readOnly: !!data.id,
          }}
        />
        <TextField
          label="Starting location"
          value={event.location}
          onChange={(e) => setLocation(e.target.value)}
          label="Starting location"
        />
      </Box>
    </Modal>
  );
};
export default EventModal;

NOTE: Code may differ from yours slightly but I guess it would guide you

Input unfocusing after entering 1 letter

1 Answers1