Inline Edit Grid Cell Focus Is Not Working?

In another thread named: "", it was discussed how to set the focus to a grid cell in a KendoReact Grid control. Here's the example provided from that thread:

>>

"This can be done by selecting the desired element based on a query selector and calling its focus method:
      https://stackblitz.com/edit/react-lthy76?file=app/main.js"

<<

That's a pretty good example, however in real UX it doesn't work that way....

Under a normal use case for UX, you would not want the user to have to press a button such as "Focus Input" or "Focus Textbox" prior to then selecting an inline Edit button. What users would more likely want to see is when they press the inline grid Edit button that the focus immediately appears on the particular column that starts the editing.

Thus, in my use case, I have a single editable textfield inside a Grid, and using the code from the example in stackblitz above,

i.e. >>

    let firstInput = document.getElementsByClassName('k-textbox')[0];

    if (firstInput) {

      firstInput.focus();
   }

<<

inside an enterEdit(dataItem) function called from an Edit command cell (from code grabbed from the KendoReact Grid documentation)

the result is that firstInput is always "undefined" and focus is never given to that cell.

BTW, Here's the full enterEdit() routine:

enterEdit = (dataItem) => {
   this.setState({
     originalItem: dataItem
   });
   this.updateGridData(this.state.data, dataItem).inEdit = true;
   this.setState({
     data: this.state.data.slice()
  });
  let field = document.getElementsByClassName('k-textbox')[0];
  if (field) {
    field.focus();
  }
};

Is there a reason why the field is always "undefined"? Could this be a timing issue? Does the focus need to be preset prior to a call for editing?

Can anyone shed some light on this issue?

Thanks,

Jim Minnihan

SKF, Inc.