6.9.2: Header Filter Input Losing Focus After Keydown

In 6.9.2, the open field text inputs in the header columns are losing focus after you press a key. I believe this came in with the 6.9.0 changes.

As a sidenote, I replaced the regular text inputs with a search input, which is nice because you get the ‘clear’ button and it doesn’t trigger the browser’s autocomplete. Pretty sure that has nothing to do with losing focus, but I’ll keep testing.

FilterComponent={({ filter, onChange, column }) => (
  <input
    className="w-100"
    type="search"
    placeholder={column.Placeholder}
    value={filter ? filter.value : ''}
    onChange={event => onChange(event.target.value)}
  />
)}

[boonep]

@tannerlinsley was correct. Moving the custom component from the render phase solved my issues.

const CustomTableFilter = ({filter, onChange}) => {
  return (
    <Input type="search" value={filter ? filter.value : ''}
      onChange={event => (event ? onChange(event.currentTarget.value) : "")}/>
  );
};

render() {
  return (
     <ReactTable
        columns={[
          {
            Filter: CustomTableFilter
          }
        ]}
     />
  );
}

[technicaltitch]

Moving the columns declaration out of the render method (and using an uncontrolled input) worked for me. (Just refactoring to an external function as @boonep suggested didn’t in my case.)

class AcmeCmp extends Component {
  columns = [
    {
      Header: 'header', accessor: 'acc', 
      Cell: row => (
        <input defaultValue={row.original.colId.value} 
          onChange={event => {
            const newValue = event.target.value;
            if (this.isTableValid(row.column.id, row.index, newValue)) {
              this.setState(({ data }) => ({data: [slice & insert newValue]}));
            } else {  // roll back value, as this is uncontrolled
              event.target.value = this.state.data[index][column].value;
            }
          }} />)
      },
      // other columns...
  ];
  isTableValid = (column, index, proposedValue) => { return true or false };
  render() {
    return (
        <ReactTable
          data={this.state.data}
          columns={this.columns} />
    )
  }
}

Mine wasn’t working because columns was declared within the render() function, so as @tannerlinsley pointed out (if my understanding is right) the original DOM elements were no longer accessible for React to diff with, so it re-rendered everything on every edit.