Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make Searchable Act More Like Native HTML Input

See original GitHub issue

I was wondering if there were design decisions on why searchable select does not act more like native HTML inputs.

For example: 1.) ValueComponent appears to be HTML input value, but it is not. 2.) When you click the ValueComponent, you expect the cursor to appear where you clicked in the text.

I have this PR, which I need to fix (dropped .2 in coverage) and some commits ready, but before I continue: 1.) Is this something worthwhile for the community? 2.) Was this not explored for some reason?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

gojohnnygocommented, May 12, 2016

@JedWatson Can you take a look this comparison and give me your thoughts at my first stab?


  1. Changed behavior for searchable single select only.
  2. select has a value > ValueComponent clicked (the empty space) > the input field will have the text of the ValueComponent’s label > cursor will be at the end of the text.
  3. select has a value > ValueComponent’s clicked (the value label) > the input field will have the text of the ValueComponent’s label > text will be highlighted (image below). This is similar to the Facebook’s search bar behavior.

screen shot 2016-05-11 at 5 59 38 pm

The whole input value is selected (vs putting the cursor where you clicked) bc I’m not sure if it’s worth the trouble. It seems like it can be done but won’t elegant.

With the changes above, there is one side effect to the options. When you click on the the component, the drop down activates as usual but with only one option: the value the select already has. Feature or bug? ¯_(ツ)_/¯

TODO: When component is focused, the cursor should be at the end of the value.

gojohnnygocommented, Sep 21, 2016

Oh yeah, I got that hotness…but for an old ver. I’m kind of busy at work atm, but should have time to fix any conflicts and do a PR next week.

Read more comments on GitHub >

github_iconTop Results From Across the Web

<input>: The Input (Form Input) element - HTML
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide...
Read more >
Editing input type="search" Pseudo-element Button ('x')
I'm trying to make a search bar ...
Read more >
HTML Inputs and Labels: A Love Story | CSS-Tricks
In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder...
Read more >
HTML5 Datalist: What You Need To Know | The Jotform Blog
While autocompletion is traditionally associated with textual input, datalists can also be used on a number of the new HTML5 input types.
Read more >
HTML5 form additions - W3C Wiki
The search input type is arguably nothing more than a differently-styled text input. Browsers are meant to style these inputs the same way...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found