Ref doesn't focus / How to switch focus between grids?

[hunterwilhelm]

I want to create a hotkey that switches focus between grids. But I can't get the focus to work programmatically using the ref. There is no focus function on it. I have tried using the parent div for focusing but that doesn't work either.

Here is an example of it not working. It works with the input field but not the react grid components.

https://codesandbox.io/s/reactgrid-ref-not-working-p3rz8p?file=/src/App.tsx

[MichaelMatejko]

This feature will be supported by reactgrid v5 :) Want to give your input and find out more? Join our RG Discord: https://discord.gg/XMHJrDGp

[hunterwilhelm]

I found a solution! The element that we need to focus is not the one the ref is attached to, rather it is the child with className rg-hidden-element

I made a function that you can pass the ref of the DataGrid element to and will focus the right one.

import { RefObject } from "react";

/** This function is used for focusing the current data grid */
export function focusDataGridWithRef(ref: RefObject<HTMLDivElement>) {
  const input = ref.current?.querySelector('.rg-hidden-element') as any;
  if (input == null) return;
  if (input.focus instanceof Function) {
    input.focus();
  }
}

edit: If anyone wants a full example, just tag me in a reply in this thread and I'll make a codesandbox for you

[robertgutu]

@hunterwilhelm Hi, can you help me with a sandbox code for a function that just remove the focus from the grid(like how the grid is in the initial state before clicking any cell)

[hunterwilhelm]

@robertgutu I am not sure this issue is talking about the task you mentioned. But basically you want to clear grid so there is no "highlighted cell", correct?

Take a look at the focus management API here: https://reactgrid.com/docs/4.0/2-implementing-core-features/7-managing-focus/

Does that help?

[robertgutu]

@hunterwilhelm I already looked at it and it did not help. I couldn't find what value do I need to set the focus in order to "remove the focus"