[RAC] Handle key events on GridLists item

[piecyk]

Hi, wondering how we should handle key down events on GridLists item, if we pass onKeyDown to an Item it will not be called as it filtered with filterDOMProps https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/GridList.tsx#L329

My use case is pretty simple, having a list user can grade each item by pressing a key from 1-6,

https://codesandbox.io/s/winter-breeze-cyvlnz?file=/src/App.js:0-648

import React from "react";
import { GridList, Item } from "react-aria-components";

export default function App() {
  let rows = [
    { id: 1, name: "Games" },
    { id: 2, name: "Program Files" },
    { id: 3, name: "bootmgr" },
    { id: 4, name: "log.txt" }
  ];

  return (
    <GridList aria-label="Favorite pokemon" selectionMode="multiple">
      {rows.map((row) => (
        <Item
          key={row.id}
          id={row.id}
          onKeyDown={(e) => {
            console.log("handle key", e.key); // should this be called?
          }}
          textValue={row.name}
        >
          <div>"{row.name}"</div>
        </Item>
      ))}
    </GridList>
  );
}

What is best approach here? Even if i register key down even on window in child of Item, then it's hard to filter out current as the target will be from Item where focus is.

[LFDanLu]

I don't think we considered a use case like this when we made the hook, I am a bit concerned that it may clash with the typeahead support that is built in though, especially since the typeahead keydown handler is a capturing one. The only way to add that custom onKeyDown for now is to dropdown to the hook level implementation I think where you could then add the item.props to the list item node directly: https://react-spectrum.adobe.com/react-aria/useGridList.html#example

[piecyk]

The reason why i want to use GridList it's becase of drag and drop, when you start to drop for hook level implementation it's gets messy really fast. For now went with ( also updated original codesnabox )

import { useRef, useEffect, useCallback, useLayoutEffect } from "react";
import { GridList, Item } from "react-aria-components";

export function useEventCallback(fn) {
  const ref = useRef(fn);
  useLayoutEffect(() => {
    ref.current = fn;
  });
  return useCallback((...args) => ref.current.apply(void 0, args), []);
}

const MyItem = ({ children, id, onKeyDown, ...props }) => {
  const ref = useRef(null);

  const onKeyDownEvent = useEventCallback(onKeyDown ?? (() => undefined));

  useEffect(() => {
    const handler = (event) => {
      const root = ref.current?.closest(`[data-key="${id}"]`);
      if (root?.contains(event.target)) {
        onKeyDownEvent(event);
      }
    };
    window.addEventListener("keydown", handler, true);
    return () => {
      window.removeEventListener("keydown", handler, true);
    };
  }, [id, onKeyDownEvent]);

  return (
    <Item {...props} id={id} ref={ref}>
      {children}
    </Item>
  );
};
export default function App() {
  let rows = [
    { id: 1, name: "Games" },
    { id: 2, name: "Program Files" },
    { id: 3, name: "bootmgr" },
    { id: 4, name: "log.txt" }
  ];

  return (
    <GridList aria-label="Favorite pokemon" selectionMode="multiple">
      {rows.map((row) => (
        <MyItem
          key={row.id}
          id={row.id}
          textValue={row.name}
          onKeyDown={(e) => console.log("key", e.key)}
        >
          {row.name}
        </MyItem>
      ))}
    </GridList>
  );
}