CODEWITHSUNDEEP
eventsautocompleteprototypejsscriptaculous
Cheluis
Cheluis

Reputation: 1412

Scriptaculous Autocomplete list closes on scroll bar click

I have a really annoying issue with Autocomplete with Prototype 1.6. I set up and dialog-style div with a form, which contains an Autocomplete. Everything works fine until I click the scroll bar, or drag it; it closes the list of suggestions. I checked this solution but now I got an javascript error

event.srcElement is undefined

I was checking the controls.js and tried to catch the event object inside the onBlur event, but it travels empty. Printed the offsetX property and is undefined. Looks like the event doesn't exist anymore. either way, it prevents that the list closes but, If I click outside the area, the list now doesn't close. And that's kinda of issue too

Anyone with this same issue? Any idea?

Thanks in advance

Upvotes: 0

Views: 2159

Answers (1)

Vinod K
Vinod K

Reputation: 148

I was having the exact issue yesterday, but after doing some r&d I got a pretty handy fix for this.
By default this script was hiding the result div (Suggestion List) on the blur event on the search text box so as soon as we click on result div's scroll bar focus gets lost from input element & result div closes. So I did a small edit in controls.js to change the behavior of script, so now result div close method doesn't invoke on blur (focus out) from input element but triggered on the click on the document except the text input element.

For your convenience I've put the edited controls.js here.

If you like to know what has changed in JS file, here it is;

  1. Added a event listener to the document. Just below this line
    "Event.observe(this.update, "keypress", this.onKeyPress.bindAsEventListener(this));"

    Event.observe($(document), "mouseup", this.onMouseup.bindAsEventListener(this));

  2. Added a new onMouseup method.

    onMouseup: function(event) {    
if(!this.hasFocus) {  
    this.hideTimeout = setTimeout(this.hide.bind(this), 250);   
        this.hasFocus = false;  
        this.active = false;  
    }  
},

  3. Modify the onBlur method (Comment out two line in block)

    onBlur: function(event) { 

    //this.hideTimeout = setTimeout(this.hide.bind(this), 250);   
    //this.active = false;  
    this.hasFocus = false;       
}

I hope this will solve your issue.

Thanks
Vinod Kumar

Upvotes: 1

Related Questions