inputbox in customFilterComponent lose focus

in fact this is a repetition of another issue, which was closed without a solution: https://github.com/GriddleGriddle/Griddle/issues/475

Griddle version

1.9.0

Expected Behavior

input should not lose focus.

Actual Behavior

input loses focus

Steps to reproduce

export class SearchStringFilter extends React.Component<TProps, {}> {

  render() {

    return (
      <input
        value={this.props.searchString}
        onChange={this.props.onChange} //dispatch("SOME_ACTION_FOR_CHANGE_VALUE") 
      /> 
    );
  }
}

<Griddle
    components={{
        Filter: SomeCustomFilter
    }}

I use my own redux store and every time I send a new searchString to onChange event. But unfortunately the focus of the filter is lost. What could be the problem? maybe there is some kind of workaround?

note: I’ve read that re-initializing HOC inside a render function often leads to this problem, but that’s just my guess.

Don’t Use HOCs Inside the render Method React’s diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from render is identical (===) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they’re not equal, the previous subtree is unmounted completely. https://reactjs.org/docs/higher-order-components.html

I tried to find a problem with HOC in griddle but did not find it. At first sight everything is all right.

[radziksh]

@dahlbykI I found the reason:

1. I had an event in my application that worked 1 time per second. (telemetry for a some timer)
2. I used griddle version 1.9.0 since this is for some reason the last of the releases https://www.npmjs.com/package/griddle-react

when I started to look at the source code in my node_modules I noticed that componentWillReceiveProps looks like this: (raw)

 _createClass(Griddle, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var data = nextProps.data,
          pageProperties = nextProps.pageProperties,
          sortProperties = nextProps.sortProperties;


      this.store.dispatch(actions.updateState({ data: data, pageProperties: pageProperties, sortProperties: sortProperties }));
    }

so if an event occurs (and I have it happen 1 time per second), then the grid updates its state automatically and the focus is lost.

but in github it looks like this:

  componentWillReceiveProps(nextProps) {
    debugger;
    const newState = _.pickBy(nextProps, (value, key) => {
      return this.props[key] !== value;
    })

    // Only update the state if something has changed.
    if (Object.keys(newState).length > 0) {
     this.store.dispatch(actions.updateState(newState));
    }
  }

in this case, the state of the grid is updated only if some of the props has changed.

at this point I realized that my version is not the last and there is not this important update. I updated the version to 1.10.1 and the focus stopped being lost 😃

perhaps it is worth making a new release https://www.npmjs.com/package/griddle-react to version 1.10.1?

ps: @dahlbyk thanks a lot, your advice helped me narrow down the search.

[radziksh]

hi @dahlbyk I simplified the example and asked a question on stackoverflow: https://stackoverflow.com/questions/47229902/griddle-v1-9-inputbox-in-customfiltercomponent-lose-focus