Comments (11)
Is there any update on this? We are seeing this issue as well and it would be nice to get a solution in without having to work around it.
from react-select.
Cheers @heyimalex, good catch and nice workaround. I'll implement it.
from react-select.
@JedWatson @heyimalex
I'm having a similar issue now (and this is still reproducable). Currently setting the focus onMouseEnter is fired by IE/FF on Windows as soon as the result list is rendered, always selecting the option below the cursor instead of the first one even if you do not touch the mouse at all. This is highly irritating to our users.
I would propose (and did implement) a similar fix to the above where the mouse events are ignored until mouse move.
I could implement both changes in a PR if you give me the go.
from react-select.
Alternatively, i wonder if the onMouseEnter handler is even needed anymore, because the option will be selected onMouseMove anyway. It seems that it was implemented at a later time.
So maybe the easier "fix" is to just remove the onEnter handling.
from react-select.
@FossiFoo I opened this issue while I was developing an internal select component and was checking out other implementations for inspiration, so I'm not really familiar with react-select as of today. I want to say the reason that I couldn't only rely on mousemove was that I wanted mouse-wheel scrolling to work even when the cursor wasn't technically moving. But maybe I was wrong about mousemove not firing?
from react-select.
We also face the issue as described by @heyimalex. It is still reproducible on the demo page as well. Any updates on this one?
from react-select.
i fixed this in our copy. basically removing the unused onEnter handler fixes this. @JedWatson should i submit a PR?
from react-select.
@FossiFoo I think removing onEnter causes a minor bug with mousewheel scrolling when the mouse is completely still. Proof of concept. Hold your mouse still and wheel over the elements, and you might see them diverge like this:
Effects Firefox but not Chrome, the difference being that Chrome fires a mousemove wherever the wheel stops and Firefox does not. I'm not sure what the spec has to say about it. IMO this is a less annoying bug than the original since all you need to do to get around it is move your mouse a little, and your hand is probably already on the mouse since you're using the wheel.
from react-select.
Hi @JedWatson,
Thank you for such a quality component.
I'm trying to port it to clojurescript (so I do not pay the price of converting from json to cljs many times on my render loop).
The way I'm trying the solve this problem mouseEnter and mouseMove is saving pageX and pageY. When focusAdjacentOption is called I grab that previously saved pageX and pageY and black-list them, so as long the mouse does not move mouseEnter and mouseMove will not select the option under the cursor.
;; on option
:on-mouse-enter
(fn [e]
(let [page-xy [(.-pageX e) (.-pageY e)]
{:keys [last-page-xy black-listed-page-xy]} @memo-state]
(when (not= page-xy last-page-xy)
(swap! memo-state assoc
:last-page-xy page-xy))
(when (and (not is-focused)
(not= black-listed-page-xy page-xy) )
(focus-option state-atom option instance-prefix value-key)
(swap! memo-state dissoc
:black-listed-page-xy))))
;; on focus-adjacent-option
(when new-focused-option
;; black-list last-page-xy saved by option in order
;; to ignore when mouse-enter and mouse-move be fired and prevent
;; the option under the mouse be selected
(swap! memo-state
(fn [{:as state :keys [last-page-xy]}]
(assoc state
:black-listed-page-xy last-page-xy)))
(focus-option
state-atom
new-focused-option
instance-prefix
value-key))
from react-select.
@geraldodev ah, very cool. will you release that? i've been looking to do that too, but it was never high enough prio for me.
The suggested fix LGTM as well.
from react-select.
It's not completed. I got multi selection and simple selection implemented.
Simple-value and Async are not implemented.
I have not decided yet to open, because different from @JedWatson I have no
authority over the code.
I'm porting (a lot of work) and I'm gaining confidence and getting to know
the design.
regards,
geraldodev
2016-10-19 3:42 GMT-02:00 FossiFoo [email protected]:
@geraldodev https://github.com/geraldodev ah, very cool. will you
release that? i've been looking to do that too, but it was never high
enough prio for me.The suggested fix LGTM as well.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#48 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAvRCEIUY2dqBlukGnCTO3abNFrImOi4ks5q1a2vgaJpZM4DTkif
.
from react-select.
Related Issues (20)
- <title> OMG HOT 1
- react-select v5.8.0: `Extra attributes from the server: aria-activedescendant` HOT 3
- Async multi select options are reset after selecting an option HOT 2
- Issue with input type="number" on Firefox/Safari HOT 2
- Menu is closing inside tests HOT 4
- Validation works incorrectly for React-select with Formik and yup on mobile device
- JAWS screen reader highlight/focus issue
- Bug: right clicking on a select input when the menu is open makes the input unresponsive
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Pressing on Tab key takes me to outside of the form instead of next input. HOT 9
- <withAsyncPaginate: the options menu closes on every option click>
- The issue where the keyboard's down button does not work immediately during Korean input
- Extra Space in Dropdown Menu of React Select Component on Initial Render
- not showing the inital value HOT 1
- Unwanted focus state on the input element HOT 1
- onMenuScrollToBottom and onMenuScrollToTop does not works in mobile view for Select in React
- OptionType doesn't describe what it accepts
- The select will not focus after clearing when openMenuOnClick is true
- getOptionValue is called with wrong type
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-select.