Ant Design table search and sorter customization

Question

Is there a simple fix to prevent the table from sorting when clicking into input on table header?

Code Sandbox

I tried to add onclick handler to the input search field, but did not help.

onClick={(e) => e.preventDefault()}

Answer 1

This happens because of events bubbling. You can read about events propagation here https://javascript.info/bubbling-and-capturing.

In your case you should stopPropagation on input click event.

<Input
     ...
      onClick={(e) => {
        e.stopPropagation();
      }}
   ...
 />