CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Akshay Kumar
Akshay Kumar

Reputation: 467

How to clear TextField after ENTER key press in React

I am using Mui component TextField in TypeSCript and I want to clear TextField after ENTER key is pressed.

Here is my code snippet

<TextField
      {...params}
      autoFocus
      className="SymbolInput"
      onChange={(e) => {
       setSearchTerm(e.target.value);
        handleInputdebounced(e.target.value);
      }}
      onBlur={clearState}
      onFocus={() => setSearchResults([])}
      placeholder="Add symbols"
      name="searchname"
      onKeyPress={(e) => {
        if (e.key === 'Enter') {
          onPressEnter();
          setSearchTerm('');
        }
      }}
      InputProps={{
        ...params.InputProps,
        type: 'search',
        sx: { pb: '2px', pt: '2px'  },
        endAdornment: (
          <InputAdornment position="end" sx={{width:0}}>
            {loading ? <CircularProgress color="inherit" size={20} /> : <SearchIcon />}
          </InputAdornment>
        ),
      }}
      inputProps={{
        ...params.inputProps,
        sx: { textTransform: 'uppercase', },
      }}
    />

const onPressEnter = async () => {
  if (searchTerm && searchTerm.length > 0) {
    onAddSymbol(searchTerm);
  }
};

const handleSearchChange = async (searchTerm: string) => {
const searchValue = searchTerm;
//Check if there are any previous pending requests
if (typeof autoCompleteCancelToken != typeof undefined) {
  autoCompleteCancelToken?.cancel('Operation canceled due to new request.');
}
//Save the cancel token for the current request
autoCompleteCancelToken = axios.CancelToken.source();
if (searchValue && searchValue.length > 0) {
  setLoading(true);
  setSearchTerm(searchTerm);
  const response = await companyLookup(searchTerm, { cancelToken: autoCompleteCancelToken?.token });
  if (!response.hasErrors) {
    setSearchResults(response.data || []);
  }
  setGetValue(searchValue);
  setEditable(false);
  setLoading(false);
}
if (searchValue.length == 0) {
  setSearchResults([]);
}
};

const handleInputdebounced = useMemo(() => debounce(handleSearchChange, 200), []);

I am setting the value of textfield (searchTerm) in setSearchTersm useState but it is not working.

Can someone please help me on this?

Upvotes: 3

Views: 1734

Answers (1)

Hritik Sharma
Hritik Sharma

Reputation: 2020

<TextField
      {...params}
      value={searchTerm}
      autoFocus
      className="SymbolInput"
      onChange={(e) => {
       setSearchTerm(e.target.value);
        handleInputdebounced(e.target.value);
      }}
      onBlur={clearState}
      onFocus={() => setSearchResults([])}
      placeholder="Add symbols"
      name="searchname"
      onKeyPress={(e) => {
        if (e.key === 'Enter') {
          onPressEnter();
          setSearchTerm('');
        }
      }}
      InputProps={{
        ...params.InputProps,
        type: 'search',
        sx: { pb: '2px', pt: '2px'  },
        endAdornment: (
          <InputAdornment position="end" sx={{width:0}}>
            {loading ? <CircularProgress color="inherit" size={20} /> : <SearchIcon />}
          </InputAdornment>
        ),
      }}
      inputProps={{
        ...params.inputProps,
        sx: { textTransform: 'uppercase', },
      }}
    />

Just add a value property to TextField and assign it to searchTerm( searchTerm is the state variable ). I hope this solves your issue . Please upvote if it does :)

Upvotes: 1

Related Questions