FireFox - switching focus after hiding DIV?

Question

I have a contenteditable="true" div that has 2 child elements. When starting to edit the div, I want to hide the right element. This works correctly in CHROME/EDGE.

On FireFox, my issue is that if the user clicks the right DIV, instead of switching the cursor focus to the left DIV(Because the right DIV is now hidden), the focus stays on the left div. And basically the cursor is gone.

Any solution for this one?

window.onload = function() {
 $('.parent').on('click',function(evt) {
  $('.age').css('display','none');
 });
}

.parent{
 display:flex;
 flex-direction:row;
 font-size:18;
}

.name{
 margin-right:6px;
}

.age{
 border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" contenteditable="true">
<div class="name">On Chrome/EDGE, clicking the div with the red border will hide and switch the focus (cursor) to this div. In FireFox it does not work and our cursor/focus is lost.</div>
<div class="age">(Click on this div to see the problem)</div>
</div>

What?! That's not how it works...you should trigger the focus manually if you need it. What you say is browser dependent and you have to implement it yourself to make sure it will work crossbrowser — Ionut Necula, Feb 01 '18 at 14:33

score 0 · Accepted Answer · answered Feb 01 '18 at 14:34

0

$('.parent').on('click',function(evt) {
    $('.age').css('display','none');
    $('.name').focus(); // Trigger focus on the .name element
});

answered Feb 01 '18 at 14:34

Brainfeeder

2,604
2
19
37

Tried that, does not work. Can you test on your end? – David Somekh Feb 01 '18 at 15:25
Okay, now... because of the element `.name`is not an input or contenteditable element... the cursor wil not be placed between the tags. But it sure works. Add `.name:focus { background-color:red; } ` in CSS to check it out. – Brainfeeder Feb 01 '18 at 15:31
Is it an option to split `.age` and `.name` into two separate contenteditable elements? It would ease the effort to get it working, and would be more 'correct' semantically, I guess? – Brainfeeder Feb 01 '18 at 15:33
OK - focus wise, its working. But after focus the cursor is in the left side of the div. Any solution for that? – David Somekh Feb 01 '18 at 15:35
So the cursor is in the div, but before the text in the div? – Brainfeeder Feb 01 '18 at 16:02
Yes. You know how to move it to the end (right side) of the div? – David Somekh Feb 01 '18 at 16:12
That would be another question. [this answer](https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity) could help you out. – Brainfeeder Feb 01 '18 at 16:25

FireFox - switching focus after hiding DIV?

1 Answers1