Fragmented Thought
TwitterGitHub

UX - Autocomplete indicators vs IE & Edge clear control

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

This came as a shock to me, likely it may to you as well. IE & Edge have produced a new non-standard feature! A little button to clear text entries inside fields. It's actually handy, I applaud them. Sadly it does cause me problems. As designers, our goal is to provide systematic, effective hints. If you're working in a large scale application, there may be some times when search is a wildcard partial text match, and other times when a real JavaScript autocomplete is required. Properly signaling which is which ahead of time reduces mental friction, and sets the user up to appropriately use the search. Normally, we like to do that using hint images. Maybe a 'search' icon, and one of many famous loading spinners during network requests.

Unfortunately, the combination of MS's 'Clear' and autocomplete controls results in... overlap. It's just plain ugly.

Other browsers have not brought that feature up, though they may someday. For now though, we need handling providing the base hint, the loading spinner, and a special rule or two to remove those in IE & Edge when the user is focused on the field. To that end, you'll need two pieces:

  • Javascript to add the proper classes (base, loading, and empty)
  • CSS to target the same states above

Providing an autocomplete script is beyond the scope of this post, but I'll provide the little bits you need to know about.

// Add the initial class
element.classList.add("autocomplete");
// Read the empty state initially
updateEmptyClass(element);
// Monitor changes to the value - This requires use of the 'input' event, the only event that fires when IE uses the clear control
element.addEventListener("input", function (event) {
  updateEmptyClass(event.target);
});
// Add some other handling to manage adding .autocomplete-loading

/**
 * @param {HTMLInputElement} element
 */
function updateEmptyClass(element) {
  var className = "autocomplete-empty";
  if (!element.value) {
    element.classList.add(className);
    return;
  }
  element.classList.remove(className);
}
.autocomplete {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQElEQVRYR+2WX0hTcRTHz7nbmtXsyRdl4nwJDNSH+dBDJL4I5VBbDZtZ3EzJFQghve+hXhbEQh+yJv7ZRIZoTFpUUPQSIm1BvufEeYnBkknSpNw98Rv3ylh3u9eV+uLv8f7O+Z7PPef8zu+HcMgLDzk+HAHsOQNut1ufSqVMXq839T/KpwlgaGjojCiKt4moDREtAKADgJ9E9JnjuBd6vf65x+P5UQpQUQC3231sY2PjMSIOSEELxUgg4h2v1zu/V4iCADzPl5lMpjcAcF6jKAHAvZGRkSca7bNmBQFcLtckEd3IEdtCxKdE9ImI4hzH1YuieAERO3NsRFam0dHR11ohFAH6+/ubieiDLEJES4jo9Pl8sXzhvr6+K4g4RkSnpL2Vzc3NutnZ2V9aIBQBeJ4PA8BFSeD7zs5OfSAQ+FZIkOf5XgAYk/cRsXt8fHymJACHw2EyGo1JADAyASIanJ6eHlYT6+npWQSAs9m6Igb9fv9VNR/FHnA6nQ2iKH6RnTmOa5yZmVlWE+vq6vIAwH3JbjkYDDaq+SgC2O32FkR8LzuXl5cfn5iY2FYTs9vttxDRJ9kJc3NzZjUfRYD29vYGRNzNABE1LiwsqGago6MjNwNLoVAoWw619VcTtra2njQYDKwHyiTnwXA4rNoDNpttkYjkoIFwOHxdLbhiBthHq9X6EgDa5FMAAPXRaLTgKWhqauolotxT0BmJREIlA1gslmZE3J0DALCUyWS619bWVvJFa2trHQDAap+dA0T0dXV19TQAiCUDMEeLxTIJALuTkIi2OI57JsEIiMi6nE1CW16gNJuOsVjs7b8ClImi+AoAWrQI5dlsE1FnPB5nd0nRVfQ2tFqthkQi8QgR7wKAvohSEhFdRHQZAOQBxI6uKoSm90BNTU1dJpMZQETWmPJ7gAWIAMB8Op32JZNJ9h7QV1dX+3MhiOjS+vp6wctJE0Den+sqKipOSAGVkqIzm81TANAtbTLQghClAKiVle3rqqqqptilJEMgoiLEfgHIEJOIeC0nEzZBEN7l/sF+AihBfBQE4dxBAmQhKisrhxHxJiI+EATh4UEDZOOxIx2NRn/nN9B+l0C1YY8ADj0DfwB6DCkwP0hfOgAAAABJRU5ErkJggg==);
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.25em;
}

.autocomplete-loading {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
}

/**
 * IE10+ CSS styles go here
 * Using both version of an IE specific selector to target the browser
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* Hide the search icon, IE shows the "clear" when focusing * /
    .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
    background-image: inherit;
  }

  .autocomplete-loading::-ms-clear {
    display: none;
  }
}

/* Edge CSS styles go here */
@supports (-ms-ime-align: auto) {
  /* Hide the search icon, IE shows the "clear" when focusing
    */
  .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
    background-image: inherit;
  }

  .autocomplete-loading::-ms-clear {
    display: none;
  }
}