Tab key not working in inputs inside modal dialog (Angular app/PrimeNG)

user_7849203 0
Viewed 2588

I've created a component to display a simple modal dialog with dynamic inputs. This is an example of how it looks like:

Sample input dialog

Internally, it uses a PrimeNG dialog, and the input controls are created dynamically from an array received in a @Input property. This is the form I've created:

    <form novalidate [formGroup]="formModel">
      <ng-container *ngFor="let field of dialogData.formControls; let i=index">
        <!-- Input field -->
        <div *ngIf="field.type != 'hidden' && field.type != 'button' && field.type != 'separator'">
          <div class="ui-inputgroup">
            <span class="ui-float-label">              
              <!-- Input control -->
              <input *ngIf="field.type != 'textarea' && field.type != 'hidden'" pInputText
                [type]="field.type" [formControlName]="field.name" [name]="field.name"
                (keyup.enter)="checkDialog()" (keyup.esc)="cancelDialog()" [tabindex]="i">

              <textarea pInputTextarea *ngIf="field.type == 'textarea'" [formControlName]="field.name" [name]="field.name" rows="3" #inputField [tabindex]="i"></textarea>

              <label [for]="field.name">
                <i [ngClass]="field.icon"></i>
                &nbsp;
                {{ field.label }}
              </label>                
            </span>                        
          </div>
          <p class="fwc-error" [hidden]="formModel.get(field.name).valid || formModel.get(field.name).pristine">{{ 'ITEM_PANEL.ERRORS.FIELD_EMPTY' | translate }}</p>
        </div>

        <!-- Separator -->
        <div class="ui-g-12" *ngIf="field.type == 'separator'"></div>

        <!-- Hidden field -->
        <input *ngIf="field.type == 'hidden'" type="hidden" [formControlName]="field.name" [name]="field.name">
      </ng-container>
    </form>

It's working fine, but I've realized that, when opened from an existing dialog, like the example above, I can't move between controls with the TAB key. When I open the dialog straight from the main menu, for instance, I can use the TAB without any problem.

What could the cause?

Thanks!

primeng angular
1 Answers

Finally I could spend some time on this issue and found a working solution. Basically, I've used a custom directive on the dynamic inputs to get them later from the component with @ViewChildren. Then, I handle the keydown.tab event on this inputs to find the targeted element in the list of inputs with the directive and focus the next one.

Here is some code:

Component HTML template

<!-- appFocusable is a simple empty directive, just to 'anotate' the inputs -->
<!-- Also, note the 'id' field, that must be unique -->
<input appFocusable (keydown.tab)="focusNext($event)" id="{{ 'INPUT_'+i }}"/>

Component code


  // Get a list of the annotated inputs
  @ViewChildren(FocusableDirective) focusableInputs: QueryList<FocusableDirective>;

  [...]

  focusNext(event: KeyboardEvent) {
    if(event) {
      let elArray: ElementRef[] = [];

      let foundElIndex = -1;
      this.focusableInputs.forEach((focusableInput: any, index: number) => {
        if(focusableInput.el.nativeElement.id === (event.target as any).id)
          foundElIndex = index;

        elArray.push(focusableInput.el);
      });

      // foundElIndex will have the index of the input where TAB was pressed
      if(foundElIndex !== -1) {
        let nextElIndex = foundElIndex < elArray.length-1 ? foundElIndex+1 : 0;

        // Focus the next one (or the first, if we're on the last of the list)
        elArray[nextElIndex].nativeElement.focus();
      }

      event.stopPropagation();
      event.preventDefault();
    }
  }

Surely, it's not the most elegant solution, but now I can use the TAB key in all the modal dialogs.

Cheers!

user_78492030
Related