CODEWITHSUNDEEP
htmlcssreactjsinputreact-simple-keyboard
Sanoj Kashyap
Sanoj Kashyap

Reputation: 5060

Input text goes out of bound while typing | react-simple-keyboard

I am facing text going out of bound issue while typing. I am using styled component for UI, and react-simple-keyboard

<EnterID
                            type="text"
                            id="Id"
                            value={this.state.input.Id}
                            placeholder={tempStrings.string}
                            onChange={this.setId.bind(this)}
                            onFocus={() => this.setInput("Id")}>
</EnterID>

Issue: enter image description here

you can see text getting out of bound and it will keep adding right so you wont be able to know what you are currently typing.

setInput(inputName) {
        this.setState(
            {
                inputName: inputName
            },
            () => {
                let val: any = $("#" + inputName).val();
                this.keyboard.setInput(val);
            }
        );
    }

I searched a lot but I did not get the solution proper.

Weird: with hardware keyboard(mac keyboard) its just works fine the only issue when I start using app keyboard which is third party component. But I guess that should not affect.

CodeSandBox Link - https://codesandbox.io/s/myp0l6xnj

Upvotes: 1

Views: 358

Answers (0)

Related Questions