UX - Autocomplete indicators vs IE & Edge clear control

This came as a shock to me, likely it may to you as well. IE & even Edge have produced a new non-standard feature!

A preview of IE & Edge's Clear control

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:

  1. Javascript to add the proper classes (base, loading, and empty)
  2. 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.

  1. // Add the initial class
  2. element.classList.add('autocomplete');
  3. // Read the empty state initially
  4. updateEmptyClass(element);
  5. // Monitor changes to the value - This requires use of the 'input' event, the only event that fires when IE uses the clear control
  6. element.addEventListener('input', function(event){ updateEmptyClass(event.target) });
  7. // Add some other handling to manage adding .autocomplete-loading
  8.  
  9. /**
  10.  * @param {HTMLInputElement} element
  11.  */
  12. function updateEmptyClass(element){
  13.     var className = 'autocomplete-empty';
  14.     if(!element.value){
  15.         element.classList.add(className);
  16.         return;
  17.     }
  18.     element.classList.remove(className);
  19. }

  1. .autocomplete {
  2.     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==);
  3.     background-position: right 1rem center;
  4.     background-repeat: no-repeat;
  5.     background-size: 1.25em;
  6. }
  7.  
  8. .autocomplete-loading {
  9.     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
  10. }
  11.  
  12. /* IE10+ CSS styles go here - Using both version of an IE specific selector to target the browser */
  13. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  14.     /* Hide the search icon, IE shows the 'clear' when focusing */
  15.     .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
  16.         background-image: inherit;
  17.     }
  18.  
  19.     .autocomplete-loading::-ms-clear {
  20.         display: none;
  21.     }
  22. }
  23.  
  24. /* Edge CSS styles go here */
  25. @supports (-ms-ime-align:auto) {
  26.     /* Hide the search icon, IE shows the 'clear' when focusing */
  27.     .autocomplete:not(.autocomplete-loading):not(.autocomplete-empty):focus {
  28.         background-image: inherit;
  29.     }
  30.  
  31.     .autocomplete-loading::-ms-clear {
  32.         display: none;
  33.     }
  34. }
Tags: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.