CODEWITHSUNDEEP
reactjseventsevent-handlingmaterial-uitextfield
Socrates
Socrates

Reputation: 9574

Material UI TextField event for field leave

Is there an event for leaving the field or loosing focus in the Material UI TextField?

I need two events, one for entering and one for leaving the field. Entering the field can be handled by using onFocus, but is there also one for leaving, i.e. onFocusLost or onUnfocus? The following code segment show the current use, missing the event for loosing focus.

<TextField
    value={this.state.fieldFirstName}
    onChange={(e: any) => this.onChangeFieldFirstName(e.target.value)}
    onFocus={() => this.onFocusFieldFirstName()}
/>

Versions in use:

Upvotes: 11

Views: 20491

Answers (2)

John kerich
John kerich

Reputation: 46

I am using MUI 6.1.5 and onBlur will go off only if I click outside the input field, in this case the TextField. There is still no support for any onFocusOut that still supported for html. I am still looking for someway to move the mouse out of the input box and have the callback go off so I can validate the value of the inputted range. So onBlur really doesn't work well for me.

Upvotes: 0

Umut Yal&#231;ın
Umut Yal&#231;ın

Reputation: 292

<TextField
value={this.state.fieldFirstName}
onChange={(e: any) => this.onChangeFieldFirstName(e.target.value)}
onFocus={() => this.onFocusFieldFirstName()}
onBlur={() => this.onBlurField()}/>

Use onBlur event this will solve your problem

Upvotes: 22

Related Questions