Wijimo Autocomplete dropdown becomes disabled, when user types the new values

Posted by: mdevi on 11 September 2017, 11:43 pm EST

  • Posted 11 September 2017, 11:43 pm EST

    We are using Wijimo autocomplete with Angular 4

    We have one staff ID autocomplete complete control, the users can type the staffID which is not in the [itemsSource] list.

    When the user type the StaffID which is not in the [itemsSource] list, the dropdown image becomes disabled.

    We have another requirement, whenever the user clicks on the dropdown symbol of autocomplete, the autocomplete should show the all the elements in [itemSource] list.

    <wj-auto-complete id=“staffidobj” name=“staffidobj” class=“multi_drop popup_input” #staffidobj

    autocomplete=“off”

    (keyup)=“autoCompleteStaffID($event)”

    formControlName=“StaffID”

    [displayMemberPath]=“‘label’”

    [selectedValuePath]=“‘label’”

    [isEditable]=“true”

    [minLength]=“1”

                                                                      [isReadOnly]="deleteUpsellFlag"
                                                                      (isDroppedDownChanged)="staffIDValid(addNewUpsellForm.value)"
                                                                      [itemsSource]="autoCompleteStaffIDList"
                                                                      (lostFocus)="staffid_lostFocus(staffidobj.text)"
                                                                      uc-combo-box
                                                                      [ngClass]="{'editfield_color':staffIDRevokeFlag==true}">
                                                    </wj-auto-complete>
    

    angular functions

    staffid_lostFocus(fieldName)

    {

    if (this.action.upsellEdit.event != 1) {

    if (fieldName.trim() == ‘’) {

    this.staffIDFlag = false;

    }

    else {

    this.staffIDFlag = true;

    }

    }

    this.StaffID.setValue(fieldName);
    

    }

    staffIDValid(addUpsell) {

    if (addUpsell.StaffID == “” || addUpsell.StaffID == null) {

    } else {

    if (this.editUpsellFlag == true || this.action.upsellEdit.event == ‘4’) {

    if (addUpsell.StaffID != this.action.upsellEdit.staffID) {

    this.staffIDRevokeFlag = true;

    } else {

    this.staffIDRevokeFlag = false;

    }

    }

    this.staffIDFlag = true;

    }

    }

  • Posted 13 September 2017, 6:20 am EST

    Hi Team,

    Can you please reply for this issue? or atleast suggest some alternate ways using any other wijimo control.
    
  • Posted 13 September 2017, 6:20 am EST

    Hi Team,

    Can you please reply for this issue? or atleast suggest some alternate ways using any other wijimo control.
    
  • Posted 13 September 2017, 7:42 am EST

    Hi,

    If you enter text in AutoComplete which is not present in itemsSource, it will be added in text and disable dropDown which you are observing which is by design.

    You can show dropDown list on button click by setting text to “”[Empty string] and set isDroppedDown property to true.

    Thanks,

    Manish Kumar Gupta

  • Posted 13 September 2017, 11:16 pm EST

    Hi Manish,

    Could you please give us code to implement the below
    
    You can show dropDown list on button click by setting text to ""[Empty string] and set isDroppedDown property to true. 
    
    We have found one property named  listBox.  will this property is helpful to show all the items during the click of dropdown.
    

    Regards,

    Devi

  • Posted 13 September 2017, 11:16 pm EST

    Hi Manish,

    Could you please give us code to implement the below
    
    You can show dropDown list on button click by setting text to ""[Empty string] and set isDroppedDown property to true. 
    
    We have found one property named  listBox.  will this property is helpful to show all the items during the click of dropdown.
    

    Regards,

    Devi

  • Posted 13 September 2017, 11:33 pm EST

    Hi Manish,

    In addition to this, when we initialize the autocomplete  value like the below during (edit form)
    
               this.StaffID.setValue('John')  
    

    (the value John exists in itemsource)

    When we click on the dropdown image, it is not showing the dropdown list sometimes.

    Even if it shows the dropdown, the scrollbar is not working properly.

  • Posted 14 September 2017, 1:59 pm EST

    bump

  • Posted 15 September 2017, 3:50 am EST

    Hi,

    Can anyone help on the above queries.

    Regards,

    Devi

  • Posted 15 September 2017, 3:50 am EST

    Hi,

    Can anyone help on the above queries.

    Regards,

    Devi

  • Posted 18 September 2017, 2:50 am EST

    Hi Devi,

    We are sorry for the delayed response.

    
    ac.hostElement.addEventListener("click",function(e){
    	if(ac.hostElement.querySelector(".wj-state-disabled")!==null){
    		ac.text="";
    		ac.isDroppedDown =true;
    	}
    });
    
    

    Regarding the dropDown not opening issue, we are unable to replicate the issue at our end. It would be helpful if you can provide demo sample or sample code for investigation. Please mention the build version, you are using in your project.

    Thanks,

    Manish Kumar Gupta

  • Posted 1 October 2017, 11:13 pm EST

    Hi Manish,

                Really thankful for you reply.   
    
                I have one more query.  Whenever i click the dropdown button of autocomplete, it should show all the items regardless of the typed value.  
    
                It is possible when we clear the text in wijimo autocomplete.
    
                Without clearing text, is that possible to show all items when the user clicks on dropdown button and filtered items when they type.
    

    Regards,

    Devi

  • Posted 1 October 2017, 11:14 pm EST

    Hi Manish,

          Since it is very crucial for one of our application developed using wijimo autocomplete, it would be great if you help on this issue.
    
  • Posted 4 October 2017, 4:32 am EST

    Hi Devi,

    We are sorry for the late reply.

    This is the design behavior for the control. You can use ComboBox as an alternative. This shows all items in dropDown but it does not show dropDown while typing text.

    Please refer to the demo sample for the same.

    http://demos.wijmo.com/5/angular2/InputIntro/InputIntro/

    Thanks,

    Manish Kumar Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels