What is the best way to stop propegation of a keyboard event to the parent of a ComboBox?

[estenp]

I'm trying to manage keyboard control within an AG Grid cell editor UI.

My cell editor contains multiple ComboBoxs that can be interacted with, but in order to interact with them via keyboard I need to suppress some events from being interpreted by the grid as ending cell edit mode (Enter) or navigating to a new cell (Tab), because I want to use Enter to select an option from a ComboBox, and I want Tab to select an option and tab to the next ComboBox.

https://www.w3.org/WAI/ARIA/apg/patterns/grid/#keyboardinteraction-settingfocusandnavigatinginsidecells
https://www.ag-grid.com/react-data-grid/cell-editors/#option-1---stop-propagation

ComboBox doesn't seem to expose any events onSelection (or otherwise), I suppose because the selection event could be a click event on the ListboxItem or a keyboard event on the Input?

Is there a way to do something like in "Option 1" described above in the AG Grid docs:

const KEY_LEFT = 'ArrowLeft';
const KEY_UP = 'ArrowUp';
const KEY_RIGHT = 'ArrowRight';
const KEY_DOWN = 'ArrowDown';
const KEY_PAGE_UP = 'PageUp';
const KEY_PAGE_DOWN = 'PageDown';
const KEY_PAGE_HOME = 'Home';
const KEY_PAGE_END = 'End';

const MyCellEditor = ({ value, onValueChange }) => {
    const onKeyDown = (event) => {
        const key = { event };

        const isNavigationKey = key === KEY_LEFT ||
            key === KEY_RIGHT ||
            key === KEY_UP ||
            key === KEY_DOWN ||
            key === KEY_PAGE_DOWN ||
            key === KEY_PAGE_UP ||
            key === KEY_PAGE_HOME ||
            key === KEY_PAGE_END;

        if (isNavigationKey) {
            // this stops the grid from receiving the event and executing keyboard navigation
            event.stopPropagation();
        }
    }

    return (
        <input
            value={value || ''}
            onChange={({ target: { value: newValue }) => onValueChange(newValue)}
            onKeyDownCapture={onKeyDown}
        />
    );
});

[snowystinger]

We are currently working on Edit Mode support.

See comment in, Are inputs not allowed in GridListItem?, for more information.

Let us know if that will solve your issue.

[estenp]

Thanks for the response! Would "Edit Mode" only be a TableView functionality? Or is useGridCell something I could use to apply Edit Mode functionality to my AG Grid cell?

[snowystinger]

It should be available to everything we implement with useGridList which includes Table, Grid, and Tree at the moment

[estenp]

In that case I suppose Edit Mode won't address my situation.

In this comment you mentioned that TextField would stop propagation by itself.

I'm using RA provided Tailwind starter component set and a minimally altered ComboBox component. For what it's worth, I just tried swapping the Input out for a TextField in my ComboBox and the Enter keyboard event still propagates up to my AG Grid cell editor:

export interface ComboBoxProps<T extends object>
  extends Omit<AriaComboBoxProps<T>, "children"> {
  label?: string;
  description?: string | null;
  errorMessage?: string | ((validation: ValidationResult) => string);
  onClear?: (e: PressEvent) => void;
  children: React.ReactNode | ((item: T) => React.ReactNode);
  hideClearButton?: boolean;
  inputProps?: InputProps;
  listboxProps?: ListBoxProps<T>;
}

export function ComboBox<T extends object>({
  label,
  description,
  errorMessage,
  onClear,
  children,
  items,
  listboxProps,
  hideClearButton = false,
  ...props
}: ComboBoxProps<T>) {
  /**
   * Copied from a react-aria example. https://react-spectrum.adobe.com/react-aria/ComboBox.html#state
   * @constructor
   */
  function ComboBoxClearButton() {
    const state = React.useContext(ComboBoxStateContext);
    const clearHandler = onClear || (() => state?.setSelectedKey(null));
    return (
      <Button
        variant="icon"
        // Don't inherit default Button behavior from ComboBox.
        slot={null}
        aria-label="Clear"
        onPress={clearHandler}
        excludeFromTabOrder
      >
        <CloseIcon
          aria-hidden
          className="size-6 text-typography-default-secondary"
        />
      </Button>
    );
  }

  return (
    <AriaComboBox
      {...props}
      allowsEmptyCollection={true} // this assists in allowing autoFocus and menuTrigger to work together as expected when results are empty (initial async cb state)
      className={composeTailwindRenderProps(
        props.className,
        "group flex flex-col gap-1",
      )}
    >
      <Label>{label}</Label>
      <FieldGroup>
        <Input />
        {!hideClearButton && <ComboBoxClearButton />}
        <Button
          aria-label="Show Options"
          variant="icon"
          className="mr-1 rounded outline-offset-0"
        >
          <ExpandIcon aria-hidden className="size-6" />
        </Button>
      </FieldGroup>
      {description && <Description>{description}</Description>}
      <FieldError>{errorMessage}</FieldError>
      <Popover>
        <ListBox
          items={items}
          className="max-h-[inherit] overflow-auto p-1 outline-0 [clip-path:inset(0_0_0_0_round_.75rem)]"
          {...listboxProps}
        >
          {children}
        </ListBox>
      </Popover>
    </AriaComboBox>
  );
}

I've been able to work around this by using the "Option 2" described in the AG Grid docs, but it's a much less portable/convenient solution.

[snowystinger]

I had some more time today to look into this more. Thank you for the additional information.

I don't think TextField should ever stop Enter, it's a special case to forms. It looks like I misspoke there though. TextField doesn't automatically stopPropagation on keyboard events. At least, not yet, we're still in discussions about that behaviour.

Creating a wrapper around the editing input (or applying the key event listeners directly to it) looks reasonable (Option 1). In this case it appears to be acceptable to wrap the Input element. And since it's in a Combobox, you're not directly using the Input, apologies for that red herring about putting it in a TextField.

If there is still an issue with typeahead, then you should use the keyboardNavigationBehavior="tab" prop, which is the start of Grid Edit mode.