TextField lose focus when typing to Redux Reactjs

Question

I am using MaterialUI to build component Expanded, where inside I have list of text fields.

I store data in redux.

reduxState = {
    fieldName1:[
      {
          primaryText:"text1",
      },
      {
          primaryText:"text2"
      },
    ],
    fieldName2:[
      {
          primaryText:"text1"
      },
      {
          primaryText:"text2"
      },
    ]
}

Each Exapanded keeps a textField of each fieldNameN

the component Exapanded looks like this

function Expanded(props) {
  const {onChange, title, list } = props

  const CustomPaper = withStyles({
     root:{
       color: blue
     }
  })(Paper)

  return (
    <ExpansionPanel>
      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>{title}</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
          <Grid container spacing={1} direction="row">
            {list.map((item,i) => 
              <CustomPaper key={i}>
                <TextInput label="Main Text" value={item.primaryText} xs={12} onChange={(value) => onChange(value, i, 'primaryText')}/>
              </CustomPaper >
            )} 
          </Grid>           
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
}

Example of use


            <Expanded
              title={`Add FieldName1`}
              list={reduxState.fieldName1}
              onChange={onChangeSectionInfo('fieldName')}
            />

the onChangeSelectionInfo function calls redux action updateSection when typing

    [formActionTypes.UPDATE_SECTION]: (state, action) => {
      //ex. field-FieldName, value-"text1Updated", index=0, element="primaryText"
      const { field, value, index, element } = action.payload;
     return {
        ...state,
        [field]: state[field].map((object, i) =>
          i === index ? { ...object, [element]: value } : object
        )
      };
    },

The problem is that I can only type one char, and then it unfocus the TextField. Is it the problem with redux, that it takes too long to update?

EDIT: The solution from here is not helping, I took out all the loops and still doesnt work

shouldn't you be passing the `onChangeSectionInfo` function itself instead of calling it in `onChange={onChangeSectionInfo('fieldName')}` ? — Always Learning, Feb 09 '20 at 00:56
I use `Expanded` component inside other one which has defined function `onChangeSectionInfo`, that is why I send it as a props — user0810, Feb 09 '20 at 01:04
but you don't send it as a props. You send `onChangeSectionInfo('fieldName')` which is whatever that function returns. — Always Learning, Feb 09 '20 at 01:06
I dont think it is a problem, since it is updating the value in redux once, and after then losing the focus — user0810, Feb 09 '20 at 02:09

score 1 · Accepted Answer · answered Feb 10 '20 at 12:28

On every re-render you are re-creating the CustomPaper which will require a full remount of the component(CustomPaper) and not only a re-render, this is why you lose the focus.

Remove the component outside of your component and never define components inside components.

score 0 · Answer 2 · answered Feb 09 '20 at 01:17

Each time you type a character in the input the onChange is being called, which updates props, and your component is composed with props, so React re-renders it, which make the field lose focus. Try changing the event handler to onBlur or something, if you can.

Current chain of events:

Use props to render component
Component renders input field
You type and onChange is triggered
Your onChange is passed up to the parent and props is updated
Props is used to render the component again.

score 0 · Answer 3 · answered Feb 10 '20 at 12:23

So the problem was actually the CustomPaper in Expanded component that I created (I edited my question, before I didnt show that I was using CustomPaper, cause it didnt seem important to me). When I change CustomPaperto Paper from MaterialUI everything worked. Any ideas why?

TextField lose focus when typing to Redux Reactjs

3 Answers3