Похоже, что это ошибка Chrome 65 в Windows.

использование setCustomValidity('') в oninput должно отключить сообщения проверки по умолчанию, появляющиеся при вводе.

Для меня работает следующий обходной путь:

/* jshint esnext: true */
const form   = document.querySelector("#form");
const field  = document.querySelector("#field");
const output = document.querySelector("#output");

const pattern = field.getAttribute("pattern");

form.addEventListener('submit', (e) => {
  console.info("SUBMIT");
  output.textContent = `User submitted: ${field.value}`;
  e.preventDefault(); // Prevent default POST request
});

field.oninvalid = (event) => {
  console.info("INVALID");
  event.target.setCustomValidity('must be valid 4 hex characters');
}

field.oninput = (event) => {
  console.info("INPUT");
  event.target.setCustomValidity('');
  event.target.removeAttribute("pattern");
}

field.onchange = (event) => {
  console.info("CHANGE");
  event.target.setAttribute("pattern", pattern);
}

  Output: <span id = "output">No output</span>
  <form id = "form">
    <label for = "field">Enter 4 character hex code: </label>
    <input id = "field" type = "text" pattern = "[a-f,0-9]{4}" autocomplete=off>
  </form>

setCustomValidity предназначен для использования, когда несколько входов в комбинации недопустимы. Поэтому после этого необходимо вручную сбросить его на пустую строку. В противном случае следует использовать атрибут title.

Попытка скрыть ошибку проверки после редактирования ввода понятна, но противоречит философии формы HTML5. Он предназначен для отображения до тех пор, пока введенные данные недействительны.

Добавление максимальной длины может помочь пользователю не переступить верхний предел.

Если вы действительно хотите, чтобы ваши пункты списка были удовлетворены, не стесняйтесь использовать проверку формы HTML5, а вместо этого использовать что-то индивидуальное.

Таким образом, всплывающая подсказка отображается, даже если для setCustomValidity задана пустая строка, потому что элемент ввода все еще недействителен в соответствии с атрибутом шаблона.

<form id = "form">
  <label for = "field">Enter 4 character hex code: </label>
  <input id = "field" type = "text" pattern = "[a-f,0-9]{4}" maxlength = "4" minlength = "4" autocomplete = "off" title = "must be valid 4 hex characters">
</form>

JS

const form   = document.querySelector("#form");
const field  = document.querySelector("#field");
const output = document.querySelector("#output");

form.addEventListener('submit', (e) => {
  console.info("SUBMIT");
  output.textContent = field.value;
  e.preventDefault(); // Prevent default POST request
});

field.oninvalid = (event) => {
  console.info("INVALID");
}

field.oninput = (event) => {
  console.info("INPUT");
}