How to set or clear value of material-ui Input in ReactJS

Question

I am unable to clear the value of a material-ui Input using refs, not state.

I've tried both types of refs that I know about: ref={this.input} - and - ref={el => (this.input = el)}

but neither seems to work w/ a material-ui Input

the following similar questions did not help: How to get input value of TextField from Material UI? Clear and reset form input fields Clear an input field with Reactjs? how to set Input value in formField ReactJs

Here's a snippet of my React JSX for the input & button:

    <Input
      type="text"
      id="name"
      inputComponent="input"
      ref={el => (this.name = el)}
    />
    <Button
      variant="contained"
      onClick={this.handleClear}
      className="materialBtn"
    >
      Clear
    </Button>

And the event handler that I expect should clear the input value:

    handleClear() {
      this.name.value = "";
    }

I can make the code work fine using a standard HTML5 input, but not with a material-ui input, which is a requirement of this project. Additionally, this element's value is NOT in react state and I am not looking for a solution that requires using state -- I need to keep this piece as an uncontrolled component.

What am I missing w/ regard to material-ui? I have combed their docs/api but haven't found anything that suggests it needs to be handled differently from a standard input. thanks

Here's an example on CodeSandbox showing the failure w/ a material-ui input and success w/ an HTML5 input: https://codesandbox.io/s/fancy-frost-joe03

What is the version of Metherial UI?

Jackkobec
– Jackkobec

2019-08-08 20:59:22 +00:00
Commented Aug 8, 2019 at 20:59 — Jackkobec
– Jackkobec, Commented Aug 8, 2019 at 20:59
I'm using material-ui/core 4.3.0.

Coder
– Coder

2019-08-08 22:58:03 +00:00
Commented Aug 8, 2019 at 22:58 — Coder
– Coder, Commented Aug 8, 2019 at 22:58

Ramaraja · Accepted Answer · 2019-08-09 07:05:09Z

6

I figured it out, you are using the wrong prop for the ref. You should be using inputRef prop. Here is the correct version,

<Input
    type="text"
    id="name"
    inputComponent="input"
    inputRef={el => this.name = el}           
/>
<Button
    variant="contained"
    onClick={this.handleClear}
    className="materialBtn"
>
 Clear
</Button>

handleClear() {
      this.name.value = "";
    }

The reason is that the Material Input component creates an element with the following structure,

<div class="MuiInputBase-root MuiInput-root MuiInput-underline">
<input class="MuiInputBase-input MuiInput-input" id="name" type="text" value=""></input>
</div>

So, using ref would reference the root element which is <div>. So, they created a separate prop called inputRef to reference the child element <input>.

I updated your codesandbox.io code and saved it. Check out the full working code here,

https://codesandbox.io/s/elastic-dhawan-l4dtf

edited Aug 9, 2019 at 7:05

answered Aug 8, 2019 at 21:06

Ramaraja

2,6421 gold badge22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Coder Over a year ago

Wow, it never occurred to me that Material-UI prevents a React ref from working as designed. It would have been helpful if the documentation had gone to the trouble of stating that inputRef must be used in place of a standard React ref. Thank you for your insight.

Ramaraja Over a year ago

@Coder True, it is a bit unconventional. I happened to figure it out by looking at the API here. The reason is that the Material Input component creates an element with the structure <div><input></input></div>, so using ref would reference the root element which is <div>. So, they created a separate prop called inputRef to reference the child element <input>. I have updated the answer with this explanation

Cepheus Over a year ago

I keep forgetting to use inputRef as opposed to ref.

Vimal Patel · Accepted Answer · 2021-12-12 15:52:24Z

1

import React, { useState } from 'react'
    
import { Button, Container, InputBase } from '@material-ui/core'


const ClearText = ()=> {
    const [text , setText] = useState("")
}

const clearTextField = () => setText("")

    return (
        <Container>
        <InputBase 
        value={text ? text : ""}
        onChange={(e)=>setText(e.target.value)}
        />


        <Button onClick={clearTextField} > Clear </Button>
        </Container>
    )
};

export default ClearText;

edited Dec 12, 2021 at 15:52

Vimal Patel

3,1152 gold badges27 silver badges39 bronze badges

answered Dec 11, 2021 at 3:35

beforeitstoolate

111 bronze badge

2 Comments

Chris Over a year ago

Welcome to Stack Overflow. Code is a lot more helpful when it is accompanied by an explanation. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.

beforeitstoolate Over a year ago

i thought it was straightforward but noted, thanks

Collectives™ on Stack Overflow

How to set or clear value of material-ui Input in ReactJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related