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.

Currently keyboard navigation in Multiselect is a bit limited in comparison to the same functionality in Multiselect in Kendo UI for jQuery. 

It would be great if the shortcuts in Multiselect in Kendo for Angular matched shortcuts in Multiselect in Kendo UI for jQuery.

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

On the DropDownList Grouping page and the MultiSelect Groping page, the first label (Meat) does not show in IE 11.