How to get DOMElement to focus?

Phaser 3
1

Hi.

I am adding a chat feature to a game. The way this has been done is using a DOM element. The element displays and works great, and I have it set up so when you press the enter key the input box will show up.

However, one big issue is that it will not focus when the box pops up. I have done it in the following way:

// inside create()
this.messageUI = this.add.dom(40, 0).createFromCache('messageform').setOrigin(0,0);
this.messageUI.addListener('keydown');
this.messageUI.setVisible(false)
this.input.keyboard.on('keydown-ENTER',(event: any) => {
  this.showMessageForm()
})

// Other method
showMessageForm(){
    this.messageUI.setVisible(true)
    this.input.keyboard.enabled = false
    this.input.keyboard.disableGlobalCapture()
    let el = (<HTMLInputElement>document.getElementById('messagevalue'))
    el.focus() // TODO: This doesn't work for some reason
}

The HTML for the form looks like this, and note that I have tested the “getElementByID” code and it does appear to return the input element correctly, at least in the console:

<style>
    .msgform {
        width: 600px;
        text-align: left;
    }
</style>
<div class="msgform">
    <div class="input-group">
        <input type="text" style="width: 520px" class="form-control" id="messagevalue" name="messagevalue" tabindex="-1" placeholder="Message">
        <div class="input-group-append">
            <button type="submit" class="btn btn-primary" name="messagebutton">Send</button>
        </div>
    </div>
</div>

No matter what I try, it will not focus on the input box when I call the showMessageForm function. I am guessing this might be Phaser trying to hold control or something similar. Anyone have an idea what I’m doing wrong here?

2

Hi.
Did you manage to make it work?
I have the same problem.

Greg.

3

Hi.

Yes, I managed to (sort of) solve it. This reddit thread shows how it was done: https://www.reddit.com/r/phaser/comments/kp1uwo/how_to_get_domelement_to_focus/?utm_medium=android_app&utm_source=share

In short however, I made the focus happen on a 100ms timeout. Hope that helps!