Skip to content

Commit

Permalink
Fix autocreate with single option
Browse files Browse the repository at this point in the history 
- add ChangeDetectionStrategy.OnPush
- fix minor bugs
- fix examples
  • Loading branch information
@Zefling
Zefling committed Dec 9, 2024
1 parent 693d950 commit f6b230d
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 23 deletions.
2 changes: 1 addition & 1 deletion projects/ng-select2-component/src/lib/select2-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,4 +306,4 @@ export class Select2Utils {
}
return str;
}
}
}
8 changes: 4 additions & 4 deletions projects/ng-select2-component/src/lib/select2.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@
@if (selectionOverride()) {
<span class="select2-selection__override" [innerHTML]="_selectionOverrideLabel()"></span>

@if (resettable() && resetSelectedValue() !== value() && select2Option && !(disabled() || readonly())) {
@if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
@if (
!multiple() && resettable() && resetSelectedValue() !== value() && select2Option && !(disabled || readonly())
!multiple() && resettable() && resetSelectedValue() !== _value && select2Option && !(disabled || readonly())
) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
Expand All @@ -61,7 +61,7 @@
}}</span>
</span>

@if (resettable() && resetSelectedValue() !== value() && select2Option && !(disabled() || readonly())) {
@if (resettable() && resetSelectedValue() !== _value && select2Option && !(disabled() || readonly())) {
<span (click)="reset($event)" class="select2-selection__reset" role="presentation">×</span>
}
<span class="select2-selection__arrow" role="presentation"> </span>
Expand All @@ -81,7 +81,7 @@
tabindex="0"
(keydown.enter)="removeSelection($event, op)"
>
@if (!(disabled || readonly())) {
@if (!(disabled() || readonly())) {
<span
(click)="removeSelection($event, op)"
class="select2-selection__choice__remove"
Expand Down
30 changes: 19 additions & 11 deletions projects/ng-select2-component/src/lib/select2.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { ElementRef, OnDestroy } from '@angular/core';
import {
AfterViewInit,
Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DoCheck,
Expand Down Expand Up @@ -62,6 +63,7 @@ const displaySearchStatusList = ['default', 'hidden', 'always'];
'[id]': '_id',
'[class.select2-selection-nowrap]': 'selectionNoWrap()',
},
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterViewInit, OnDestroy {
// ----------------------- signal-input
Expand Down Expand Up @@ -291,14 +293,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView

private _data: Select2Data = [];

protected get _id(): string {
get _id(): string {
return this.id() || this._uid;
}

private _disabled = false;

private _uid = `select2-${nextUniqueId++}`;
private _value: Select2UpdateValue | null = null;
protected _value: Select2UpdateValue | null = null;
private _previousNativeValue: Select2UpdateValue | undefined;
private _overlayPosition: VerticalConnectionPos | undefined;
private toObservable = new Subscription();
Expand Down Expand Up @@ -343,9 +345,9 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
toObservable(this.value).subscribe(value => {
if (this.testValueChange(this._value, value)) {
if (this._value === undefined) {
this._value = value ?? null;
this._value = value;
}
this.writeValue(value ?? null);
this.writeValue(value);
}
}),
);
Expand Down Expand Up @@ -391,14 +393,14 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView

const option = Select2Utils.getOptionsByValue(
this._data,
this._control ? this._control.value : this.value,
this._control ? this._control.value : this.value(),
this.multiple(),
);
if (option !== null) {
this.selectedOption = option ?? null;
}
if (!Array.isArray(option)) {
this.hoveringValue = this.value() as string | undefined;
this.hoveringValue = this.value();
}
this.updateSearchBox();
}
Expand Down Expand Up @@ -451,8 +453,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}

hideSearch(): boolean {
if (this.autoCreate() && !this.multiple()) {
return false;
}
const displaySearchStatus =
displaySearchStatusList.indexOf(this.displaySearchStatus() || 'default') > -1
this.displaySearchStatus() && displaySearchStatusList.indexOf(this.displaySearchStatus()!) > -1
? this.displaySearchStatus()
: 'default';
return (displaySearchStatus === 'default' && this.isSearchboxHidden) || displaySearchStatus === 'hidden';
Expand Down Expand Up @@ -834,7 +839,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}
value = this.selectedOption.value;
if (!option && this._value === null) {
this._value = value ?? null;
this._value = value;
}
}
} else {
Expand All @@ -856,11 +861,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
}

if (emit) {
this._value = value ?? null;
this.writeValue(value);
setTimeout(() => {
this.update.emit({
component: this,
value: this._value,
value: value,
options: Array.isArray(this.selectedOption)
? this.selectedOption
: this.selectedOption
Expand Down Expand Up @@ -1078,8 +1083,11 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView
const value = (e.target as HTMLInputElement).value;
if (value.trim()) {
(e.target as HTMLInputElement).value = '';
this.searchText = '';
const item = this.addItem(value.trim());
this.click(item);
this.updateFilteredData();

this.autoCreateItem.emit({
value: item,
component: this,
Expand Down Expand Up @@ -1210,7 +1218,7 @@ export class Select2 implements ControlValueAccessor, OnInit, DoCheck, AfterView

/** Does some manual dirty checking on the native input `value` property. */
private _dirtyCheckNativeValue() {
const newValue = this.value;
const newValue = this.value();

if (this._previousNativeValue !== newValue) {
this._previousNativeValue = newValue;
Expand Down
10 changes: 5 additions & 5 deletions src/app/app-examples.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ <h3 id="ex-32">32. auto create when / resettable ({{ value32 }})</h3>
autoCreate
resetSelectedValue="CA"
id="selec2-32"
(autoCreateItem)="update('value32', $event)"
(autoCreateItem)="autoCreateItem('value32', $event)"
(update)="update('value32', $event)"
></select2>

Expand All @@ -446,7 +446,7 @@ <h3 id="ex-34">34. grid ({{ value34 }})</h3>
[value]="value34"
id="selec2-34"
grid="4"
(autoCreateItem)="update('value34', $event)"
(autoCreateItem)="autoCreateItem('value34', $event)"
(update)="update('value34', $event)"
></select2>

Expand All @@ -457,7 +457,7 @@ <h3 id="ex-34b">34b. grid sub-group ({{ value34b }})</h3>
[value]="value34b"
grid="4"
id="selec2-34b"
(autoCreateItem)="update('value34b', $event)"
(autoCreateItem)="autoCreateItem('value34b', $event)"
(update)="update('value34b', $event)"
></select2>

Expand All @@ -468,7 +468,7 @@ <h3 id="ex-35">35. grid-auto ({{ value35 }})</h3>
[value]="value35"
id="selec2-35"
grid="35px"
(autoCreateItem)="update('value35', $event)"
(autoCreateItem)="autoCreateItem('value35', $event)"
(update)="update('value35', $event)"
></select2>

Expand All @@ -480,7 +480,7 @@ <h3 id="ex-35b">35b. grid-auto sub-group + multiple ({{ value35b | json }})</h3>
multiple
id="selec2-35b"
grid="35px"
(autoCreateItem)="update('value35b', $event)"
(autoCreateItem)="autoCreateItem('value35b', $event)"
(update)="update('value35b', $event)"
></select2>

Expand Down
8 changes: 6 additions & 2 deletions src/app/app-examples.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormContro



import { Select2Data, Select2ScrollEvent, Select2SearchEvent, Select2SelectionOverride, Select2UpdateEvent } from 'projects/ng-select2-component/src/public_api';
import { Select2AutoCreateEvent, Select2Data, Select2ScrollEvent, Select2SearchEvent, Select2SelectionOverride, Select2UpdateEvent, Select2UpdateValue } from 'projects/ng-select2-component/src/public_api';



Expand Down Expand Up @@ -224,10 +224,14 @@ export class AppExamplesComponent {
}

update(key: string, event: Select2UpdateEvent<any>) {
console.log('update', event.component.id, event.value);
console.log('update', key, event.component._id, event.value);
(this as any)[key] = event.value;
}

autoCreateItem(key: string, event: Select2AutoCreateEvent<Select2UpdateValue>) {
console.log('autoCreateItem', key, event.component._id, event.value);
}

resetForm() {
this.fg.reset(this.formData());
}
Expand Down

0 comments on commit f6b230d

Please sign in to comment.