How to use autoSuggestBehavior with copy and paste using mouse

Question

I am implementing a feature which is using autoSuggestBehavior and it works fine when the user input by using keyboard either input by using Ctrl C, Ctrl V

But it doesn't work when the user use the mouse the copy and paste.

The current code is

    <af:inputText id="it1" placeholder="#{viewcontrollerBundle['employees.QuickSearch.tooltip']}" autoSubmit="true"
              valueChangeListener="#{pageFlowScope.employeeQuickSearchBean.onChangeSearchCriteria}"
              binding="#{requestScope.quickSearchInputText}" styleClass="QuickSearchTextBox" maximumLength="100">
        <af:autoSuggestBehavior suggestItems="#{pageFlowScope.employeeQuickSearchBean.getSuggestItems}"/>            
        <af:clientListener method="onQuickSearchFocus" type="focus"/>
        <af:clientListener method="onQuickSearchBlur" type="blur"/>
        <af:clientListener method="onQuickSearchValueChange" type="valueChange"/>
   </af:inputText>

Try No.1

I tried to create <af:clientListener> to trigger <af:serverListener>

    <af:inputText id="it1" placeholder="#{viewcontrollerBundle['employees.QuickSearch.tooltip']}" autoSubmit="true"
              valueChangeListener="#{pageFlowScope.employeeQuickSearchBean.onChangeSearchCriteria}"
              binding="#{requestScope.quickSearchInputText}" styleClass="QuickSearchTextBox" maximumLength="100">
        <af:autoSuggestBehavior suggestItems="#{pageFlowScope.employeeQuickSearchBean.getSuggestItems}"/>
        <af:clientListener method="invokeQuickSearchAutoSuggestion" type="mouseDown"/>
        <af:serverListener type="invokeQuickSearchAutoSuggestionFromBean" method="#{pageFlowScope.employeeQuickSearchBean.getSuggestItems}"/>
        <af:clientListener method="onQuickSearchFocus" type="focus"/>
        <af:clientListener method="onQuickSearchBlur" type="blur"/>
        <af:clientListener method="onQuickSearchValueChange" type="valueChange"/>
   </af:inputText>  

in javascript, I define the method like this

function invokeQuickSearchAutoSuggestion(event){
   console.log('call here');
   var inputTextComponent = event.getSource();   
   AdfCustomEvent.queue(inputTextComponent, "invokeQuickSearchAutoSuggestionFromBean",{fvalue:component.getSubmittedValue()}, false);
   event.cancel();
}

in there, I just add a log to print to check if we can get the right click, copy and paste event but it doesn't work.

Try No.2

I added a log to valueChangeListener="#{pageFlowScope.employeeQuickSearchBean.onChangeSearchCriteria}" and it also doesn't get that event.

I found that the reason could be when I right click and choose the Paste option, the mouse is already out of the input component, which make these code doesn't work.

Can someone give me a solution, please?

Answer 1

I got the answer from a friend of mine which is working well and I would like to share.

Basically, ADF doesn't support this and we need to override _fireMouseIn

if (this.constructor._typeName == "AdfAutoSuggestBehavior") {
this._fireMouseIn = function (componentEvent) {

    var component = componentEvent.getSource();
    if (component && component instanceof AdfUIEditableValue) {
        var target = componentEvent.getNativeEventTarget();
        var value = target.getAttribute(AdfAutoSuggestBehavior._ITEM_VALUE_ATTR);
        if (value && value.length > 0) {
            var allItems = AdfDomUtils.getChildElements(target.parentNode);
            for (var j = 0;j < allItems.length;j++) {
                var item = allItems[j];
                this._updateSelectedStyle(item, false)
            }
            this._updateSelectedStyle(target, true)
        }

        //Customize from here
        if (component.registedAutoSuggest) {
            return;
        }
        component.registedAutoSuggest = true;

        var contentNode = AdfDhtmlEditableValuePeer.GetContentNode(component);
        var that = this;
        contentNode.addEventListener('paste', function (event) {
            var page = AdfPage.PAGE;
            if (that._timerId) {
                page.rescheduleTimer(that._timerId, 500)
            }
            else {
                that._timerId = page.scheduleTimer(that, that._autoSuggest, component, 500)
            }
        });
    }

};
}