| <!DOCTYPE html> |
| <head> |
| <style> |
| .container[data-mode="browsing"] .wrapper { |
| display:none; |
| } |
| |
| .container[data-mode="searching"] .wrapper { |
| display:block; |
| } |
| </style> |
| <script> |
| window.onload = async function() { |
| var wrapper = document.getElementsByClassName('wrapper')[0]; |
| window.getComputedStyle(wrapper).display; |
| |
| await new Promise(requestAnimationFrame); |
| |
| var inputEl = document.getElementById('searchbox'); |
| var container = document.getElementsByClassName('container')[0]; |
| container.setAttribute('data-mode', 'searching'); |
| inputEl.focus(); |
| } |
| </script> |
| </head> |
| <body> |
| <div class="container" data-mode="browsing"> |
| <div class="wrapper"> |
| <input id="searchbox" placeholder="Should be focused"> |
| </div> |
| </div> |
| </body> |
