checkClose fails when clicking on SVG element

[revgum]

Clicking outside of the keyboard, on an SVG image (for example) fails with Uncaught TypeError: $target[0].className.indexOf is not a function.

At

Keyboard/js/jquery.keyboard.js

Line 1829 in cf27d1d

if ($target.length && $target[0].className.indexOf(kbcss.keyboard) > -1) {

a simple fix could be either:

if($target.length && $target.hasClass(kbcss.keyboard))

OR

var hasClassName = typeof($target[0].className) === "string" ? $target[0].className.indexOf(kbcss.keyboard) > -1 : false;
// needed for IE to allow switching between keyboards smoothly
if ($target.length && hasClassName) {

For context, $target[0].className is: SVGAnimatedString {baseVal: "map_image", animVal: "map_image"}

[Mottie]

Hi @revgum!

Interesting, I guess I never noticed because I've been setting pointer-events: none on all my svgs.

Anyway, thanks for the find and the fix. If I remember correctly, I chose to use indexOf instead of hasClass because all keyboard elements start with ui-keyboard. I believe it was to support an odd behavior in older versions of IE... I should have specified a version eh?

[revgum]

Hey, thanks @Mottie .. I didn't know about pointer-events: none! Learned something new today!

Also.. thank you for the merge...and, more importantly, thanks for your work on a great piece of software!

[jedimonkey]

Hey @Mottie, are you able to do another release to npm soon with this fix? - We have a project using your awesome keyboard, but it's throwing stacks of errors with our interactive svgs. :-/ Sadly can't use the pointer-events: none workaround.

[Mottie]

Hi @jedimonkey!

Oh yeah, I totally forgot to push a new release. All done, v1.28.1 is now available.

[jedimonkey]

Cheers @Mottie! keep up the good work! :)