TextArea Focus on leaving Modal

Ionic Framework ionic-v3
1

Hi, I read Mike’s article and thought that this would be easy to accomplish, but it seems only to work when you can actually set a function in your html that passes the #input variable into the Component controller code as a parameter. I want to set the focus to a text area immediately after the user closes a modal (dismiss event handler), but I found two issues in this scenario.

  1. Since this method isn’t called from the html, passing the parameter is not possible, so getting a reference to the actual TextArea is not possible. I tried using document.getElementById() which seems to get a reference to the actual ion-textarea element, but then…

  2. There seems to be no access (through Typescript) to the setFocus() method in the TextArea type, the error reported in the Chrome Developer Tools is that this method is private from the InputBase class. Then I tried setting the actual variable returned by getElementById() into type “any” and set the focus() method manually but it didn’t work, no error at all but then it did nothing.

How can I do a setFocus() to a Ion-TextArea element from the Modal dismiss() handler? This is a) Getting the reference to the textbox (if possibly a typed reference) and b) what type it has to be in order to use the setFocus() method? How can I make this work?

I really don’t think a plunkr is necessary for this question as it is very straightforward, but if you want me to create one so you can help to solve this, please let me know and I will gladly invest the time to create one.

Thanks for your help.

1 Like
2

It’s been 3 months. Did you managed to solve this?

I’m facing the same problem atm.

3

In our case, I realized that we needed another extra field to be used as “title” for the description on the textarea, so it was easy just to add an input before, then created the directive to activate the control and added just as a little extra, an attribute to the directive that would activate it when set to true, then on the onDidDismiss() event of the modal I changed the model variable that activates the directive and shows the device keyboard and voalá! it all worked, here is the code:

//--------------------------------------------------------------------------------------------------
// Imports Section:
//--------------------------------------------------------------------------------------------------
import { Directive, Input, Renderer, ElementRef } from '@angular/core';
import { Keyboard } from 'ionic-native';


//--------------------------------------------------------------------------------------------------
// Directive Declaration Section:
//--------------------------------------------------------------------------------------------------
@Directive({
    selector: '[focuser]'
})
//--------------------------------------------------------------------------------------------------
// Directive Class Section:
//--------------------------------------------------------------------------------------------------
export class Focuser
{
    //----------------------------------------------------------------------------------------------
    // Constructor Method Section:
    //----------------------------------------------------------------------------------------------
    constructor(private renderer:Renderer, private elementRef:ElementRef) {}

    //----------------------------------------------------------------------------------------------
    // Input Properties Section:
    //----------------------------------------------------------------------------------------------
    @Input() activate : boolean;

    //----------------------------------------------------------------------------------------------
    // Event Handler Methods Section:
    //----------------------------------------------------------------------------------------------
    ngOnChanges()
    {
        if (this.activate)
        {
            const element = this.elementRef.nativeElement.querySelector('input');
            setTimeout(() => {
                this.renderer.invokeElementMethod(element, 'focus', []);
            }, 0);
            Keyboard.show();
        }
    }
}

Adding this directive and setting the “activate” attribute to a model variable in your controller will allow you to activate the focusing and the keyboard without issues (at least it’s working for us as of beta 11).

I hope this help you to solve your issue :slight_smile:

– Will.

2 Likes
4

Thanks for this topic. I was able to fix this issue by just adding an ion-input to the modal and make it’s display property none. This resulted in the textarea not focusing.