Support for dynamically disable/enable a button

[diogolessa]

Is your feature request related to a problem? Please describe. First of all, this is a great lib. I use the keyboard in a 2-step form. And it would be interesting if I could keep the {enter} button disabled whenever the input field is empty. There is a option called buttonAttributes, but it looks like a static attribute, and does not re-render the button based on a specific state. Also, even if I add the attribute disabled, it still accepts the click.

Describe the solution you'd like Being able to have a button dynamically disabled for both - click event and css.

Describe alternatives you've considered Maybe accepting a function on the value property of buttonAttributes, that may return a new attribute on re-render. Or even creating a mechanism, such as a property called disableEnter that accepts a function which returns a boolean, and based on it, toggles the disabled attribute.

Additional context

<Keyboard
  keyboardRef={r => (keyboard.current = r)}
  buttonAttributes={[
    {
      attribute: "disabled",
      value: () => "attributeValue",
      buttons: "{enter}"
    }
  ]}
/>;

or

<Keyboard
  keyboardRef={r => (keyboard.current = r)}
  disableEnter={() => boolean}
/>;

[hodgef]

Hello @diogolessa ,

I think you can achieve your desired behavior by adding pointer-events: none to disabled buttons. I agree that your solution will also work, but I'd add new code when a solution can't be found otherwise.

Here's an example: https://codesandbox.io/s/wizardly-lichterman-9o4ph?file=/src/index.js

Hope that helps! Francisco Hodge

[diogolessa]

This perfectly satisfies. I've tried not replacing the whole array of attributes, but instead just the value property, and got the intellisense error, hehe. Thanks, @hodgef