Griddle v1.9 inputbox in customFilterComponent lose focus

Question

I'm stuck with the following problem: every time I update the searchString in my redux store, the CustomFilterConnectedComponent that I pass to Griddle loses focus and I don't understand why this happens.

this is my code based on the documentation:

Dumb component:

import { connect } from "react-redux";

const CustomFilterComponent = (props) => (
  <input
    value={props.searchString}
    onChange={(e) => { props.setSearchString(e.target.value); }}
  />
);

Smart component:

const CustomFilterConnectedComponent = connect(
  (state: TRootReducerState) => {
    return ({
      searchString: state.searchString,
    });
  },
  (dispatch: any) => ({
    setSearchString: (e) => dispatch(setSearchStringActionCreator(e))
  })
)(CustomFilterComponent);

Usage:

class SomePage extends React.Component<Props, {}> {
  render() {
  return (
        <div>

          {/* keypress - everything is ok, value is updated & focus is not lost*/}              
          <CustomFilterConnectedComponent/> 

          <Griddle
            components={{
                /* keypress - value is updated, but focus lost */                  
                Filter: CustomFilterConnectedComponent 
            }}
            storeKey="griddleStore"
            data={this.props.requests as any}
          />
     </div>
     );
   }
}

Here is a link to the issue on github.

Answer 1

I've turned your repro into a story and am not seeing your focus issue.

That said, my best guess is that the issue is related to how props.requests is provided to SomePage.