A bug we've noticed in the product - if a user "enters" a message first, in my version of the control, then the email or select, the message is wiped out

[Peter]

This is the issue we're having:

STEP 1 - a USER mistakenly enters a message first

STEP 2 - a USER then enters an email or selects from list

RESULT: the message is removed.

Is this a bug or normal behavior?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Peter, 

Greetings from Syncfusion support.

We have checked your attached screenshot. We would like to know you that if you type any value in the Multiselect without selecting from the suggestion list, typed value will be cleared from Multiselect by default. With the provided information, we could not validate the issue. So kindly provide some more elaboration with following details help us to validate this issue further.

1. Code snippet of control rendering and also associated configured APIs and its Callbacks 

2. Video which demonstrates the issue 

3. A simple sample which replicates the issue, if possible.

The above details would help us to analyze the issue and provide you the better solution.

Regards, 

Jeyanth. 

[Peter]

The issue is NOT the email being hand typed or selected. That works fine. It's the optional message.

If you enter a message FIRST and "THEN" enter and/or select a user, the message disappears when you press enter for the users you want to invite.

As I write this, I believe I know what's causing it.

There's a placeholder... but I think when I click out to select a user, the value's being removed and placeholder put back.

Do you concur?

The optional message is not part of Multi-select and it's probably Angular Code.

[Peter]

Hello, another bug I found is this:

When you select or type a user and you want to REMOVE any of the users, say, you made a mistake, or you select the "X" to remove all users and start over and select or type another new user, the ones you "thought" you deleted come back.

If you click on a SINGLE user in the multi-select, you will see the user you're trying to delete/remove have a dark shadow over it and it doesn't delete.

Please help!

Here's the error I'm getting

DEFAULT TypeError: Cannot read property 'indexOf' of null

    at MultiSelectComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/multi-select/multi-select.js.MultiSelect.removeValue (multi-select.js:1513)

    at MultiSelectComponent.push../node_modules/@syncfusion/ej2-dropdowns/src/multi-select/multi-select.js.MultiSelect.onChipRemove (multi-select.js:1477)

    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

    at Object.onInvokeTask (core.js:3811)

    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

    at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

    at ZoneTask../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

    at invokeTask (zone.js:1744)

    at HTMLSpanElement.globalZoneAwareCallback (zone.js:1770)

Here's the issue:  Note the three people added

When I click on one to delete, this is what happens and I cannot delete it

This all of a sudden happens. Thoughts?

When adding NEW users

When I drop down the share section, with no one there, this is what I see;

How is it retaining when I click the "x" to delete ALL?

This is weird:

1 selected is not true!

This is my control:

AH HA!!!!!!

This call:

    // Check for the bug... TAB out causes UNDEFINED

    this.formObject.validate('listofemails');

  ngOnInit() {

    const options: FormValidatorModel = {

      rules: {

        'listofemails': {

          required: [true, '*Enter/Select an email address'],

          regex: ['^^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]$', '*Enter a valid email.'],

          minlegnth: 6

        }

      },

      customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {

        inputElement.parentElement.parentElement.appendChild(errorElement);

      }

    };

    this.formObject = new FormValidator('#form-element', options);

    console.log(`TODO: fixme by capturing subscription and tear down`);

    // TODO: added the following for integration branch, to get app-inst-id and active-section

    this.stateService.currentState$.subscribe((currentState: FormState) => {

      this._formState = currentState;

      this.currentState = currentState;

    });

  }

is producing this error:

DEFAULT TypeError: Cannot read property 'match' of undefined

    at FormValidator.push../node_modules/@syncfusion/ej2-inputs/src/form-validator/form-validator.js.FormValidator.getErrorMessage (form-validator.js:595)

    at FormValidator.push../node_modules/@syncfusion/ej2-inputs/src/form-validator/form-validator.js.FormValidator.validateRules (form-validator.js:515)

    at FormValidator.push../node_modules/@syncfusion/ej2-inputs/src/form-validator/form-validator.js.FormValidator.validate (form-validator.js:176)

    at SocialShareComponent.onChange (social-share.component.ts:125)

    at Object.handleEvent (social-share.component.html:42)

    at handleEvent (core.js:10251)

    at callWithDebugContext (core.js:11344)

    at Object.debugHandleEvent [as handleEvent] (core.js:11047)

    at dispatchEvent (core.js:7710)

    at core.js:9190

This is the problem:

There is ONLY 1 item in the array but you see "THREE" in the multi-select. I CANNOT delete any of them, yet, 

Selected item is removed []length: 0__proto__: Array(0)

social-share.component.ts:120 MultiSelect is:  null

So, if Multi-select is NULL when I clicked on My Name: Peter... how come the multi-select is NULL and the selected item removed is 0? Meaning, I did, in fact delete me, but it's a GHOST!

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Peter,

We have checked the attached screenshot. We could not reproduce the reported issue at our end. We have made a simple sample with Multiselect and Multiline textbox. Kindly share the below details to validate the issue further in our end.


 

1. Video which demonstrates the issue  

2. Code snippet of control rendering and also associated configured APIs and its Callbacks  

3. Replicate the issue in the attached sample or provide a simple sample which replicates the issue.

Sample Link: https://stackblitz.com/edit/angular-j6fdpn-z3shu9?file=app.component.ts

Regards, 

Jeyanth. 

[Peter]

Here's a link to my Google Drive

https://drive.google.com/drive/folders/1bH7FCc4dkXRAGtlzlfD6exZWjo5BT5rL?usp=sharing

Thanks,

Peter

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Peter,

Thanks for sharing the drive link. But unfortunately, we could not access the resource in that link due to permission restricted. We suggest you to share the file through our incident creation page.

Incident page Link: https://www.syncfusion.com/support/directtrac/incidents


 

 

Regards, 

Jeyanth.

 

[Peter]

Please try again or view Incident: 291211. Mehala tried the link and it works now. I changed permissions. This is CRITICAL, thank you for your continued support.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Peter,

Thanks for your update.

We suggest you to follow the incident which you have reported for further details.

Regards, 

Jeyanth.