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}': ' ',
'{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