How to see if a user has clicked off a TextField in MUI

Question

Using material-ui's TextField, how do I check if a user has clicked off the TextField/has finished editing it? I don't want to use onChange as I don't want it to be activated every time something has happened as I only want to send a POST request once a user has confirmed they have finished editing by going off the TextField. If this isn't possible would it be a bad practice to send a POST request every time onChange is called?

Answer 1

You can listen to onBlur event.

const handleOnBlur = (e) => {
    alert("Left text box with the value: " + e.target.value);
};

<TextField
        onBlur={handleOnBlur}
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
/>
 

Note: If you want to fire POST request whenever the text changes, you can read about debounce

Refer: Perform debounce in React.js