MUI input does not center title when clear through react reference?

user_12295278 0
Viewed 34

Problem:

In my web application, I have MUI input where I access the value through key down and clear the input field via React reference.

This is how I have organized my input field.

 <TextField onChange={(event)=>{
            if(event.target.value == ""){
              setButtonDisabled(true)
            }else{
              setButtonDisabled(false)
            }
          }} helperText={parcelIdErr} error={parcelIdErr != ""} inputRef={parcelIdRef} autoFocus onKeyPress={scanHandler} sx={{ margin: '0', width: '30%' }} margin="normal" id="" label="Parcel ID" variant="outlined" />

This is my scan handler code.

const scanHandler = (e: any) => {
    setParcelId(barcodeScan(e))
    if (e.key === 'Enter' || e.keyCode === 13) {
      handleParcelIdErr(e.target.value)
    }else{
      setParcelIdErr("")
    }
  };

export function barcodeScan(e: any) {
  if (e.key === 'Enter' || e.keyCode === 13) {
    console.info('scanHandler', 'barcodeScan', e);
    return e.target.value;
  }
}

After the successful scan, I tried to clear my input via reference but it still keep the label on top of the input field like this.

enter image description here

This is how I am clearing my input field via reference.

  const resetBinIdTextField = () => {
    if (parcelIdRef?.current) {
      parcelIdRef.current.value = ""
    }
  };

I tried a lot to find out a solution to this but I was unable to do so. Can someone help me to solve this issue?

Thank you in advance.

material-ui reactjs
1 Answers

I assume from your question that you want to blur the Textfield.

Try adding a line to your resetBinIdTextField

  const resetBinIdTextField = () => {
    if (parcelIdRef?.current) {
      parcelIdRef.current.value = ""
      parcelIdRef.current.blur()
    }
  };

Example code -> https://codesandbox.io/s/react-mui-forked-o2no71

user_50985950
Related