Make Searchable Act More Like Native HTML Input
See original GitHub issueI 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:
- Created 7 years ago
- Comments:10 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@JedWatson Can you take a look this comparison and give me your thoughts at my first stab?
Summary
select
has a value >ValueComponent
clicked (the empty space) > theinput
field will have the text of theValueComponent
’s label > cursor will be at the end of the text.select
has a value >ValueComponent
’s clicked (the value label) > theinput
field will have the text of theValueComponent
’s label > text will be highlighted (image below). This is similar to the Facebook’s search bar behavior.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.
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.