# InputField not receiving focus

**URL:** <https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798>\
**Category:** Learn\
**Created:** [December 3, 2022, 2:19pm UTC](https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798 "2022-12-03T14:19:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [December 3, 2022, 2:19pm UTC](https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798/1 "2022-12-03T14:19:24Z")

</div>

I have a strange problem just cropped up where my input fields won’t receive focus when clicking them with the mouse.

I’m using ElmUI, but have also replaced the ElmUI fields with `Html.input` fields, and I get the same behaviour.

If I hover the mouse over the fields the mouse cursor changes to the vertical carat bar as would be expected.

If I add code to change styling on mouseOver, the styling changes as expected.

If I `Browser.Dom.setFocus`, then the fields receive focus, and will accept text typed by the user.

If I `Tab` between the fields, they receive focus, and will accept text typed by the user.

**But** the one thing they won’t do is receive focus when clicked on 🤷‍♂️

Has anyone come across this sort of problem before? Any ideas on where I start?

Many thanks

**Edit** : Once the field has been given focus with `setFocus`, clicking outside the field does not cause it to lose focus as would be expected.

**Edit** : This is an SPA that originally followed the elm-spa example with the `Model` as a `Type` that has branches for each page. I’ve just refactored it to use a flat model instead, and this is where this problem has arisen. So it appears that I’ve done something during the refactoring to cause this, but I don’t see what I could have done to prevent an `InputField` from receiving focus when clicked on - I couldn’t test until it was all wired up again, and I haven’t touched any of the view code.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [December 3, 2022, 3:14pm UTC](https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798/2 "2022-12-03T15:14:55Z")

</div>

Losing focus can happen if the virtual DOM overwrites an input with a new one.

I don’t know if this is your problem, but it springs to mind as an obvious candidate. Without seeing your code, its just a guess though.

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [December 3, 2022, 4:24pm UTC](https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798/3 "2022-12-03T16:24:24Z")

</div>

It wasn’t my exact problem, but put me on the right path.

I have an `Html.Events.Extra.Pointer.onMove` event that should fire once on app start up, but it was firing all the time the mouse pointer moved. Fixing this fixed my problem.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 13, 2022, 4:25pm UTC](https://discourse.elm-lang.org/t/inputfield-not-receiving-focus/8798/4 "2022-12-13T16:25:22Z")

</div>

Closed on December 13, 2022, 4:25pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.