This just has to do with the way an empty `ContentEditable` area is rendered.  To prove it's not about the focus, add some text to your editable div, and then delete it.  When the last character is gone, the cursor will disappear

From the question [Setting the caret position to an empty node inside a contentEditable element][SO1]

>The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.
>
>It almost works if you set each span to `display: block`, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.

---

You could also try adding a zero-width character like `&#8203;`



    document.getElementById('myspan').focus();



    #myspan {
        border: 0;
        outline: 0;
    }



    <span id="myspan" contenteditable="true">&#8203;</span>



[SO1]: https://stackoverflow.com/q/4063144/1366033

When you open this page (see [Live demo][1]) with Chrome :
 
    <span id="myspan" contenteditable=true></span>

CSS : 

    #myspan { border: 0; outline: 0;}

JS :

    $(myspan).focus();

the `contenteditable` `span` has focus (you can start to write things and you will see that it already had focus), but we don't see the "`I`" edit cursor.

**How to make that this cursor is displayed ?** (Remark : `outline:0` is needed, as well as the fact that the span is empty even with no white space).

*Note : With Firefox, the cursor is displayed.*


  [1]: http://jsfiddle.net/gs3p1a6r/3/show/

Edit cursor not displayed on Chrome in contenteditable

As far as I'm aware, there is no standard to apply a [`<datalist>`][1] to random elements with the [`[contenteditable]`][2] attribute, or anything other than a input with the [`[list]`][3] attribute.  At best, you'd be beholden to how individual browsers choose to implement that spec.

Obviously, the best medicine is to convert to semantically correct html, but just adding that note for future visitors to do if possible, since that's not your use case.

A possible workaround is to spin up an `input` element during the `focusin` event, match the styling of the surrounding span, allow the native browser events to fire, and apply the updated value when the input loses focus.

Here's how that would look in JavaScript:

```js
document.addEventListener('focusin', function (event) {
	if (event.target.matches('[contenteditable]')) {
        var editable = event.target
        
        // get text
        var text = editable.innerText

        // create input
        var input = document.createElement("input");
        input.type = "text";
        input.className = "editable-mirror";
        input.setAttribute("list", "browsers");
        input.value = text;

        editable.appendChild(input);

		input.focus()
	}
});
document.addEventListener('focusout', function (event) {
    if (event.target.matches('.editable-mirror')) {
        var input = event.target
        var editable = input.closest("[contenteditable]")

        // get text
        var text = input.value;

        // destroy input
        input.parentNode.removeChild(input);

        // apply value
        editable.innerText = text;
    }
});
```

And some starter styles (although Your Mileage May Vary)

```css
[contenteditable] {
  position: relative;
  border: 1px solid silver;
  padding: 2px 5px;
  display: inline-block;
}

.editable-mirror {
    position: absolute;
    left: -1px;
    top: -1px;
    height: calc(100% + 2px);
    width: calc(100% + 7px);
    padding: 2px 5px;
    margin: 0;
    border: 0;
}
```

### Here's a working demo in Stack Snippets & [JSFiddle][4]





    document.addEventListener('focusin', function (event) {
    	if (event.target.matches('[contenteditable]')) {
            console.log('focused')

            var editable = event.target

            // enter edit mode
            editable.classList.add("editing")
            
            // get text
            var text = editable.innerText

            // create input
            var input = document.createElement("input");
            input.type = "text";
            input.className = "editable-mirror";
            input.setAttribute("list", "browsers");
            input.value = text;

            editable.appendChild(input);

            input.focus()
            
    	}
    }, false);
    document.addEventListener('focusout', function (event) {
        if (event.target.matches('.editable-mirror')) {
            console.log('blur')
            
            var input = event.target
            var editable = input.closest("[contenteditable]")

            // leave edit mode
            editable.classList.remove("editing")

            // get text
            var text = input.value;

            // destroy input
            input.parentNode.removeChild(input);

            // apply value
            editable.innerText = text;
        }
    }, false);



    [contenteditable] {
      position: relative;
      border: 1px solid silver;
      padding: 2px 5px;
    }

    .editable-mirror {
        position: absolute;
        left: -1px;
        top: -1px;
        height: calc(100% + 2px);
        width: calc(100% + 12px);
        padding: 2px 5px;
        margin: 0;
        border: 0;
        font: inherit;
    }




    <h2>Regular - Input + Datalist</h2>
    <label>Choose a browser from this list:
    <input type="text" list="browsers" placeholder="Edit Me" id="regular" /></label>

    <datalist id="browsers">
      <option value="Chrome"/>
      <option value="Firefox"/>
      <option value="Internet Explorer"/>
      <option value="Opera"/>
      <option value="Safari"/>
      <option value="Microsoft Edge"/>
    </datalist>

    <h2>Workaround - ContentEditable + Datalist</h2>

    <label>Choose a browser from this list:
    <span contenteditable list="browsers" name="myBrowser">edit me</span></label>



[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
[2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
[3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-list
[4]: https://jsfiddle.net/KyleMit/j4frex23/

I would like to know if there's any hackable way anyone might know of which will allow an HTML [datalist][1] element to work with a `contenteditable` element and **not with an `<input>` element**. 

## Example code:

```html
<label>Choose a browser from this list:
  <span contenteditable list="browsers" name="myBrowser">choose</span> 
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
```

[fiddle demo][2]

It would seem like it is bound to only with with `<input>` element.
In my situation I have javascript plugin which hides an input field and replaces it with a `span`, for some "special" things that can only be done with a regular DOM element, such as `span`. This span is `contenteditable` and acts is a simulation for the input it replaces, while the input is kept hidden.


  [1]: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist
  [2]: https://jsfiddle.net/rq2zL8qg/