desenfoque event.relatedTarget devuelve nulo

Yo tengo un<input type="text"> campo y necesito borrarlo cuando este campo pierde el foco (lo que significa que el usuario hizo clic en algún lugar de la página). Pero hay una excepción. El campo de entrada de texto no debe borrarse cuando el usuario hace clic en un elemento específico.

Traté de usarevent.relatedTarget para detectar si el usuario hizo clic no solo en algún lugar sino en mi específico<div>.

Sin embargo, como puede ver en el fragmento a continuación, simplemente no funciona.event.relatedTarget siempre regresanull!

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>