react simple keyboard not able to type in multiple input

Question

I have following code of Calculator.jsx where everything looks fine.The main thing I want to achieve is keyboard to displayed only on input click which is done but the keyboard does not seem to type though the following code looks fine. Are there any other way to show/hide keyboard only on input click as well as make keyboard be able to type. My code for Calculator.jsx is Calculator.jsx

import React, { useState, useRef, useEffect } from 'react';
import './Calculator.css'
import { Link } from 'react-router-dom';
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";

const Calculator = () => {
 

  
  const [inputs, setInputs] = useState({});
  const [layoutName, setLayoutName] = useState("default");
  const [inputName, setInputName] = useState("default");
  const keyboard = useRef();
    const [keyboardVisibility, setKeyboardVisibility] = useState(false);

  
    useEffect(() => {
      function clickHanlder(e) {
        if (
          !(e.target.nodeName === "INPUT") &&
          !e.target.classList.contains("hg-button") &&
          !e.target.classList.contains("hg-row")
        ) {
          setKeyboardVisibility(false);
        }
      }

      window.addEventListener("click", clickHanlder);
      return window.removeEventListener("click", clickHanlder, true);
    }, []);
  

  const onChangeAll = inputs => {
    
    setInputs({ ...inputs });
    console.log("Inputs changed", inputs);
  };

  const handleShift = () => {
    const newLayoutName = layoutName === "default" ? "shift" : "default";
    setLayoutName(newLayoutName);
  };

  const onKeyPress = button => {
    console.log("Button pressed", button);

   
    if (button === "{shift}" || button === "{lock}") handleShift();
  };

  const onChangeInput = event => {
    const inputVal = event.target.value;

    setInputs({
      ...inputs,
      [inputName]: inputVal
    });

    keyboard.current.setInput(inputVal);
  };

  const getInputValue = inputName => {
    return inputs[inputName] || "";
  };


  
    
    return (
        <div>
        <div className="bg">
         <div className="deposit">
            <div className="header">
             
             <h1>Deposit Calculator</h1>
                <div className="form">
                 <form  className="calculator">
                     <div className="form-group">
                    <label for="depositAmount">Deposit Amount:</label>
                    <span className="rupees">Rs</span>
                    <input className="IInput"
                     type="text"
                     name='depositAmount'
                          placeholder='0'
                          value={getInputValue("depositAmount")}
                        
                      onChange={onChangeInput}
                      onFocus={() => {
                         setKeyboardVisibility(true);
                        setInputName("depositAmount")
                      }}
                       
                        />
                                   
                     </div>
                      <div className="form-group">
                      <label for="interestRate">Interest Rate:</label>
                     <input className= "IIinput"
                     type="text"
                    name='Interest'
                                        placeholder='0'
                                        value={getInputValue("interestRate")}
                                        
                      onChange={onChangeInput}
                      onFocus={() => {
                        setKeyboardVisibility(true);
                        setInputName("interestRate")
                      }}
                     />
                                    
                                    
                     <span className= "percent">%</span>       
                </div>
                <div class="form-group">
                    <label for="Tenure">Tenure:</label>
                    <input className="Input"
                      type='number'
                      min='1'
                      max='5'
        
                      name='tenure'
                      placeholder='1 year'
                      value={getInputValue("tenure")}
                                  
                      onChange={onChangeInput}
                      onFocus={() => {
                        setKeyboardVisibility(true);
                        setInputName("tenure")
                      }}

                                        
                                        
                                       
                                    />
                                   
                                </div>
                  { keyboardVisibility && (
                                  <Keyboard
                                    keyboardRef={(r) => (keyboard.current = r)}
                                    layoutName={layoutName}
                                    onChange={onChangeAll}
                                    onKeyPress={onKeyPress}
                                  />
                                )}
                                  
                                    
                                   
                                  
                                
                                
                            </form>
                          
                           
                <button className="calculate">Calculate
                            </button>
                                 
                          
                
                
                        
             </div>
          <div className="given">
            <p >
            Total Deposit: Rs 0
         </p>
         <p>
        Interest: Rs 0
         </p>
         <p>
         Maturity Amount: Rs 0
                            </p>
                            
                        </div>
                       
                    </div>
                     
                   
                </div>
                
  </div>
 
 <Link to="/">
 <button className="Back">
  <i class="fas fa-angle-double-left"></i>
         </button>
     </Link>
        </div>
    );
};

export default Calculator;

Answer 1

You are setting the inputs state by spreading input string from keyboard onChangeAll into an object setInputs({ ...inputs }). If I enter ab it will set as {0: "a", 1:"b"}.

Update the onChange prop in Keyboard to onChangeAll and pass inputName prop with your inputName state value. Read react-simple-keyboard DOCS.

onChangeAll

 const onChangeAll = (inputs) => {
    console.log("Inputs changed", inputs);
    setInputs(inputs);
  };

Keyboard

{keyboardVisibility && (
              <Keyboard
                keyboardRef={(r) => (keyboard.current = r)}
                layoutName={layoutName}
                onChangeAll={onChangeAll}
                onKeyPress={onKeyPress}
                inputName={inputName}
              />
            )}

CodeSandbox link