Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Autocomplete Japanese input support for Chrome on Mac - 12.3 #12341

Merged
merged 7 commits into from Nov 21, 2022
Merged

Autocomplete Japanese input support for Chrome on Mac - 12.3 #12341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
803144d
fix(autocomplete): Adding compositionstart and compositionend.
valadzhov Nov 11, 2022
3b3e3bc
feat(autocomplete): Adding rewriting eventstart and end.
valadzhov Nov 16, 2022
e835fa9
chore(autocomplete): Clean up the code.
valadzhov Nov 16, 2022
577b775
chore(autocomplete): Adding a simple test.
valadzhov Nov 17, 2022
879aa20
chore(autocomplete): Updating the test.
valadzhov Nov 17, 2022
509c421
chore(autocomplete): Fixing the failing test.
valadzhov Nov 18, 2022
fb780ef
fix(autocomplete): Fix missing semicolon.
valadzhov Nov 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
View file
Open in desktop
Expand Up @@ -781,6 +781,15 @@ describe('IgxAutocomplete', () => {
fixture.detectChanges();
expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('false');
}));
it('Should accept Japanese input', fakeAsync(() => {
UIInteractions.setInputElementValue(input, '東京', fixture);
fixture.detectChanges();
tick();
UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
fixture.detectChanges();
expect(input.value).toBe('東京');
}
));
});
describe('Positioning settings tests', () => {
it('Panel settings - direction and startPoint: top', fakeAsync(() => {
Expand Down
17 changes: 16 additions & 1 deletion projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
View file
Open in desktop
Expand Up @@ -211,6 +211,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
return 'list';
}

protected _composing: boolean;
protected id: string;
protected get model() {
return this.ngModel || this.formControl;
Expand All @@ -234,6 +235,20 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
this.open();
}

/** @hidden @internal */
@HostListener('compositionstart')
public onCompositionStart(): void {
if (!this._composing) {
this._composing = true;
}
}

/** @hidden @internal */
@HostListener('compositionend')
public onCompositionEnd(): void {
this._composing = false;
}

/** @hidden @internal */
@HostListener('keydown.ArrowDown', ['$event'])
@HostListener('keydown.Alt.ArrowDown', ['$event'])
Expand All @@ -253,7 +268,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective

/** @hidden @internal */
public handleKeyDown(event) {
if (!this.collapsed) {
if (!this.collapsed && !this._composing) {
switch (event.key.toLowerCase()) {
case 'space':
case 'spacebar':
Expand Down