Merge pull request #59 from hrynko/fix-focus

fix(lib): fixed focus with tabindex
angular-material-extensions · Mar 25, 2021 · 8ac4cae · 8ac4cae
2 parents d44f9c3 + cda8b14
commit 8ac4cae
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -166,6 +166,7 @@ Other modules in your application like for lazy loading import `MatSelectCountry
 | loading           | `Input()`  |        `boolean`         |                -                | Whether the component is loading                                                                   |
 | nullable          | `Input()`  |        `boolean`         |                -                | Whether the component is able to emit `null`                                                       |
 | readonly          | `Input()`  |        `boolean`         |                -                | Whether the component is read only                                                                 |
+| tabIndex          | `Input()`  |    `number | string`     |                -                | Whether the component can be focused, and where it participates in sequential keyboard navigation  |
 | showCallingCode   | `Input()`  |        `boolean`         |              false              | Whether the component to show the country's calling code in the label and selection                |
 | class             | `Input()`  |         `string`         |                -                | Class attribute apply style to input text or validation ignore (optional)                          |
 | onCountrySelected | `Output()` | `EventEmitter<Country>`  |                -                | emits the selected country as object (see the interface below)                                     |

diff --git a/...ects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html b/...ects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html
@@ -7,6 +7,7 @@
            [matAutocomplete]="this.countryAutocomplete"
            [placeholder]="this.placeHolder"
            [readonly]="this.readonly"
+           [tabIndex]="tabIndex"
            [value]="showCallingCode ? this.value?.callingCode : this.value?.name"
            [required]="this.required"
            [disabled]="this.disabled || this.loadingDB"

diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts
@@ -56,6 +56,7 @@ export class MatSelectCountryComponent
   @Input() disabled: boolean;
   @Input() nullable: boolean;
   @Input() readonly: boolean;
+  @Input() tabIndex: number | string;
   @Input() class: string;
   @Input() itemsLoadSize: number;
   @Input() loading: boolean;