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

.customSelectOpen class is not removed as desired #29

Closed
iSimonWeb opened this issue Apr 12, 2013 · 12 comments
Closed

.customSelectOpen class is not removed as desired #29

iSimonWeb opened this issue Apr 12, 2013 · 12 comments

Comments

@iSimonWeb
Copy link

I can't manage to rotate up the arrow near my customSelect when is actually open and rotate down it when s are not visible. To remove the .customSelectOpen I need to click twice...

@adamcoulombe
Copy link
Owner

This example makes use of the .customSelectOpen class:
http://jsfiddle.net/adamco/gL8gk/

Right now when a user clicks and selects an option as normal it should remove the class on change.

There could be one of two problems though:

  1. If the user opens the select, and then closes it by clicking the select box again without selecting an option. The .customSelectOpen doesnt go away until next blur or change event
  2. The user selects the same option again. The select will close and same result as above.

The first scenario is probably fixable since we could make the customSelectSpan listen for a click to remove the class.

The second secnario is much trickier since there will be no change event or anything to listen for.

@iSimonWeb
Copy link
Author

You got the point. The fix for the first scenario is perfect.
Anyway you miss a third scenario: The user opens the select, and then closes it by clicking anywhere on the page; on first click the select will close but the .customSelectOpen doesn't go away like on first scenario.

p.s. sorry if there are any english mistake, I'm italian and I'm trying to do my best :)
Thank you for the support!

@iSimonWeb
Copy link
Author

Can't you listen to 'click' on 'document' to .blur() the <select />? I suppose that could be a good fix.

@adamcoulombe
Copy link
Owner

Yes, Please check the latest version to see if this solves your issue

patch @ line 108 e794b11#L1R108

@iSimonWeb
Copy link
Author

Yes man! "click away" scenario solved! :)
What about a listener on .customSelectInner to blur the <select /> if expanded?

@adamcoulombe
Copy link
Owner

Was not necessary.... the document listener solves both scenarios. customSelectOpen should go away when you click it but maintain focus. (You do not want to blur the select box when the user clicks it as this would be unexpected behaiour)

@iSimonWeb
Copy link
Author

Yeah you right, I'm observing that now via Firebug. .customSelectOpen go away as desired :)
Thank you so much, happy coding!

@iSimonWeb
Copy link
Author

Look at these awesome customSelect! http://www.spaghettitours-dev.com/charters
👍

@adamcoulombe
Copy link
Owner

@iSimonWeb link did not work, would love to see it though

@iSimonWeb
Copy link
Author

Lol sry, that's the local address!
Here is the right one http://test.spaghettitours.com/charters

@adamcoulombe
Copy link
Owner

@iSimonWeb fantastic stuff I like the animation you implemented. great idea

@iSimonWeb
Copy link
Author

Thank you 👍

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

No branches or pull requests

2 participants