1

I am using the ngx-select-ex component.

At my github I have added two instances of that component to test them: src/app/test/app.component.html

I would like to gain the focus of the second component when I press enter on the first one.

If the console is opened it will show 4 elements with 'form-control' class because each ngx-select-ex component contains 2 subcomponents with this style.

Inside the app.component.ts I capture the 'keydown' event:

@HostListener('component:keydown', ['$event'])
  keyEvent(event: KeyboardEvent) {
    console.log($('.form-control'));
    if (event.key === "Enter") {
   // do something stuff
    } else {
      console.log("else");
    }
  }

How could I gain the focus of the second ngx-select-ex when I press the 'Enter' key on the first one?

Best regards.

Konstantin Polyntsov
  • 133
  • 4
Abelardo León González
  • 123
  • 1
  • 3
  • 11

2 Answers2

1

@Abelardo, supouse that you have

<ngx-select ...(close)="nextInput.focus()">
<input #nextInput type="text">

See how we referred to the input using a template reference variable (#nextInput), and how using this in the "close" method. I haven't ngx, but must be work

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Sorry, I haven't seen this comment until now. :/ Inside the 'app.component.html' file I have included two instances of 'app-mytest' (which includes an only 'ngx-select-ex' component). An instance of 'app-mytest' has an ID="select1" and another one has ID="select2". I would like to gain the focus of the second instance of 'ngx-select-ex' (select2) when I press enter on the first instance (select1). You can download my repo. :) – Abelardo León González Apr 18 '18 at 16:18
  • And not work? I supouse you can use a template reference variable https://angular.io/guide/template-syntax#template-reference-variables--var- with anything – Eliseo Apr 18 '18 at 16:22
  • It doesn't work. Yes, I use a template reference variable in each instance of app-mytest: – Abelardo León González Apr 18 '18 at 16:30
  • In https://stackoverflow.com/questions/47951591/how-to-go-to-next-input-by-tapping-return-key-on-an-iphone-ipad-with-ionic2/49845232#49845232 I make a directive to make the ENTER focus the next field (I used for a cordova project, but the idea is the same) – Eliseo Apr 18 '18 at 16:32
  • It 'kind of' works for me with (close)="nextInput.focus()", but for some reason the page jumps. Actually, before I added this (close) handler, the page was jumping to the top, so this is much better, I just wish I could get it to not move after closing the ngx-select. Note: this works perfectly in Firefox, but has the jump in IE 11 only, but I have to support IE. – Wallace Howery May 25 '18 at 15:35
0

In you parent component: you should use @ViewChild to capture both components. (Alternative: use ViewChildren

so for instance:

<select #selectA .... >

@ViewChild('selectA') selectA: ElementRef;

When you handle the select events, you can check for the Enter:

keyEvent(event) {
  if(event.keyCode == 13) { // enter

  }

and when you handle the enter press event, you can set the wanted element's focus like this: selectA.nativeElement.focus()

Update: see my working example with simple imputs here.

html:

<p>input1: </p>
<input #input1 (keydown)="handleKeydown($event, 1)"/> 
<br/>
<p>Input2: </p>
<input #input2 (keydown)="handleKeydown($event, 2)"/>

ts:

 @ViewChild('input1') input1: ElementRef;
  @ViewChild('input2') input2: ElementRef;

  handleKeydown(event: KeyboardEvent, id) {
    console.log("Event:", event)
    if (event.key === "Enter") {
      console.log("Enter pressed, focusing...")
      if (id === 1) {
        this.input2.nativeElement.focus();
      }
      if (id === 2) {
        this.input1.nativeElement.focus();
      }
    }
ForestG
  • 17,538
  • 14
  • 52
  • 86
  • I tagged both components with '#select1" and "#select2" respectively. Inside the app.component.ts, I created two references to these components via @ViewChild and I captured the event.keyCode to manage the enter key but...it didn't work. I got this message: Cannot read property 'focus' of undefined. – Abelardo León González Apr 18 '18 at 10:41
  • I have created a basic stackblitz example, and updated my answer with it. Please check it, it does exaclty what you whist to do but with native html inputs, not select components. – ForestG Apr 18 '18 at 11:13
  • also, your error message indicates, that your object what you are calling .focus() is not defined: maybe you are referencing a wrong object, or it did not match any element in your DOM by the id. ( #someID must be referenced without the hashmark: @Input('someID'), etc.) – ForestG Apr 18 '18 at 11:15
  • Your stackblitz example didn't work for this component. Thanks anyway. – Abelardo León González Apr 18 '18 at 11:24
  • I think this component would have to be referenced as 'NgxSelectComponent' rather than 'ElementRef'. – Abelardo León González Apr 18 '18 at 11:26
  • Sorry, but without the exact code, can't help you more than that. Could you please provide a [minimal, complete and verifiable](https://stackoverflow.com/help/mcve) example of your problem? – ForestG Apr 18 '18 at 12:06
  • The code is at my Github: https://github.com/abelardolg/helloworld-select – Abelardo León González Apr 18 '18 at 13:09
  • your repo appears to be broken on a clean install. (ERROR in src/app/app.component.ts(5,20): error TS2307: Cannot find module 'jquery'.) – ForestG Apr 18 '18 at 13:50
  • It was fixed. I have forgotten to include "jquery": "^3.3.1" inside the package.json. Thanks for your report. :) – Abelardo León González Apr 18 '18 at 14:33