Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard not working with Chosen dropdown #737

Open
andre-lima opened this issue May 3, 2019 · 5 comments
Open

Keyboard not working with Chosen dropdown #737

andre-lima opened this issue May 3, 2019 · 5 comments

Comments

@andre-lima
Copy link

Hello,

I can't seem to make the virtual keyboard work with a Chosen multiselect dropdown.

I've checked this answer on SO by @Mottie, but this solution didn't work for me.
https://stackoverflow.com/questions/29298356/mottie-virtual-keyboard-and-chosen-selector

Please let me know if there's something that can be done.

Thank you

@Mottie
Copy link
Owner

Mottie commented May 4, 2019

Hi @andre-lima!

I don't think I've ever created a demo for this keyboard to be used with chosen... I'll take a look this weekend, if I get some time.

@cortexrd
Copy link

cortexrd commented May 4, 2019

We have the same problem. Can't wait for a solution...
Knack uses this object everywhere and we really like your virtual keyboard, but we must find a way to use it with the filtered drop-down object.

@Mottie
Copy link
Owner

Mottie commented May 4, 2019

It's not perfect, but this method should work for the default settings.

I didn't test this on multi-selects or other chosen settings (demo):

$(function() {
  $("select")
    .on("chosen:ready", function(e, obj) {
      obj.chosen.search_container
        .find("input")
        .keyboard({
          // Used by jQuery UI position utility
          position: {
            // null = attach to input/textarea;
            // use $(sel) to attach elsewhere
            of: $(document),
            my: "center bottom",
            at: "center bottom",
            // used when "usePreview" is false
            at2: "center bottom"
          },
          reposition: true,
          usePreview: false,
          change: function(e, keyboard, el) {
            keyboard.$el.trigger("keyup.chosen");
            // attempt to keep the chosen dropdown from closing when
            // you click on the keyboard container instead of a key
            obj.chosen.mouse_on_container = true;
          }
        })
        .addTyping({
          showTyping: true,
          delay: 250
        });
    })
    .chosen();
});

@andre-lima
Copy link
Author

Thank you. It's a lot better than before, but if I add another dropdown, I have to tab twice to make the second one open.
Do you know if there's a fix for this?

@Mottie
Copy link
Owner

Mottie commented May 4, 2019

Do you have the tabNavigation option set as true? I tried setting that and I could only use tab once, and the select lost focus and closed the keyboard (demo). If you want to get tabs to work, you'll probably need to modify the switchInput callback to change the behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants