hodgef / simple-keyboard

Javascript Virtual Keyboard - Customizable, responsive and lightweight

Home Page:https://virtual-keyboard.js.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setting input doesn't seem to work

NathanTe opened this issue · comments

Simple-keyboard version
3.7.13 inside angular project

Describe the bug
I set the input of the keyboard using

this.keyboardService.clearInput$.subscribe((input) => {
			this.keyboard.setInput(input);
			console.log('cleared', this.keyboard.input['default']);
		});

then I check if the input is actually set by logging it, this gives me the right value. When I click a key on the keyboard it just ignores my input and creates a new one. (if i press a instead of testa it gives me a). Am I doing something wrong here?

Code for my keyboard itself

value = '';
keyboard!: Keyboard;

constructor(private keyboardService: KeyboardService) {}

ngAfterViewInit() {
		this.keyboard = new Keyboard({
			onChange: (input) => this.onChange(input),
			onKeyPress: (button) => this.onKeyPress(button),
			theme: 'hg-theme-default dark',
			mergeDisplay: true,
			display: {
				'{space}': '&nbsp',
				'{enter}': '↵ enter',
				'{bksp}': '⌫',
				'{123}': '123',
				'{abc}': 'ABC',
			},
			layout: {
				default: ['{tab} a z e r t y u i o p {bksp}', '{lock} q s d f g h j k l m {enter}', '{shift} w x c v b n , . {shift}', '{123} {space} {123}'],
				shift: ['A Z E R T Y U I O P { } |', '{lock} Q S D F G H J K L M : " {enter}', '{shift} W X C V B N < > ? {shift}', '{123} {space} {123}'],
				123: ['0 1 2 3 4 5 6 7 8 9 {bksp}', '~ ! @ # $ % ^ & * ( ) _ + ', '[ ] ; \\', '{abc}'],
			},
		});
		this.toetsenbordService.clearInput$.subscribe((input) => {
			this.keyboard.setInput(input);
			console.log('cleared', this.keyboard.input['default']);
		});
	}

	onChange = (input: string) => {
		console.log('Input changed', input);
		this.toetsenbordService.setInput(input);
	};

	onKeyPress = (button: string) => {
		console.log('Button pressed', button, this.keyboard.input['default']);
		if (button === '{shift}' || button === '{lock}') this.handleShift();
		if (button === '{123}' || button === '{abc}') this.handle123();
	};

	private handleShift = () => {
		let currentLayout = this.keyboard.options.layoutName;
		let shiftToggle = currentLayout === 'default' ? 'shift' : 'default';

		this.keyboard.setOptions({
			layoutName: shiftToggle,
		});
	};

	private handle123 = () => {
		let currentLayout = this.keyboard.options.layoutName;
		let numberToggle = currentLayout !== '123' ? '123' : 'default';

		this.keyboard.setOptions({
			layoutName: numberToggle,
		});
	};

Provide a repro
If needed I can provide a reproduction, but I think I'm just missing something.

Unfortunately, I will need a repro for this. Feel free to edit one of the Angular sandboxes in the documentation site with your code. Then, you can share the updated sandbox link.

Regards,
Francisco Hodge