Ionic 3 - Directive Not Working

Ionic Framework ionic-v3
1

I puted on my code a Directive of autofocus to the input, but it ins’t working.
The code:

// app.module.ts
import { Focuser } from "../components/focuser/focuser";
@NgModule({
  declarations: [
    Focuser,
...],..

//components/focuser/focuser.ts
import {Directive, Renderer, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
 
@Directive({
    selector: '[focuser]' // Attribute selector
})
export class Focuser {
    constructor(private renderer:Renderer, private elementRef:ElementRef, private keyboard: Keyboard) {
    }
    ngAfterViewInit() {
        const element = this.elementRef.nativeElement.querySelector('input');
        // we need to delay our call in order to work with ionic ...
        setTimeout(() => {
            this.renderer.invokeElementMethod(element, 'focus', []);
            this.keyboard.close();
        }, 0);
    }
}

//home.html
<input #input focuser type="text"/>
2

Hi friend!
move your file from

components/focuser/focuser.ts

to

directives/focuser/focuser.ts

then rebuild it. Good luck!

3

Same problem here. I did like you @HugoPetla .

And my directive is in ‘directives’ folder.

4

@HugoPetla,

Solved here.

Try:

export class Focuser { @input focuser; // code omitted }

1 Like
5

Not to be crude, but all this lacks the node firebase native component, aka:

//components/focuser/focuser.ts
import {Directive, Renderer, ElementRef, OnInit, ViewChild } from ‘@angular/core’;
import { Keyboard } from ‘@ionic-native/keyboard’;
import firebase from firebase

If you try to call it with no npm --save hence part of the problem (this plugin doesn’t need to be called in app.module.ts if well setup in app).

6

@yuricamara nice! Thx for your support!
I solved it before(Idk if it’s the right way), using on my ionViewDidEnter():

setTimeout(() => {
            document.getElementById('input').focus();
        }, 300);

and changed the html:

<input id="input" type="text"/>

But I will try your solution too. Thx again.

7

I implore people to never ever call setTimeout(). It is an invitation for difficult to reproduce, test, and fix bugs.

8

Hi All,

I am using Ionic, and have a ion-textarea i would like to auto size, i.e. expand as the user adds more text. I have found ionic2-autosize, which is a directive. However, I cannot seem to make this directive have any effect on my ion-textarea, i.e. it does not expand as the user adds more text.

I run:

npm install --save ionic2-autosize

package.json

"ionic2-autosize": "^1.1.1",

app.module.ts

import {Autosize} from 'ionic2-autosize';

@NgModule({
  declarations: [
    MyApp, Autosize
  ],
...

review.ts

<ion-textarea autosize [(ngModel)]="ratingModel.review" formControlName="review" id="review"></ion-textarea>

As you can see, I add the autosize attribute to the ion-textarea, but this has no effect, it behaves like a regular ion-textarea with only a height of 2 lines. I would expect the height to expand dynamically.

Any help appreciated.

More info:

global packages:

    @ionic/cli-utils : 1.1.2
    Cordova CLI      : 6.4.0 
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.0
    @ionic/cli-plugin-cordova       : 1.1.2
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v7.10.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.2 Build version 8E2002 
    ios-deploy : not installed
    ios-sim    : not installed
9

It’s looks like ionic2-autosize is not compatible with Ionc3 for now.

see:

10

I have used fz-elastic before with good results.

11

Thanks fz-elastic works for me.

12

Since I added fz-elastic, I am however experiencing some strange behaviour. This only happens on a device, and not in a browser.

I have a form with an ion-input and two ion-textarea’s. If I input a number of rows of data into a ion-textarea, and then scroll to the bottom of the page, where I have a submit button, it automatically scrolls back up to the ion-textarea, so that I cannot click the button.

I even remove focus from the ion-textarea by clicking on a ion-radio I have just above the button, but it still just scrolls after a few milliseconds back up to the ion-textarea.

Has anyone else experienced this? Any ideas?

Thanks