react-hotkeys
react-hotkeys copied to clipboard
[BUG] HotKeys component changes childrens size
Describe the bug If the HotKeys component wraps a div with percentaged size, the size of the div will shrink to its minimum to fit its content.
How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc)
<div className="App">
<header className="App-header">The Header</header>
<div className="content">
<HotKeys keyMap={keyMap} handlers={handlers}>
<div className="test">Test</div>
</HotKeys>
</div>
</div>
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
min-height: 20vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.content {
height: 80vh;
}
.test {
width: 100%;
height: 100%;
background-color: aqua;
}
Expected behavior The HotKeys component should not influence the page layout.
Platform (please complete the following information):
- Version of react-hotkeys: 2.0.0
- Browser: chrome
- OS: Ubuntu
Are you willing and able to create a PR request to fix this issue? no
Include the smallest log that includes your issue:
HotKeys (F0📕-E0❤️-C0🔺) Registered component:
{
"childIds": [],
"parentId": null,
"keyMap": {
"TEST": "e"
}
}
AbstractKeyEventStrategy.js:305 HotKeys (F0📕-E0❤️-C0🔺) Registered component mount:
{
"childIds": [],
"parentId": null,
"keyMap": {
"TEST": "e"
}
}
What Configuration options are you using?
Default