CODEWITHSUNDEEP
reactjsmaterial-ui
John
John

Reputation: 117

Mouse hover on textfield doesn't work after typing

I have a textfield component that will set a value to the textfield and resize everytime the mouse hovers on the textfield, but this stops working after typing in the textfield it doesn't set a value anymore when hovered on, and i'm not sure why it stops working.

Here you can find the code: https://codesandbox.io/s/material-ui-enter-key-issue-fix-ld0hr?file=/src/App.js

import React, { useState } from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const [ggg, setggg] = useState();

  const handleHover = (event) => {
    setggg("hhhhhhhhhhh hhhhhhhhh hhhhhhhhh h hhhhhhhhh uhu kh uk ");
  };

  return (
    <form>
      <TextField
        defaultValue={ggg}
        multiline
        onMouseOver={handleHover}
        id="filled-basic"
        label="Filled"
        variant="filled"
      />
    </form>
  );
}

Upvotes: 0

Views: 1049

Answers (1)

GBourke
GBourke

Reputation: 1953

You are only setting the defaultValue to your state. You need to use the input in a "Controlled" mode, where you capture the input when changed, in state, and set it through the "value" attribute.

CodeSandbox

Code:

import React, { useState } from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const [ggg, setggg] = useState();

  const handleHover = (event) => {
    setggg("hhhhhhhhhhh hhhhhhhhh hhhhhhhhh h hhhhhhhhh uhu kh uk ");
  };
  
  //Capture the input value on change and store it in state
  const handleChange = (e) => {
    setggg(e.target.value);
  };

  return (
    <form>
      <TextField
        value={ggg} //<-- Set the value to the state. defaultValue is only an initial value
        multiline
        onMouseOver={handleHover}
        id="filled-basic"
        label="Filled"
        variant="filled"
        onChange={handleChange} //<-- capture input here to update state
      />
    </form>
  );
}

Upvotes: 3

Related Questions