PickList: unexpected scrolling on "long" Click

[EugenFischer]

PickList: unexpected scrolling on "long" Click

[EugenFischer]

nice ...

[melloware]

@EugenFischer when you say "long click" do you mean on a mobile browser?

[melloware]

I just tried your scenario in Windows 11 Chrome and its not happening for me?

[melloware]

OK nevermind it happens on the VERY FIRST click after loading the page but stops happening after that.

[melloware]

Bug is right here....

this.jq.off('focus.pickList blur.pickList keydown.pickList', listSelector).on('focus.pickList', listSelector, null, function(e) {
            var list = $(this),
                activeItem = $this.focusedItem||list.children('.ui-state-highlight:visible:first');

[melloware]

MonkeyPatch:

if (PrimeFaces.widget.PickList) {
    PrimeFaces.widget.PickList.prototype.bindItemEvents = function() {
        var $this = this;

        this.items.on('mouseover.pickList', function(e) {
                $(this).addClass('ui-state-hover');
            })
            .on('mouseout.pickList', function(e) {
                $(this).removeClass('ui-state-hover');
            })
            .on('click.pickList', function(e) {
                //stop propagation
                if ($this.checkboxClick || $this.dragging) {
                    $this.checkboxClick = false;
                    return;
                }

                var item = $(this),
                    parentList = item.parent(),
                    metaKey = (e.metaKey || e.ctrlKey);

                if (!e.shiftKey) {
                    if (!metaKey) {
                        $this.unselectAll();
                    }

                    if (metaKey && item.hasClass('ui-state-highlight')) {
                        $this.unselectItem(item, true);
                    } else {
                        $this.selectItem(item, true);
                        $this.cursorItem = item;
                    }
                } else {
                    $this.unselectAll();

                    if ($this.cursorItem && ($this.cursorItem.parent().is(item.parent()))) {
                        var currentItemIndex = item.index(),
                            cursorItemIndex = $this.cursorItem.index(),
                            startIndex = (currentItemIndex > cursorItemIndex) ? cursorItemIndex : currentItemIndex,
                            endIndex = (currentItemIndex > cursorItemIndex) ? (currentItemIndex + 1) : (cursorItemIndex + 1);

                        for (var i = startIndex; i < endIndex; i++) {
                            var it = parentList.children('li.ui-picklist-item').eq(i);

                            if (it.is(':visible')) {
                                if (i === (endIndex - 1))
                                    $this.selectItem(it, true);
                                else
                                    $this.selectItem(it);
                            }
                        }
                    } else {
                        $this.selectItem(item, true);
                        $this.cursorItem = item;
                    }
                }

                /* For keyboard navigation */
                $this.removeOutline();
                $this.focusedItem = item;
                parentList.trigger('focus.pickList');
            });

        if (this.cfg.transferOnDblclick) {
            this.items.on('dblclick.pickList', function() {
                var item = $(this);

                if ($(this).parent().hasClass('ui-picklist-source')) {
                    $this.transfer(item, $this.sourceList, $this.targetList, 'dblclick');
                } else {
                    $this.transfer(item, $this.targetList, $this.sourceList, 'dblclick');
                }

                /* For keyboard navigation */
                $this.removeOutline();
                $this.focusedItem = null;

                PrimeFaces.clearSelection();
            });
        }

        if (this.cfg.showCheckbox) {
            this.checkboxes.off().on('mouseenter.pickList', function(e) {
                    $(this).addClass('ui-state-hover');
                })
                .on('mouseleave.pickList', function(e) {
                    $(this).removeClass('ui-state-hover');
                })
                .on('mousedown.pickList', function(e) {
                    var item = $(this).closest('li.ui-picklist-item');
                    $this.focusedItem = item;
                })
                .on('click.pickList', function(e) {
                    $this.checkboxClick = true;

                    var item = $(this).closest('li.ui-picklist-item');
                    if ($this.cfg.transferOnCheckboxClick) {
                        if (item.parent().hasClass('ui-picklist-source')) {
                            $this.transfer(item, $this.sourceList, $this.targetList, 'checkbox', function() {
                                $this.unselectItem(item);
                            });
                        } else {
                            $this.transfer(item, $this.targetList, $this.sourceList, 'checkbox', function() {
                                $this.unselectItem(item);
                            });
                        }
                    } else {
                        if (item.hasClass('ui-state-highlight')) {
                            $this.unselectItem(item, true);
                        } else {
                            $this.selectItem(item, true);
                        }
                        $this.focusedItem = item;
                    }
                });
        }
    }
}

[EugenFischer]

awesome

[EugenFischer]

Thanks a lot.
Even if there is no direct usecase for,
but maybe you have an idea why the scrolling also happens or right-clicking on an element.

[melloware]

oh let me check the right click i was more worried about that long left click.

[melloware]

Try this

if (PrimeFaces.widget.PickList) {
    PrimeFaces.widget.PickList.prototype.bindItemEvents = function() {
        var $this = this;

        this.items.on('mouseover.pickList', function(e) {
                $(this).addClass('ui-state-hover');
            })
            .on('mouseout.pickList', function(e) {
                $(this).removeClass('ui-state-hover');
            })
                .on('mousedown.pickList', function(e) {
                    var item = $(this).closest('li.ui-picklist-item');
                    $this.focusedItem = item;
                })
            .on('click.pickList', function(e) {
                //stop propagation
                if ($this.checkboxClick || $this.dragging) {
                    $this.checkboxClick = false;
                    return;
                }

                var item = $(this),
                    parentList = item.parent(),
                    metaKey = (e.metaKey || e.ctrlKey);

                if (!e.shiftKey) {
                    if (!metaKey) {
                        $this.unselectAll();
                    }

                    if (metaKey && item.hasClass('ui-state-highlight')) {
                        $this.unselectItem(item, true);
                    } else {
                        $this.selectItem(item, true);
                        $this.cursorItem = item;
                    }
                } else {
                    $this.unselectAll();

                    if ($this.cursorItem && ($this.cursorItem.parent().is(item.parent()))) {
                        var currentItemIndex = item.index(),
                            cursorItemIndex = $this.cursorItem.index(),
                            startIndex = (currentItemIndex > cursorItemIndex) ? cursorItemIndex : currentItemIndex,
                            endIndex = (currentItemIndex > cursorItemIndex) ? (currentItemIndex + 1) : (cursorItemIndex + 1);

                        for (var i = startIndex; i < endIndex; i++) {
                            var it = parentList.children('li.ui-picklist-item').eq(i);

                            if (it.is(':visible')) {
                                if (i === (endIndex - 1))
                                    $this.selectItem(it, true);
                                else
                                    $this.selectItem(it);
                            }
                        }
                    } else {
                        $this.selectItem(item, true);
                        $this.cursorItem = item;
                    }
                }

                /* For keyboard navigation */
                $this.removeOutline();
                $this.focusedItem = item;
                parentList.trigger('focus.pickList');
            });

        if (this.cfg.transferOnDblclick) {
            this.items.on('dblclick.pickList', function() {
                var item = $(this);

                if ($(this).parent().hasClass('ui-picklist-source')) {
                    $this.transfer(item, $this.sourceList, $this.targetList, 'dblclick');
                } else {
                    $this.transfer(item, $this.targetList, $this.sourceList, 'dblclick');
                }

                /* For keyboard navigation */
                $this.removeOutline();
                $this.focusedItem = null;

                PrimeFaces.clearSelection();
            });
        }

        if (this.cfg.showCheckbox) {
            this.checkboxes.off().on('mouseenter.pickList', function(e) {
                    $(this).addClass('ui-state-hover');
                })
                .on('mouseleave.pickList', function(e) {
                    $(this).removeClass('ui-state-hover');
                })
                .on('mousedown.pickList', function(e) {
                    var item = $(this).closest('li.ui-picklist-item');
                    $this.focusedItem = item;
                })
                .on('click.pickList', function(e) {
                    $this.checkboxClick = true;

                    var item = $(this).closest('li.ui-picklist-item');
                    if ($this.cfg.transferOnCheckboxClick) {
                        if (item.parent().hasClass('ui-picklist-source')) {
                            $this.transfer(item, $this.sourceList, $this.targetList, 'checkbox', function() {
                                $this.unselectItem(item);
                            });
                        } else {
                            $this.transfer(item, $this.targetList, $this.sourceList, 'checkbox', function() {
                                $this.unselectItem(item);
                            });
                        }
                    } else {
                        if (item.hasClass('ui-state-highlight')) {
                            $this.unselectItem(item, true);
                        } else {
                            $this.selectItem(item, true);
                        }
                        $this.focusedItem = item;
                    }
                });
        }
    }
}