Keyboard not displaying after router navigate on Angular

This issue has been tracked since 2022-02-12.

Simple-keyboard version
3.4.44

Describe the bug
I'm using the simple-keyboard in an Angular project which basically consists of 2 components with same template (both containing a keyboard), each linked to the other through a router.navigateByUrl.

The keyboard displays fine when I initially land on the root component, but as I navigate to the second component, the keyboard doesn't display and its element in the DOM looks empty in the inspector.

This doesn't happen if I directly target the URL writing it in the browser address bar.

Screenshots
Schermata 2022-02-12 alle 19 53 16
Schermata 2022-02-12 alle 19 54 03

hodgef wrote this answer on 2022-02-14

Hello @NPaolo,

The keyboard class needs to be instantiated every time the DOM element is recreated. I believe this doesn't happen in your logic as you change pages, but to confirm I would need a repro. Do you mind providing a test git repo or runnable sandbox example that would allow me to debug this?

I will reopen once that's provided, thanks!

dmesmin wrote this answer on 2022-02-28

@NPaolo I have the same issue, I tried to reproduce it with a simple stackblitz but I'm unable to, it's always working :p
Did you solve it ? thanks

hodgef wrote this answer on 2022-02-28

Hey @dmesmin do you mind providing a test git repository that shows the issue? I'm sure it has something to do with the app logic but I would need to debug to find a solution.

NPaolo wrote this answer on 2022-03-02

@dmesmin Hi, I also couldn't reproduce it on Stackblitz, but I figured out that the issue only comes up when I navigate from a keyboard page to another keyboard page.

So I solved it with a workaround, navigating first on a different page and then to the target page.

Page 1 (keyboard) --> Page 2 --> Page 3 (keyboard)

hodgef wrote this answer on 2022-03-02

Sadly I did not get the repro so I cannot tell for sure what the issue is. That being said, you can try giving different classes to each keyboard:

https://hodgef.com/simple-keyboard/questions-answers/give-different-base-class-keyboard/

Alternatively, you can try calling destroy on route unload:
https://hodgef.com/simple-keyboard/documentation/methods/destroy/

Hope that helps. Closing the thread as I cannot do much here without repro.

Regards,
Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-02
Star Count 1737
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date