In certain scenario, Popup of the Multiselect component is not quite opened on the correct position. I did not check but this issue is probably reproducible for other dropdown components  (such as Combobox, DropdownList, etc) as well.

It seems to me this happens when:

1. A width greater than the widht of the input is set
2. AND input is too close to the bottom-right edge of the window and as a result popup cannot be shown below the input element but above it instead
   

THEN in the very first render, the popup is not position quite right and moves a bit in the next render.

Precise steps to reproduce problem:

1. Make sure to use minimal reproducible example attached below.
2. Click and hold left button of a mouse inside the MultiSelect Component.
3. The popup should open up and be positioned above the input but not being quite aligned right with the window nor the input.
4. Release the left button of a mouse.
5. The popup recalculates its position.
6. Problem: The popup should have been positioned correctly when opened (NOT after releasing mouse button).

Minimal reproducible example:

import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  KENDO_DROPDOWNS,
  PopupSettings,
} from '@progress/kendo-angular-dropdowns';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_DROPDOWNS, KENDO_LABELS, KENDO_INPUTS],
  styles: [
    `
      .app-layout {
        padding: 1rem;
        height: 800px;
        display: grid;
        grid-template-columns: 1fr 230px;
      }

      .sidebar {
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .unrelated-sidebar-content {
        height: 200px;
      }

      .box {
        border: 1px solid grey;
      }
    `,
  ],
  template: `
    <div class="app-layout">
      <main class="box"> Main Content </main>
      <aside class="box sidebar">
        <div class="box unrelated-sidebar-content">Imagine some other content here</div>
        <kendo-formfield showHints="always">
          <kendo-label text="Favorite sport:">
            <kendo-multiselect
              [data]="listItems"
              [(ngModel)]="value"
              [popupSettings]="popupSettings"
            ></kendo-multiselect>
          </kendo-label>
          <kendo-formhint
            >Add your favourite sport, if it is not in the
            list.</kendo-formhint
          >
        </kendo-formfield>
      </aside>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public listItems: Array<string> = [
    'Width Must Be Greater Than Width Of The Multiselect Component Because We Have Super Long Text',
    'When List Is Open, It Moves Slightly To The Right',
    'It Is Not Possible To Align Popup With The Right Edge',
    'It Is Not Possible To Set "anchorAlign" and "popupAlign"',
  ];
  public value: any = [];
  // @see https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning
  public popupSettings: PopupSettings = { width: 500 };
}

Alignment to the right

I believe, this could be simply solved if we were able to configure "anchorAlign" and "popupAlign" as described here: https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning  .

In addition, it would be a nice feature in general, to be able to align popup with the element's right edge. Currently, this is pretty much hard coded:

        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
        const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
        const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };
        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';

        this.popupRef = this.popupService.open({
            anchor: this.wrapper,
            anchorAlign: anchorPosition,
            animate: this.popupSettings.animate,
            appendTo: this.appendTo,
            content: this.popupTemplate,
            popupAlign: popupPosition,
            popupClass: this.listContainerClasses,
            positionMode: appendToComponent ? 'fixed' : 'absolute'
        });

From the code above, it is clear that the "horizontalAlign" cannot be really configured. In simple terms, you could use "left" alignment as a default intead of it being hard-coded like that; and prefer alignment specified in the "popupSettings".

Please, let me know if something needs to be further clarified.

Hi,

In Multiselect editor with open state prevented the component stops accepting mouse clicks as a way of moving cursor.

You can find repro here:  https://stackblitz.com/edit/angular-u1j1p5-grc1nk?file=src%2Fapp%2Fapp.component.ts

Just copy/paste or type some text and try to change cursor position in word/phrase in order to fix something inside provided word.

It would be nice to have an option for the MultiSelect that allows us to add new custom values on blur. An input property such as [resolveOnBlur] or something similar could be added.

The idea is to type any custom value inside the MultiSelect and on blur, to select that custom value as part of selection.

The following example demonstrates how the functionality could be achieved by manually handling the input event of the MultiSelect inner input element and updating the value of the MultiSelect on blur:

https://stackblitz.com/edit/angular-5o131f?file=src%2Fapp%2Fapp.component.ts

Hi,

Presently, there isn't a feature that permits the programmatic selection of a custom item. The only approach accessible is to utilize the "Enter" key for item selection. It would be appreciated if an option could be implemented to manually add typed custom items to the MultiSelect value.

https://stackblitz.com/edit/angular-ikoxq1-x3xnsf?file=src%2Fapp%2Fapp.component.ts

Hi, 

Optimize the internal selection mechanism to enhance overall performance and prevent browser hangs when a large number of items are selected. This enhancement will significantly improve the user experience and ensure smooth functionality within the application.

Example - https://stackblitz.com/edit/angular-83jvpr?file=src%2Fapp%2Fapp.component.ts

Currently, when the data of the MultiSelect is grouped, checkboxes are disabled.

You can still use MultiSelectTree instead, however, it doesn't look the same (mainly because its hierarchical and doesn't have group headers).

Hi Team

we were using Multiselect with version of dropdown "@progress/kendo-angular-dropdowns": "5.3.0",

 but now that we have updated the kendo dropdowns version "@progress/kendo-angular-dropdowns": "7.0.2"

CSS of our multiselect is messed up now can you suggest a way to keep our old CSS working as everything was coming from KendoDropdown

as now I can see <li> tag is converted to <div> for each item selected and there is a new class k-chip introduced .

This has been breaking our production please help us in going forward.

Hi,

When "popupSettings.appendTo" is set to 'component' then the value binding is broken and the "valueChange" event is not triggered.  It is not possible to select an item and the underlaying model is not updated.

Issue can be reproduced in this StackBlitz: https://stackblitz.com/edit/angular-f76kqf?file=src/app/app.component.ts

Regards

Holger

Hi,

We would like to use the MultiSelect-Control in combination with kendoDropDownFilter and autoClose set to false. 

Now when we start typing and hit enter to select a value the filtering text is not cleared and the control is a faulty state.

StackBlitz: https://stackblitz.com/edit/angular-rc2kef?file=src%2Fapp%2Fapp.component.ts

Currently, the MultiSelect component indicates an item is selected with a dedicated CSS class - k-selected. This CSS class styles the item so that the whole row in the MultiSelect popup appears selected.

However, if checkbox selection is enabled, the k-selected class no longer appears - the only indication that an item is selected, remains the checkbox.

This request calls for an option to have both types of indication available and independently configurable.

Providing data for an item's selected state for use in a custom template is also desirable.

is it possible to add aria-label to kendo-multiselect? ( and it should be multiselect responsibility to propagate it to internal input )

• My project requires that the multiselect control doesn't wrap to the next line.
• We'd like to make use of the summary tag so that line-wrapping does not occur.
• We also don't know what the width is going to be, so we can't accurately calculate how many tabs would be able to fit ( for using the existing tagMapper functionality)
• It would be nice if there was a setting to use the summary tag as soon as a linewrap is going to happen.

• So for example, instead of seeing this when we add too many items:

• We see this:

• but if the field ends up wider and therefore doesn't have to wrap, we see all the tags:

Currently, given a multiselect with some data and allowCustom = true, if the user types "sm" and hits Enter, the control finds the first item in data that starts with "sm" and automatically selects that.

Repro: https://stackblitz.com/edit/angular-buffxv?file=app/app.component.ts

1. Type "sm" in the MultiSelect and hit Enter
2. "Small" is automatically selected, valueNormalizer is not hit at all

Looking at the code for the MultiSelect, the auto selection seems to happen because of findIndex(text, startsFrom = 0); the offending line: text && itemText.startsWith(text);

Ideally, the MultiSelect should give me a hook to determine what item is selected. Maybe hit valueNormalizer on Enter

Whenever we type search text in MultiSelect Dropdown and focus out, the search text gets cleared.

Please provide an option for keeping the typed value in the MutliSelect input, without having to select anything from the dropdown.

Use the basic usage example from https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/

Click in the area next to the baseball chip.

The list with available objects pops up.

Click in the place where the cursor is, the popup won't close.

Click in the right half of the component, the popup closes.

It seems it's the input element which swallows the click event.

I would expect the popup to be closed, no mather where I click in the component

I would like to request sortability and drag/drop reordering for the MultiSelect component. 

The drag n drop action should be initiated from clicking and dragging an icon on the left on the left side of every tag template. Dragging the tag text itself should not start the drag n drop action. Attached is a screenshot of the appearance of our tokens; want the user to be able to click on the icon on the left to initiate a drag event.