MultiAutoComplete selected item does't show HtmlContent

MultiAutoComplete selected item does't show HtmlContent

Posted by: diegomesata on 13 July 2018, 10:05 am EST

• 

  diegomesata

  • Post Options:
  • Link
    Copy

  Posted 13 July 2018, 10:05 am EST - Updated 3 October 2022, 11:27 am EST

  I have a MultiAutoComplete control, In the item list I want to show the user image and name, so I set isContentHtml = true, and I set the displayMemberPath to my custom html property, the item list looks good, but when I select an item, the selected item only shows the name, not the image.

  Searching in the souce code I comment the following line, and now selected item look good.

  
  // insert token into template
              MultiAutoComplete.prototype._insertToken = function (item) {
                  var tokenTxt = this._getItemText(item, true); // TFS 253890
                  if (this.isContentHtml) {
                      if (!this._cvt) {
                          this._cvt = document.createElement('div');
                      }
                      this._cvt.innerHTML = tokenTxt;
   		   //this line does the trick
                      //tokenTxt = this._cvt.textContent.trim();
                  }
                  else {
                      tokenTxt = wijmo.escapeHtml(tokenTxt);
                  }
                  this._wjTpl.insertBefore(this._createItem(tokenTxt), this._wjInput);
              };
  
  

  Why is this behavior by default? Why isn’t there and option like itemContentHtml=true?

  

  1410×308 30.8 KB

  

  1405×257 24.2 KB

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2018, 10:26 pm EST

  Hi,
  
  Thanks for taking time to debug the problem.

  We were able to replicate the issue at our end and it seems to be a bug. Hence the issue has been forwarded to the concerned team with internal tracking id 4249.

  Till then you may override the ‘_insertToken’ method as a workaround.
  
  //please refer to following code snippet

  wijmo.input.MultiAutoComplete.prototype._insertToken=function(item){
   
   
  let tokenTxt = this._getItemText(item, true);
   
   
  if (this.isContentHtml) {
   
   
  if (!this._cvt) {
  this._cvt = document.createElement('div');
  }
  this._cvt.innerHTML = tokenTxt;
  tokenTxt = this._cvt.outerHTML;
  } else {
  tokenTxt = escapeHtml(tokenTxt); 
  }
   
   
  this._wjTpl.insertBefore(this._createItem(tokenTxt), this._wjInput);
   
   
  }
  

  //you may also refer to following sample:-

  https://stackblitz.com/edit/js-p8v7gd?file=index.js

  Regards