Use Mui to build a Search box and Submit Button, Input box is no

ghz 7months ago ⋅ 83 views

Use Mui to build a Search box and Submit Button, Input box is not registering any keyStrokes

I have a simple component I'm using to render a Input field with a Button next to it. Not very complicated and so I'm really not sure why but nothing I type into the field is registered.

import React from "react";
import { useState } from "react";
import { Button, InputLabel, Input, Box, FormControl } from "@mui/material";

const WeatherCitySearch = ({ city, changeCity }) => {
  const [tempCity, setTempCity] = useState("");

  const handleTextBox = (input) => {
    console.log("Search Typing ... ", input.target);
    setTempCity(input.target.value);
  };
  return (
    <div>
      <h1>{city}</h1>
      <Box component="form">
        <FormControl>
          <InputLabel>City</InputLabel>
          <Input
            type="text"
            id="city-search"
            placeholder={city}
            onChange={handleTextBox}
          />
        </FormControl>
        <Button variant="contained" onClick={() => changeCity(tempCity)}>
          Search
        </Button>
      </Box>
    </div>
  );
};
export default WeatherCitySearch;

This is my first time using Mui so I'm not sure if I am using it correctly.

Answers

Your code looks mostly correct, but there are a couple of things to check that might be causing the issue with the Input field not registering any input:

  1. State Update in Asynchronous Manner: React's useState hook updates state asynchronously. Therefore, when you try to access tempCity immediately after calling setTempCity, it might not have been updated yet. In your case, when you click the "Search" button, the tempCity state might not have been updated by the time changeCity(tempCity) is called. To ensure that the latest state is used, you can pass the tempCity directly to the changeCity function in the onClick handler.

  2. InputLabel and Input Components from MUI: The InputLabel and Input components from Material-UI are designed to work together to create a label/input pair. However, in your code, the InputLabel component is not directly associated with the Input component. This might not cause the issue with input registration, but it's worth addressing for correctness and accessibility.

Here's the updated code addressing these points:

import React from "react";
import { useState } from "react";
import { Button, InputLabel, Input, Box, FormControl } from "@mui/material";

const WeatherCitySearch = ({ city, changeCity }) => {
  const [tempCity, setTempCity] = useState("");

  const handleTextBox = (event) => {
    console.log("Search Typing ... ", event.target.value);
    setTempCity(event.target.value);
  };

  const handleSearch = () => {
    changeCity(tempCity);
  };

  return (
    <div>
      <h1>{city}</h1>
      <Box component="form">
        <FormControl>
          <InputLabel htmlFor="city-search">City</InputLabel>
          <Input
            type="text"
            id="city-search"
            placeholder={city}
            value={tempCity}
            onChange={handleTextBox}
          />
        </FormControl>
        <Button variant="contained" onClick={handleSearch}>
          Search
        </Button>
      </Box>
    </div>
  );
};

export default WeatherCitySearch;

In this updated code:

  • I've passed tempCity directly to the changeCity function in the handleSearch function.
  • I've associated the InputLabel with the Input component using the htmlFor prop. This ensures correct accessibility and focus behavior.
  • I've removed the unnecessary logging of the entire event object in the handleTextBox function.

These changes should help ensure that the Input field registers input correctly. If the issue persists, please check if the changeCity function is working as expected and if there are any other factors in your application that might be affecting the behavior.

#forms