Caret is invisible on contenteditable div when parent has filter

Question

I have an inline div with contenteditable enabled which is inside an element that has a drop-shadow filter. While one can write in the contenteditable div, the caret is invisible. How can I make the caret be displayed?

Edit: All divs must remain display:inline.

.parent {
  display: inline;
  background: white;
  margin: 5px;
}

.no-filter {}

.filter {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.4));
}

div>div {
  display: inline;
  outline: none;
  border: none;
}

<div class="parent no-filter">
  <div contenteditable>
    This caret is visible.
  </div>
</div>

<br/>
<br/>

<div class="parent filter">
  <div contenteditable>
    This caret is invisible.
  </div>