component.github.io icon indicating copy to clipboard operation
component.github.io copied to clipboard

Add autofocus for the searchbar

Open buschtoens opened this issue 11 years ago • 9 comments

As in #1 by @ianstormtaylor.

I'm kinda unsatisfied with this.searchbar = this.el.querySelector("input");. Is there a way for reactive to access nested input elements and .focus() them?

buschtoens avatar Mar 04 '13 19:03 buschtoens

going to leave this out for now since the caret makes it look kinda funny, it would be cool even just to have an s shortcut key for "power users" haha, though I think most people will use the cli anyway

tj avatar Mar 05 '13 04:03 tj

I really like the idea of autofocus. I think you're vastly underestimating the number of people who will be using the site. As the ultimate power user (the creator of the product) I'm not surprised you use the command line tool almost exclusively. Most people will probably use the command line tool purely for installation/build and use the website for search. A significant number of people won't begin using component until someone releases a GUI client that doesn't force the user to install node.js (manually). The component.jit.su site which was not hugely well publicised and was always a temporary measure gets about 150 page views a day (and that hasn't declined much after the release of component.io). As a proportion of the total number of users for component I'd say that's quite a few.

One issue I have with the search as it currently stands is that it's in a very unusual location, and as such is not easy to find when you first navigate to the site. This is especially true if, like me, you open it on a very tall screen. Perhaps it could be moved to the top right?

ForbesLindesay avatar Mar 05 '13 04:03 ForbesLindesay

+1 for autofocus, actually i just think the idea of already being search mode when you get there is kinda badass in general :p

i'd also use the site over the command line, mostly because it's easier to get more information after deciding on a component there. or maybe i just dont like reading text in my terminal.. should swap to white text on dark instead and give the cli another chance

ianstormtaylor avatar Mar 05 '13 04:03 ianstormtaylor

the new design has a fixed header so we could move the search to a more traditional position if we need to. expressjs.com gets about 10k/day. I'm not against the auto focus I just think it's kinda weird, especially since soon the search wont be the primary thing on the page (I will keep it on the front page though), we need way more real content

tj avatar Mar 05 '13 18:03 tj

if search becomes not the main content then it makes sense not to have it. could also throw a tabindex="1" on there and that should make it the first focusable thing via tab, if i remember correctly (last i tried i had to tab past the logo first)

ianstormtaylor avatar Mar 06 '13 01:03 ianstormtaylor

please no autofocus. this was recently removed from npmjs.org for good reason.

stephenmathieson avatar Jul 21 '13 14:07 stephenmathieson

@stephenmathieson All those cases can be solved, without removing autofocus.

s was implemented but Esc to leave the search box is missing.

xixixao avatar Dec 29 '13 15:12 xixixao

@xixixao yep, i added the access key s in #58. why esc to leave to search box?

stephenmathieson avatar Dec 29 '13 16:12 stephenmathieson

If I can throw myself into a search box with keyboard, I also expect the option of leaving it with keyboard. The same way search box works in FF, Chrome, Windows, OS X (virtually anywhere I can think of).

xixixao avatar Dec 29 '13 16:12 xixixao