Update for Angular

[Zefling]

Currently, I use you project for an Material application. If you are interest, when I will finish all my required points, I would push to you all my modifications.

The points are:

• Material style
• Form binding : FormControl / Error
• Keyboard navigation (with tab)
• Unicode search (supports accents)
• Change the search pattern on fly
• Options styling
• Hint message
• Position on top if no space on bottom (probably not necessary)

Example on Angular4:

<select2
    [(ngModel)]="value"
    [data]="data"
    formControlName="example"
    placeholder="Placeholder example"
    material
    [editPattern]="editPattern">
    <select2-hint>Message</select2-hint>
</select2>

Sorry, I test all my changes in my project, I can not compile your project on my computer.

[Zefling]

The project works on my computer with Linux. I resolve my last problem with the demo and I think that is good.

[ronzeidman]

for the last point you could depend on the native popper.js implementation:

import Popper from 'popper.js';

// this you can put when the view child is created
  @ViewChild('popperDropdown')
  set popperDropdown(popperDropdown: ElementRef) {
    if (!popperDropdown) {
      return;
    }
    this.popper = new Popper(this.popperBtn.nativeElement, popperDropdown.nativeElement, {
      placement: 'bottom-start',
      modifiers: {
        applyStyle: {
          fn: (data) => {
            this.setStyle(popperDropdown.nativeElement, data.styles);
            this.setAttributes(popperDropdown.nativeElement, (data as any).attributes);

            if (data.offsets.arrow) {
              this.setStyle(data.arrowElement, data.offsets.arrow);
            }

            return data;
          }
        }
      }
    });
    this.popper.scheduleUpdate();
  }

  private setStyle(element: any, styles: { [key: string]: any }) {
    Object
      .keys(styles)
      .forEach((key: keyof typeof styles) => {
        this.renderer.setStyle(
          element,
          key,
          ['width', 'height', 'top', 'right', 'bottom', 'left'].includes(key) && isNumeric(styles[key])
            ? styles[key] + 'px'
            : styles[key] + ''
        );
      });
  }

  private setAttributes(element: any, attributes: { [key: string]: any }) {
    Object
      .keys(attributes)
      .forEach((key: keyof typeof attributes) => {
        if (attributes[key] === false) {
          this.renderer.removeAttribute(element, key);
        } else {
          this.renderer.setAttribute(element, key, attributes[key]);
        }
      });
  }

this works for me in a lot of scenarios and depends on only a highly decorated and tested library

Anyway, I'm looking for a library like this and there are a lot of options but all have issues, this one has the least in my experience so, great work!

[Zefling]

@ronzeidman I probably try this in a next point.

At the moment my problem is the demo. I have a problem with the webpack configuration (probably), because the Angular injection not work... In my project, the injections are ok. I don't understand why the same code not work in this project.
For my the webpack configuration is little mysterious.

[ronzeidman]

@Zefling look into this: https://github.com/dherges/ng-packagr

[plantain-00]

@Zefling I just find out the angular injection not work, because "emitDecoratorMetadata": true not set in src/tsconfig.json and demo/tsconfig.json

[Zefling]

Sorry, I don't pass all the lint points when I use the angular style.

[plantain-00]

It's not only an angular project.
but don't worry, I will review and fix the lint in next few days.

[Zefling]

I found a problem with click on scrollbar. I write a correction. I have a solution without timer.
I will propose a new pull request for this.

[plantain-00]

The features in your PRs should be available in v3.1.0 release now.

[Zefling]

It's ok, except two points.

Why LESS change this:

calc(100% - 1.72917em) → calc(98.27083%);

And probably a test in code :

Remplace

var option = common.getOptionByValue(this.data, value);

by

var option = this.data ? common.getOptionByValue(this.data, value) : null;

[Zefling]

It's ok with 3.1.2 on my project. Thanks. 🙂

[Zefling]

I found a problem with mouseenter. This event create a lot of change in the DOM and block the clic event for a filter data in options of optgroups.