React/Redux: focus is lost in the input field

Question

When you enter text in the field, focus is lost. Why?

If remove the label prop, then the problem is solved. But a label is needed

<SimpleItem
  label={{ text: "Your Address" }}
  dataField="surname"
  editorOptions={{
    value: formEdit.surname,
    onValueChanged: ({ value }) => {
      addChange("surname", value);
    },
    valueChangeEvent: "keyup"
  }}
/>;

online demo: https://codesandbox.io/s/de-form-ezmmg

Answer 1

I noticed that when using Label as child of SimpleItem (instead of prop), the input doesn't lose focus on keyup event (I tried digging in the docs, but I couldn't find a reason why this would happen):

<SimpleItem
  dataField="surname"
  editorOptions={{
    value: formEdit.surname,
    onValueChanged: ({ value }) => {
      addChange("surname", value);
    },
    valueChangeEvent: "keyup"
  }}
>
     <Label text="Your Address" />
</SimpleItem>

Code Sandbox

Answer 2

Well like what jaycee discuss your field is re-rendering whenever you keyup. I've tried to change the event to blur. Try this. I hope it helps.