Multi select height issue after clearing values

[Eimantas Baigys]

Hello, I have this component:

<SfMultiSelect Mode="VisualMode.CheckBox" ShowSelectAll=true EnableCloseOnSelect=false @bind-Value=ValueList ShowClearButton=true FilterBarPlaceholder="@FilterBarPlaceholder" CssClass="@(Required == true ? $"mainlix-dropdown-list mainlix-required {CssClass}" : $"mainlix-dropdown-list {CssClass}" )" TValue="List<TValue>" TItem="DropdownItem<TValue>" Placeholder="@Label" Readonly="Readonly" DataSource="@DataSource" FloatLabelType="FloatLabelType.Always" EnablePersistence=true ItemTemplate="ItemTemplate" PopupWidth="auto" Query="Query" AllowFiltering=AllowFiltering FilterType="FilterType.Contains">

    <MultiSelectFieldSettings Text="Text" Value="Value"></MultiSelectFieldSettings>

    <MultiSelectEvents ValueRemoved="OnValueRemoved" OnValueSelect="OnValueSelect" TValue="List<TValue>" TItem="DropdownItem<TValue>" />

</SfMultiSelect>

this is what I see after initial component load

if I then press clear button I get following (component size increase):

it looks like "e-delim-values" is not hidden. If I then select some value I get this weird UI glitch where dropdown remains in its original position but the container size decrease

if I then press clear button I get expected behaviour

What is the ussue here?

I have some custom css for this component but i'm sure it has nothing to do with this:

.e-multi-select-wrapper {

    padding-top: 14px !important;

    padding-bottom: 5px;

    padding-left: 5px;

    input {

        &.e-multiselect {

            padding: 0;

            margin: 0;

            height: 20px;

        }

    }

    .e-chips {

        padding: 3px 4px 3px 8px;

        height: auto;

        .e-chipcontent {

            white-space: break-spaces;

        }

    }

}

[Kokila Poovendran]

Hi Eimantas Baigys,

Greetings from Syncfusion Support!

Thank you for bringing this issue to our attention. We understand that you're experiencing an issue with the MultiSelect component's behavior related to its height after clearing values. We're here to help you with this matter.

Based on the information you've provided and the custom CSS you've mentioned, it seems like there might be some CSS conflicts or styling issues causing the unexpected behavior. To assist you further and provide an accurate solution, we kindly request that you share the complete runnable code for your MultiSelect component.

By having the complete code and context, we will be able to identify the specific CSS conflicts or styling issues and provide you with a solution that addresses your concern effectively.

Please provide the complete code or a minimal runnable example that reproduces the issue so that we can better understand and resolve it. This will enable us to assist you in a more precise manner.

Regards,

Kokila Poovendran.

[Chris Morison]

I've been able to reproduce this issue from your example templates here: https://stackblitz.com/edit/angular-qgybjt?file=src%2Fapp.component.html

Edit: Note that I'm using Angular, not Blaze, but it looks like this is the same issue...

With one item selected, height is OK:

When the last item removed, height is incorrect because this element is not hidden:

This only happens when you use the (selected)​ and (removed​) events to update the bound [value]​, so that (a) you can set the initial value, and (b) you can respond to the selection change immediately without having to wait for the menu to close:

[Kokila Poovendran]

Hi Eimantas Baigys,

After thorough investigation, we have identified a potential solution for the issue you are experiencing. We have prepared a sample for you, which you can find in the code snippet below:

      <ejs-multiselect

        id="multiselect-checkbox"

        [value]="values"

        #checkbox

        [dataSource]="countries"

        [placeholder]="checkWaterMark"

        [fields]="checkFields"

        [allowFiltering]="false"

        [changeOnBlur]="false"

        mode="CheckBox"

        [popupHeight]="popHeight"

        [showDropDownIcon]="true"

        showSelectAll="true"

        (change)="onChangeHanlder($event)"

      ></ejs-multiselect>

  public onChangeHanlder(args: any): void {

    this.values = args.value;

  }

 

 

Sample: https://stackblitz.com/edit/angular-qgybjt-8mk3s3?file=src%2Fapp.component.html,src%2Fapp.component.ts

In the provided StackBlitz sample, we've set the "changeOnBlur" event to "false." By doing so, the change event will trigger for each value select, and we have also used the change event instead of the select event.

Please incorporate these changes into your implementation, and let us know if you encounter any further issues. We are here to assist you throughout the process.

API: https://ej2.syncfusion.com/documentation/api/multi-select/#changeonblur

Regards,

Kokila Poovendran.

[Chris Morison]

@Kokila, thank you for your response.

Your solution does help, a bit, but I have another complicating factor which still causes the same bug.

In my application, when the selection is changed I am storing the values on the route query params, so that if the user navaigates forward and then backwards, the same values are selected:

  public onChangeHanlder(args: any): void {

    this.values = args.value;

    this.router.navigate([], {

      queryParams: { countries: args.value.join(',') },

      queryParamsHandling: 'merge',

      replaceUrl: true,

    });

  }

Also, my page has to respond to external actions causing the route params to change:

  constructor(

    public router: Router,

    public activatedRoute: ActivatedRoute,

  ) {

    this.activatedRoute.queryParams.subscribe((params) => {

      console.log('new params', params);

      this.values = (params.countries || '').split(',');

    });

  }

It seems that any external change to "this.values" to an empty array causes the same bug.  e.g. when you de-select Australia:

Here's a demo of this bug: https://stackblitz.com/edit/angular-qgybjt-epf1xz?file=src%2Fapp.component.ts

My only solution is to have two sets of values "this.values" and "this.initialValues" - then I update "this.values" when the selection changes (and use that to query fresh data from an API), but I only set "this.initialValues" on initial page load, and pass that to the multi-select [value]:

Here's a demo of my fix: https://stackblitz.com/edit/angular-qgybjt-pn7vex?file=src%2Fapp.component.html

It would be nice if I didn't need this hack.

[Kokila Poovendran]

Hi Eimantas Baigys,

Thank you for your detailed explanation and the provided solutions. We appreciate your efforts in finding a workaround for the issue you encountered with the route params and the bug related to the external changes causing the same problem.

Your suggestion to have two sets of values, this.values and this.initialValues, seems like a viable workaround to address the issue. We understand that having a separate set for initial values helps in managing the state and preventing unwanted behavior when external changes occur.

If you have any further questions, encounter additional issues, or if there's anything else we can assist you with, please feel free to reach out. We are here to help.

Thank you for your patience and cooperation.

Regards,

Kokila Poovendran.