# How to get DOMElement to focus?

**URL:** <https://phaser.discourse.group/t/how-to-get-domelement-to-focus/8541>\
**Category:** Phaser 3\
**Created:** [January 4, 2021, 9:16am UTC](https://phaser.discourse.group/t/how-to-get-domelement-to-focus/8541 "2021-01-04T09:16:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Is0tope](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/is0tope/32/4589_2.png) [@Is0tope](https://phaser.discourse.group/u/Is0tope)\
**Post date:** [January 4, 2021, 9:16am UTC](https://phaser.discourse.group/t/how-to-get-domelement-to-focus/8541/1 "2021-01-04T09:16:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![drunkcat](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/drunkcat/32/4466_2.png) [@drunkcat](https://phaser.discourse.group/u/drunkcat)\
**Post date:** [July 14, 2021, 9:56am UTC](https://phaser.discourse.group/t/how-to-get-domelement-to-focus/8541/2 "2021-07-14T09:56:12Z")

</div>

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

Greg.

---

<div class="post-metadata">

**Author:** ![Is0tope](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/is0tope/32/4589_2.png) [@Is0tope](https://phaser.discourse.group/u/Is0tope)\
**Post date:** [July 14, 2021, 11:52am UTC](https://phaser.discourse.group/t/how-to-get-domelement-to-focus/8541/3 "2021-07-14T11:52:04Z")

</div>

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](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!