CODEWITHSUNDEEP
javascriptgoogle-chromefocusdom-eventstimepicker
Kristian
Kristian

Reputation: 21830

How to retain input focus when clicking on a scrollbar for selection list

I wrote a little plugin for mootools to have a time picker attached to an input field.

It works just fine, but I've noticed that in Chrome, when you click on the scrollbar to navigate the chooser list, the input loses focus. In other browsers, it does not lose focus.

http://jsfiddle.net/SDBCe/

//the events that close the selector during blur:
el.addEvents({
    'focus': function() {
        TimePicker.active(el);
    },
    'blur': function() {
        setTimeout( function() {
            el.fireEvent('change');
        },150);
    },
    'change': function() {
        TimePicker.validateField(el);
        TimePicker.inactive(el);
    },
    'keypress': function(evt) {
        if(evt.key == 'enter') {
            el.blur();
        }
    }
});

How should I adjust my events so that way simply using the scrollbar on the dropdown list doesn't blur my input?

Upvotes: 4

Views: 1711

Answers (1)

Kristian
Kristian

Reputation: 21830

After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:

1. upon the opening of the list, add a click event to the document that
   checks to see if the click is not on in the active input, and not on
   the active list. If this is true and the click is in fact on a non-listy
   part of the document, then close it.
2. add an event to each list item in the suggest list (when the list is
   open only) that selects the value and closes the list.
3. add an keydown event to the input itself so if the user hits enter,
   it changes the value and closes the list.

the new version of the javascript code can be found here: http://jsfiddle.net/SDBCe/1/

Upvotes: 1

Related Questions