leaflet-search icon indicating copy to clipboard operation
leaflet-search copied to clipboard

Input Doesn't Count the First Character

Open SegFault0x0 opened this issue 7 years ago • 4 comments

Even though the minLength option is set to 1, the search doesn't produce the tooltip until the second character. this._input.value.length in _handleKeypress isn't properly representing the count. With one character in the input box, the length equals 0.

I found that adding another event handler for keyup fixes the count issue while still allowing a submit via the Enter key. However, this causes the arrow keys to move two selections at a time instead of one.

_createInput:

L.DomEvent
    .disableClickPropagation(input)
    .on(input, 'keydown', this._handleKeypress, this)
    .on(input, 'keyup', this._handleKeypress, this)
    ...

SegFault0x0 avatar Apr 07 '17 23:04 SegFault0x0

I solved the caveat by creating a separate handler for the keyup event, _handleKeyUp, and giving it _handleKeypress's default case.

_handleKeypress: function (e) { //run _input keyup event

    switch(e.keyCode)
    {
        case 27://Esc
            this.collapse();
        break;
        case 13://Enter
            if(this._countertips == 1 || (this.options.firstTipSubmit && this._countertips > 0))
                this._handleArrowSelect(1);
            this._handleSubmit();   //do search
        break;
        case 38://Up
            this._handleArrowSelect(-1);
        break;
        case 40://Down
            this._handleArrowSelect(1);
        break;
        case  8://Backspace
        case 45://Insert
        case 46://Delete
            this._autoTypeTmp = false;//disable temporarily autoType
        break;
        default:
        break;
    }
},

_handleKeyUp: function(e) {
    switch(e.keyCode)
    {
        case 13://Enter
        case 27://Esc
        case 38://Up
        case 40://Down
        case  8://Backspace
        case 45://Insert
        case 46://Delete
        case 37://Left
        case 39://Right
        case 16://Shift
        case 17://Ctrl
        case 35://End
        case 36://Home
        break;
        default://All other keys

            if(this._input.value.length)
                this._cancel.style.display = 'block';
            else
                this._cancel.style.display = 'none';

            if(this._input.value.length >= this.options.minLength)
            {
                var that = this;

                clearTimeout(this.timerKeypress);   //cancel last search request while type in              
                this.timerKeypress = setTimeout(function() {    //delay before request, for limit jsonp/ajax request

                    that._fillRecordsCache();
                
                }, this.options.delayType);
            }
            else {
                this._hideTooltip();
            }
        break;
    }

    this._handleAutoresize();
},

SegFault0x0 avatar Apr 08 '17 00:04 SegFault0x0

Hey @SegFault0x0 ,

Would you care to offer a Pull Rquest? Your changes seem close enough from a solution for the owner of the project to consider it :).

jlengrand avatar Apr 17 '17 21:04 jlengrand

@jlengrand Done, and here's hoping! :)

SegFault0x0 avatar Apr 20 '17 05:04 SegFault0x0

hi @SegFault0x0 is not very clear the solution, however from version 2.3.6 I replaced keydown with keyup. If your issue continue to exists we can think about new PR for fixing it

stefanocudini avatar Aug 29 '17 17:08 stefanocudini