[EuiDataGrid] Rendering EuiTextField inside cell breaks focus

[deliveryblueprintsdev]

When rendering an EuiTextField inside a EuiDataGrid cell, it doesn't behave as described in the documentation with regards to interactive elements.

When clicking the cell, instead of the focusing the text element, the cell focuses instead, and a second click is required before the click event is bubbled down to the text input.

Additionally, any re-renders of the EuiDataGrid results in the focus of the text field being lost also, so it's only possible to enter one character before you have to re-focus again.

How can I ensure a single click focuses the cell input, and subsequent re-renders don't remove the focus from the field?

Video Example

[snide]

From DataGrid's top level docs

Although it is similar to traditional spreedsheet software, EuiDataGrid's current strengths are in rendering rather than creating content.

Although we can look at this specific focus problem, short term, the current suggestion would be to put all dynamic inputs within the popover system. A more long term solution and feature spec needs to be considered for DataGrid to be reliable for data entry. It really hasn't been tested much for that use case yet, and while I'm sure it'll work in pieces, the experience isn't going to be optimal. Just stating that out loud so we're clear on timing for this issue, because my guess is a few more will stem out of it.

[snide]

And just to be clear, that doesn't preclude someone from picking up this issue! Just sort of stating the long term "DataGrid as Excel" functionality likely will be pretty involved.

[chandlerprall]

Heh. I was planning on putting together an excel-like demo with datagrid over the weekend, just for fun. I'm sure I'll run into the same issues and will probably start fixing them as I go. Thanks for reporting, @deliveryblueprintsdev !

[chandlerprall]

I put together a quick proof of concept at https://tissue.chandlerprall.com , and code at https://github.com/chandlerprall/tissue

The only custom thing I did with the datagrid is override .euiDataGridRowCell padding

---

When clicking the cell, instead of the focusing the text element, the cell focuses instead, and a second click is required before the click event is bubbled down to the text input.

I was able to reproduce this issue in my setup by modifying the renderCellValue prop into returning a new component type every render. Specifically, I modified the return statement at https://github.com/chandlerprall/tissue/blob/master/src/App.tsx#L66-L78 to:

  const PassThrough: FunctionComponent<any> = () => <EuiFieldText
    className="tissueEntry"
    value={isFocused ? value : displayValue}
    isInvalid={isInvalid}
    onChange={(e) => setValue(e.target.value)}
    onFocus={() => setIsFocused(true)}
    onBlur={() => {
      setIsFocused(false);
      sheet.setCellValue(cellId, value);
    }}
  />;
  return <PassThrough/>;

The problem this creates is React sees the returned component type as different between the render passes because the functions are different in memory. React then replaces the underlying DOM with completely new elements as a result. This means the input element you were typing in no longer exists, or when clicking on the input, it suddenly doesn't exist and focus moves to the wrapping cell.

---

The keyboard interaction is not ideal... I keep trying to tab and alt+tab between cells instead of using the arrow keys. And then, when you're in an input box, the arrow keys are not usable for moving the text cursor. The keyboard fixes an application would need to apply today are:

• on keydown of left/right arrows call event.stopPropagation() to prevent the grid from changing the cell focus
• on keydown of tab, find the next/previous (if alt modifier) cell, and call .focus() on it

We should probably expose the following from EuiDataGrid:

• onFocusChange callback, with the column/row coordinates of the now-focused cell
• method on EuiDataGrid's ref value to set the cell focus
• (maybe) helper methods on the ref to advance/retreat cells/rows/columns ?
• (maybe) include an isFocused prop when calling the cell renderer? I had to manage my own isFocused state to toggle which value to render

Anything handling cell focus has a complication where the visual cell coordinates (top-left visual cell is always [0,0]) don't have parity with identifying what data that cell corresponds to (pagination, sorting, in the future pinned columns/rows, etc). It's likely we'd want to remain purely in the visual space and if the application has specific needs otherwise, it would need to implement that mapping logic.

[daveyholler]

Closing this as not planned.