CODEWITHSUNDEEP
reactjsmaterial-table
tw1742
tw1742

Reputation: 1484

Start search on Enter using React material-table

I'm new to using React and material-table and am trying to sort out how to initiate search after the user presses Enter. I've been able to find the debounceInterval option, but the API I am using to search remote data currently does not return partial matches so I'd like the user to press "Enter" when they want the search to start.

Using monitorEvents($0) I can see that there is a keydown Event on the element input.MuiInputBase-input.MuiInput-input.MuiInputBase-inputAdornedStart.MuiInputBase-inputAdornedEnd but I'm not sure how to add an event listener here or is there is an option to specify which event.target.value to use to start the search. The material-table Search code is here: https://github.com/mbrn/material-table/blob/master/src/components/m-table-toolbar.js

Any help would be greatly appreciated.

Upvotes: 0

Views: 1909

Answers (1)

Oleg Levin
Oleg Levin

Reputation: 3621

Example:

<TextField
  onKeyPress={(ev) => {
   console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
  // Do code here
     ev.preventDefault();
    }
  }}
  />

Upvotes: 2

Related Questions