1. Home
  2. Forum
  3. Angular - EJ 2
  4. Allow user to type on selected input filed in template of multiselect dropdown

Allow user to type on selected input filed in template of multiselect dropdown

Hello Team

In Angular multiselct checkbox module, I am trying to have an option where user can choose then

its input box is enabled and user can type his response.

Following is what we are trying to work on,

but when we click on input box in the template - we cannot enter any value into it as the focus shifts to multiselect filter box.

https://stackblitz.com/edit/angular-8q2osa?file=app.component.html


Hope we can make it working and use this awesome multiselect tool in checkbox mode.





11 Replies
PM Ponmani Murugaiyan Syncfusion Team December 6, 2021 07:10 PM UTC

Hi Mohit, 

Thanks for contacting Syncfusion support. 

Currently we are checking your reported query. We will update further details in 2 business days (December 8, 2021). We appreciate your patience until then. 

Regards, 
Ponmani M 


DR Deepak Ramakrishnan Syncfusion Team December 8, 2021 04:10 PM UTC

Hi Mohit, 
 
Thanks for your patience. 
 
We request you to use No records template to display the button in it and add the item using  ‘addItem’ method in the click event instead of using custom input text  . Kindly refer the below code and sample for your reference. 
 
 
[app.component.html] 
 
<div id="multiselect-sample" class="control-section"> 
  <div class="control-styles"> 
    <h4>Custom Values</h4> 
    <ejs-multiselect id="custom-list" #custom [dataSource]="gameList" [allowCustomValue]="true" [mode]="box" 
      (filtering)="onFiltering($event)" [placeholder]="waterMark" [fields]="fields"> 
      <ng-template #noRecordsTemplate> 
        <div id="nodata"> 
          No matched item, do you want to add it as new item in list? 
        </div> 
        <button (click)="addNewItem($event)" class="e-control e-btn"> 
          Add New Item 
        </button> 
      </ng-template> 
    </ejs-multiselect> 
  </div> 
</div> 
 
 
[app.component.ts] 
 
  public addNewItem = () => { 
    // get the typed characters 
    let customValue: string = ((this 
      .multiObj as any).filterParent.getElementsByClassName( 
      'e-input' 
    )[0] as HTMLInputElement).value; 
    // make new object based on typed characters 
    let newItem: { [key: string]: Object } = { 
      Game: customValue, 
      Id: customValue 
    }; 
    // new object added to data source. 
    (this.multiObj.dataSource as Object[]).push(newItem); 
    // pass new object to addItem method. 
    this.multiObj.addItem(newItem); 
    (this.multiObj as any).listData.push(newItem); 
  }; 
 
 
 
 
 
 
Thanks, 
Deepak R. 


RM Raj Maheshwari December 11, 2021 03:04 AM UTC

Thank you Deepak

we do not want new item to push to the list for various business reasons.

we want user to enter his value if its not one of the above listed

we are able to achieve this with template - i think only issue is its not allowing us to focus on it, can you please check and see how we can get focus on it.

Mohit.


BC Berly Christopher Syncfusion Team December 13, 2021 06:24 PM UTC

Hi Mohit, 
  
We can enter the characters into the textbox which is rendered through template feature with help of calling focus() method as mentioned in the below code example. Here, we have rendered the Syncfusion textbox component for better UI experience. 
  
  public OnOpen(args) { 
    args.popup.element.addEventListener('mousedown', (e) => { 
      if (e.target.parentElement.parentElement.id == 'footerElement') { 
        e.target.focus(); 
      } 
    }); 
  } 
 
  
  
Regards, 
Berly B.C 


RM Raj Maheshwari December 13, 2021 09:37 PM UTC

Hello Berly

Thank you for your response

Looks like on Mac Chrome its still showing same behavior and not working







Please see attached zip screen recording.



Attachment: 20211213_132930_cface53f.zip

BC Berly Christopher Syncfusion Team December 14, 2021 04:55 PM UTC

Hi Mohit Jagetia, 
  
We will check and update the details in two business days (16th December 2021). We appreciate your patience until then. 
  
Regards, 
Berly B.C 


BC Berly Christopher Syncfusion Team December 16, 2021 04:07 PM UTC

Hi Mohit Jagetia, 
  
We need two more days to validate the issue. So, we will update the details in two business days (20th December 2021). 
  
Regards, 
Berly B.C 


RM Raj Maheshwari December 17, 2021 12:48 AM UTC

Ok Thank you Berly,


BC Berly Christopher Syncfusion Team December 20, 2021 01:46 PM UTC

Hi Mohit Jagetia, 
  
We have resolved the reported issue by overriding the source method and unbind the blur event of the filter input inside MultiSelect popup. Kindly refer the below sample. 
  
  
Regards, 
Berly B.C 


RM Raj Maheshwari December 28, 2021 02:34 AM UTC

Hi Berly

Thank you -

Is it possible to highlight what changes need to be applied. We attempted to implement at our end but are not successful.

Also with this implementation, do we loose the two way binding of input field on template? or is ti possible to maintain the binding as the value of input will be very important to us.



Thank you
Mohit


BC Berly Christopher Syncfusion Team December 28, 2021 02:01 PM UTC

Hi Mohit, 
  
When we render the HTML 5 textbox component, ngModel does not updated on typing inside popup element. So, we suggest you to get the value form the textbox’s input event as mentioned below. 
  
args.popup.element.addEventListener('mousedown', (e) => { 
  if (e.target.id == 'footerElement') { 
    e.target.focus(); 
    e.target.addEventListener('input', (e) => { 
      console.log((event as any).data); 
    }); 
  } 
}); 
 
  
  
Regards, 
Berly B.C 


Loader.
Up arrow icon