I want to display the react simple keyboard only on input click otherwise it is hidden. I have the following code. It would be very nice if someone would help. I have the following code.

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

const AutoLoan = () => {
    const [input, setInput] = useState("");
    const [layout, setLayout] = useState("default");
    const keyboard = useRef();

    const onChange = input => {
        setInput(input);
        console.log("Input changed", input);
    };

    const handleShift = () => {
        const newLayoutName = layout === "default" ? "shift" : "default";
        setLayout(newLayoutName);
    };

    const onKeyPress = button => {
        console.log("Button pressed", button);
        if (button === "{shift}" || button === "{lock}") handleShift();
    };

    const handleChange = e => {
        const input = e.target.value;
        setInput(input);
        keyboard.current.setInput(input);
    };

    return (
        <div className="auto">
            <div className="page">
                <h1 className="flex">
                    <i className="fa fa-car"></i>
                    Auto Loan
                </h1>

                <div>
                    <p className="flex-item">
                        <i className="far fa-handshake"></i>
                        <h2>
                            Welcome to our digital account opening platform.
                        </h2>
                    </p>
                    <p className="flex-item">
                        <i className="far fa-thumbs-up"></i>
                        <h2>
                            Thank you for going green with us and adopting
                            paperless way of money.{" "}
                        </h2>
                    </p>
                    <p className="flex-item">
                        <i className="far fa-clock"></i>
                        <h2>
                            This service also help to save time so that you have
                            more time to do what is more important to you.
                        </h2>
                    </p>
                </div>
                <div className="Apply">
                    <h1>Apply for Auto Loan</h1>
                </div>
                <hr />
                <div className="account">
                    <p>Enter Your Account Number for Auto Loan:</p>
                </div>
                <form className="form">
                    <input
                        type="text"
                        placeholder="Account Number"
                        value={input}
                        onChange={handleChange}
                    />

                    <Keyboard
                        keyboardRef={r => (keyboard.current = r)}
                        layoutName={layout}
                        onChange={onChange}
                        onKeyPress={onKeyPress}
                    />
                </form>
                <Link to="Form">
                    <button className="Right">
                        <i ></i>
                    </button>
                </Link>
                <div className="Account">
                    <h1>Don't have an account?</h1>
                </div>
                <hr />
                <div className="apply">
                    <p>Don't worry you can still apply for loan</p>
                </div>
                <Link to="Register">
                    <button className="loan">Apply for Auto Loan</button>
                </Link>
                <Link to="/">
                    <button className="back">
                        <i ></i>
                    </button>
                </Link>
            </div>
        </div>
    );
};

export default AutoLoan;

The keyboard should open only if someone wants to input some values otherwise it should be hidden i.e. the keyboard should be displayed only when someone wants to give some values to input otherwise it should remain hidden.

CodePudding user response：

You can do it like this

1. Keep another state to handle the visibility of the keyboard.

const [keyboardVisibility, setKeyboardVisibility] = useState(false);

2. Add onFocus handler to input.

<input
    type="text"
    placeholder="Account Number"
    value={input}
    onChange={handleChange}
    onFocus={() => {
        setKeyboardVisibility(true);
    }}
/>

3. Add a global click listener to check for clicks outside of input or keyboard and set keyboard visibility to false.

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

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

4. Combine the keyboard component with the visibility state.

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

NOTE: It's better if you move the keyboard and input logic to a single component. In that way it will work for all inputs you add later on.