Search code examples
javascriptreactjsreduxreact-reduxdevextreme

React/Redux: focus is lost in the input field


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


Solution

  • 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