Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Set the inventory key binding to letter "I" and set Inventory button to be unfocusable

See original GitHub issue

Hi, @ASteinheiser. Forwarding my usability concerns from Reddit:

On desktop, when I want to read my Inventory, I use the mouse & click on the button, then I have to close it with the same controls, but the Inventory button does not lose focus. Here, [Space] and [Enter] are used as attack action keys, but by browser design, they also mean a “click” user action on <button> elements, so, when I close the Inventory, then attack a monster on my next move, the Inventory comes up. It’s really annoying.

There really needs to be something to tackle this:

class Inventory extends Component {
  // ... other component class methods

  render() {
    const { newItemIndicator } = this.state;
    const { disabled, dialog, sideMenu } = this.props;
    const { inventory: open } = dialog;

    return (
      <div className='flex-row inventory__container'>
          !disabled &&
              tabIndex={-1} // unfocusable button
// ... other module imports

import isGamePaused    from '../dialog-manager/actions/is-game-paused';
import toggleInventory from '../dialog-manager/actions/toggle-inventory';
// inventory visibility is controlled by the global app state; good for us!

import { ANIMATION_SPEED } from '../../config/constants';

const Controls = ({ isGamePaused, attackMonster, movePlayer }) => {
  // ... other component constants & functions

  function handleKeyDown(event) {
    // move with 'WASD' or Arrow keys
    switch(event.keyCode) {
      case 37:
      case 65:
        return movePlayer('WEST');

      // ...
      // ... other `event.keyCode` case handlers
      // ...

      case 73:
        return toggleInventory(); // "I" => show / hide the inventory!

        // some console.log comment I couldn't be bothered to copy! :)

  return null;

const actions = {
  toggleInventory, // controls should be able to modify Inventory visibility, too!

export default connect(null, actions)(Controls);

I’m sure that this will open up more questions from the audience about key binding usability, but I think it’s a reasonable place to start.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:13 (9 by maintainers)

github_iconTop GitHub Comments

ASteinheisercommented, Mar 18, 2019

Alright, I will wait for @KajiTetsushi to make a PR, then I’ll close @Alaricus PR and merge the new PR in. Thanks guys!

Alaricuscommented, Mar 18, 2019

I’m about to go to sleep, so I’ve no problem with this. 😃 In fact, if you want to, feel free to just copy/paste my PR and add whatever you were going to.

Read more comments on GitHub >

github_iconTop Results From Across the Web

PSA: Hit the apostrophe key to open the Archnemesis league ...
I set mine to Ctrl+[inventory key] since it's also opening up an inventory. ... You can bind it to any other button if...
Read more >
Issues · ASteinheiser/ · GitHub
Set the inventory key binding to letter "I" and set Inventory button to be unfocusable enhancement New feature or request game feature make...
Read more >
Certain Keybinds & Mouse-binds Cannot Be Set - Bugs
My “Weapon Special Actions” key refuses to be rebound from middle mouse button, no matter what I try. My current workaround is to...
Read more >
Make an HTML element non-focusable - Stack Overflow
I understand that a list of elements that can receive focus can be defined and that a user can navigate through these elements...
Read more >
TextBox | Roblox Creator Documentation
The ContextActionService honors TextBox keybinds and will automatically prevent ... If set to true, input native to the platform is used instead of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found