Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Searchable Act More Like Native HTML Input #948

Closed
gojohnnygo opened this issue May 9, 2016 · 10 comments
Closed

Make Searchable Act More Like Native HTML Input #948

gojohnnygo opened this issue May 9, 2016 · 10 comments

Comments

@gojohnnygo
Copy link
Contributor

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?

@JedWatson
Copy link
Owner

I think these were just oversights, @gojohnnygo. The event cancelling thing is clever, while the input value clear seems like a bit of a hack? Either way, I've merged your changes - would be very happy with any other improvements you can make!

@gojohnnygo
Copy link
Contributor Author

gojohnnygo commented May 12, 2016

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

Summary

  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.

@ericchernuka
Copy link

Just wondering if this is still being actively pursued? I'm oddly enough looking to build something that fits exactly this implementation.

@travisbloom
Copy link

@gojohnnygo @JedWatson did this ever get implemented? If not, any code you can point me to so I can work on this?

@gojohnnygo
Copy link
Contributor Author

gojohnnygo commented 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.

@travisbloom
Copy link

sounds good @gojohnnygo, saw that you had a PR but there was no diff between master. Let me know if you need help.

@Anshul-HL
Copy link

TODO: When component is focused, the cursor should be at the end of the value. Was it implemented ? @JedWatson @gojohnnygo

@gojohnnygo
Copy link
Contributor Author

gojohnnygo commented Apr 7, 2017

Sorry I'm tardy to the party! I don't remember what happened to my old branch. I think I was playing too fast and loose with --force. 🙀

Anywho, pull down this branch to check out the functionality! Here's a recap:

For single select...

  1. When focused via <instance>.focus(), input has value and cursor is at the end.
  2. When tabbed to focus, same as # 1.
  3. When user clicks to the right of value (the empty space), same as # 1 and the menu is open.
  4. When user clicks the value itself, same as # 1, and the menu is open and the value is highlighted (similar to the search bar in FB).

Functionality works, but there are some things to note...

  1. I still need to clean up code in handleMouseDown(). It's kind of hacky and hard to follow atm.
  2. The changes above caused a 1px jump in the input value when the menu was opened. It was never noticed before bc the value was empty. This jump needs to be tested on IE. Who has Browser Stack?? :)
  3. And speaking of testing, there are some broken tests. Once I clean up the code in step # 1, can I get some help on fixing the tests? Or rethinking the tests if this new functionality is accepted?

@murtali
Copy link

murtali commented Sep 1, 2017

@gojohnnygo -- has there been any update on this? It doesn't look it's been merged into 1.0.0 -- your native functionality is definitely what I'm looking for.

@bladey
Copy link
Contributor

bladey commented May 27, 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

@bladey bladey closed this as completed May 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants