Selectonemenu of Primefaces selects an item by pressing a hot key with CTRL

Question

I have JSF forms with some keyboard shortcuts, for example, CTRL+S triggers Submit to save data.

The problem is that when a key combination is pressed into a field <p:selectOneMenu>, the first item starting with S (as the example) is selected and then the form is submitted.

It is possible to reproduce this behavior by accessing the showcase, selecting the first field and pressing CTRL+The. In Chrome at least it will select the first option and then open the "Open File" dialog" (Open).

My intention is for the component to ignore the typed letter if a special key is pressed.

I tested the html component SELECT and the jQuery UI combo and the same behavior does not occur. By the way, Primefaces uses a wrapper different for a field input.

I tried to add a return false both in the attribute event onkeydown how much in the onkeyup as per User Guide. Nothing done.

I even tried to add keyboard events by jQuery with preventDefault() and return false. Nothingness.

Well, before you download the source of Primefaces and start poking around, does anyone have any idea how to get around this situation?

---

Updating

More details about the component.

Opening the showcase page, clicked on the first component and left the SELECT open.

I pressed F12 to open the console and typed document.activeElement. The result was a input:

<input id="j_idt18:j_idt22_focus" name="j_idt18:j_idt22_focus" type="text" readonly="readonly">

I understand that this is the field that really gets the value and receives the events. It must have an Event Handler that selects the item when pressing a letter, but it certainly lacked a treatment for the case of special keys like CTRL and SHIFT.

Answer 1

I bypassed the problem by recovering a later version of the Primefaces library from the SVN repository. Some Javascript functions were fixed.

I extracted the fixed functions and added a Javascript file to overwrite the incorrect version with problems.

The code is:

/**
 * Fix for selectOneMenu when key is pressed along with CTRL
 */
PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({

    bindKeyEvents: function() {
        var $this = this;

        this.focusInput.on('keydown.ui-selectonemenu', function(e) {
            var keyCode = $.ui.keyCode,
            key = e.which;

            switch(key) {
                case keyCode.UP:
                case keyCode.LEFT:
                    $this.highlightPrev(e);
                break;

                case keyCode.DOWN:
                case keyCode.RIGHT:
                    $this.highlightNext(e);
                break;

                case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    $this.handleEnterKey(e);
                break;

                case keyCode.TAB:
                    $this.handleTabKey();
                break;

                case keyCode.ESCAPE:
                    $this.handleEscapeKey(e);
                break;
            }
        })
        .on('keyup.ui-selectonemenu', function(e) {
            var keyCode = $.ui.keyCode,
            key = e.which;
            switch(key) {
                case keyCode.UP:
                case keyCode.LEFT:
                case keyCode.DOWN:
                case keyCode.RIGHT:
                case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                case keyCode.TAB:
                case keyCode.ESCAPE:
                break;

                default:
                    var text = $(this).val(),
                    matchedOptions = null;

                    clearTimeout($this.searchTimer);

                    matchedOptions = $this.options.filter(function() {
                        return $(this).text().toLowerCase().indexOf(text.toLowerCase()) === 0;
                    });

                    if(matchedOptions.length) {
                        var highlightItem = $this.items.eq(matchedOptions.index());
                        if($this.panel.is(':hidden')) {
                            $this.selectItem(highlightItem);
                        }
                        else {
                            $this.highlightItem(highlightItem);
                            PrimeFaces.scrollInView($this.itemsWrapper, highlightItem);
                        }
                    }

                    $this.searchTimer = setTimeout(function(){
                        $this.focusInput.val('');
                    }, 1000);

                break;
            }
        });
    }
});