Improve handing of ESC key

[LukMas]

Hi!

First of all, thanks! The library is really nice, and moreover is does what is says: it's accessible! Tested together with a colleague of mine, he has found it 'complete'. Thanks!

I use the autocomplete inside a bootstrap modal window. Unfortunately, when I press the ESC key, not only the autocomplete close, but also the modal window. I think, but I'm not really sure, that this is related to the fact that for ESC and TAB the same function is called:

       case keyCodes.TAB:
       case keyCodes.ESC:
       this.reset();

But, I suppose that a more correct behaviour is to avoid to bubble up the events for ESC, otherwise the modal window (but any other handler for ESC that stays in the chain) handles the key.
It this is not the case, is possible to add an option to avoid the bubbling in some circumstances?
Thanks!

[tomickigrzegorz]

Thanks for kind words.

I didn't test the library on the modal layer so I missed this problem.

The question is whether in your free moment you are able to prepare such a version with bootstarp and modal, e.g. on codepen.io or codesandbox.io? I have little experience with bootstrap and it would help me to solve this problem :)

Thanks!

[tomickigrzegorz]

I was able to prepare a bootstrap with modal :)
If you need a quick fix, just add a small change to the code and compile the library on your own:

case keyCodes.TAB:
case keyCodes.ESC:
  event.stopPropagation(); // this line fixed issue
  this.reset();

This solves the problem but I have to test it more.
I will release a new revised version presumably tomorrow.

Thanks for finding the bug.

[LukMas]

Super! Thank you!
I would have prepared a test version, but I'm busy testing the form. Anyway, you were much faster then me.

May I ask you to do something like this:

case keyCodes.ESC:
  event.stopPropagation(); // this line fixed issue
case keyCodes.TAB:
  this.reset();

In this way the normal behaviour for TAB is kept, just for ESC an extra action is done.
I'm not totally sure (I can't test the code), but it could be that now the tabbing between the inputs is blocked because you don't propagate it up.

[tomickigrzegorz]

I have to test it yet, but after what I can see TAB is not blocked, it goes to the next element so it works fine even after turning off the button clear clearButton: false,

[LukMas]

ah, super!
Thank you for having checked and solved it really fast.

[tomickigrzegorz]

A new version of the library 1.7.2 has appeared.
I also added an example of using bootstrap + modal + autocomplete

[LukMas]

Super! Thank you very much for being so helpful and fast to solve this. Good work! And best wishes for the new year! Il mar 28 dic 2021, 18:59 Grzegorz Tomicki ***@***.***> ha scritto:

…

A new version of the library 1.7.2 has appeared. I also added an example of using bootstrap + modal + autocomplete <https://tomik23.github.io/autocomplete/#bootstrap-modal> — Reply to this email directly, view it on GitHub <#119 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEXPQCG4S2HL5KPXAPNRLV3UTH3JBANCNFSM5K4JGXHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>