[BUG] GlobalHotKeys disrupts layout, but HotKeys does not

[Nantris]

Describe the bug

Seems like some sort of flex issue. It changes flex orientation in some cases.

Expected behavior Changing components (Global vs non-global) should not alter layout Platform (please complete the following information):

• Version of react-hotkeys 2.x
• Browser [e.g. chrome, safari]
• OS: [e.g. iOS]

Are you willing and able to create a PR request to fix this issue? No

[sbrichardson]

Can you verify the version you are using? The latest version doesn't need a container I believe.

How is <GlobalHotKeys /> being used in your app?

// Unnecessarily nested

<App>
  <MainContentTheme>
    <GlobalHotkeys children={restOfApp} />
  </MainContentTheme>
</App>


// or 
<App>
  <GlobalHotkeys />
  <MainContentTheme>
    {restOfApp}
  </MainContentTheme>
</App>

// You can also try moving it higher in the tree
<>
  <App>  
    <MainContentTheme children={restOfApp} />
  </App>
  <GlobalHotkeys />
</>

[Nantris]

It was at the highest level. It was necessary for me to nest it inside of another layout componen, which was not necessary with <HotKeys />

[greena13]

Hi @Slapbox,

Are you rendering <GlobalHotKeys> with children, or without? Rendering without children actually doesn't mount anything to the DOM (but still renders <GlobalHotKeys/> in the React component tree).

Please let me know exactly how you're using it, so I can assist you.

Thank you, @sbrichardson for trying to help out. I really appreciate the support.

[Nantris]

Hey @greena13, thanks for your response. That makes sense about rendering without children, but we are rendering with children. We were able to work around it by wrapping it like so:

<div style={{ display: 'flex' }}>
  <GlobalHotKeys>{children}</GlobalHotKeys>
</div>

I just thought it odd that a discrepancy in layout would exist.