react-hotkeys icon indicating copy to clipboard operation
react-hotkeys copied to clipboard

[BUG] HotKeys component changes childrens size

Open jason076 opened this issue 6 years ago • 0 comments

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

jason076 avatar Jan 22 '20 16:01 jason076