ArrowKeyStepper disable onKeyDown behavior when focused on input

[landonreed]

Hi, I think you could tag this as a feature request. I noticed there was some similar discussion regarding VirtualScroll/List in #156.

My use case is essentially a spreadsheet-type editor using an arrangement of Grid components that is essentially a hybrid between the ArrowKeyStepper (for arrow key navigation) and ScrollSync (for fixed header col/row) examples. I'm listening for certain events (e.g., clicking a cell or typing Enter) to begin "editing" a cell's contents, at which point an input in that grid cell becomes focused.

I would like to propose a way to somehow disable the arrow key behavior for the ArrowKeyStepper component, either with a prop or perhaps some kind of check for focus on an input.

Sorry if this request has been fulfilled or can already be achieved, the library changes quickly and can be difficult to follow all of the changes (I'd say that's a good thing though!).

[bvaughn]

This is already possible, given the nature of React, with an approach roughly like this:

function render (props) {
  const { isEditing } = this.state

  if (isEditing) {
    return renderScrollSyncedGrids(props)
  } else {
    return (
      <ArrowKeyStepper
        columnCount={props.columnCount}
        rowCount={props.rowCount}
      >
        {({ onSectionRendered, scrollToColumn, scrollToRow }) => renderScrollSyncedGrids({
          ...props,
          onSectionRendered,
          scrollToColumn,
          scrollToRow
        })}
      </ArrowKeyStepper>
    )
  }
}

function renderScrollSyncedGrids (props) {
  return (
    <ScrollSync /> // Hidden for brevity
  )
}

But I understand this is a little more verbose than would be ideal. Check out 8.5.0; ArrowKeyStepper has a new disabled prop for you. 😄

[landonreed]

Thanks @bvaughn. By the way, this library is great!