Need help to understand the use of `HiddenElement` component. [Not a Bug]

[Asha729]

Hello there,

Hidden input fields make a weird bug in our app. For instance, if we select a cell, then we won't be able to copy any text from the page unless we double-click the cell. After some research, I found out that the hidden input is always focused when we click on a cell and that behavior will persist until we double-click on the cell. As a quick fix, I did the following thing:

useEffect(() => { setTimeout(() => { const el = document.querySelector('.rg-hidden-element'); if (el) { el.blur(); // remove focus el.style.display = 'none'; // or remove it entirely } }, 0); }, []);

This resolved the issue, but I'm worried about if this change may break anything else in the grid. May I know why we use the hidden input ?

[MichaelMatejko]

Hi Asha,
The hidden Input is used to catch/attract all the key input and clipboard events. It emulates a realistc focus behavior. Imagine you would place dozens of input fields on a page. When you click on one of them, it will be focused. The same happens when you click on ReactGrid. It will be focused. But the Border you see it's just a virtual thing, it's not the actual native browser focus. That's why we introduced the hidden element

I hope I explained understandably :)

Mike

[Asha729]

Hi Mike,

Thank you very much for your reply. Yeah, that makes sense. Do you have any idea why the hidden input (focused) prevents us from copying any text from the webpage? Any suggestions for investigating this issue?

Asha