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)
- worst thing ever see in my life HOT 2
- Types broken in `React@19` & `Next@15` HOT 4
- CreatableSelect missing all classes HOT 1
- Page crashed in Edge browser with translation
- Clicking outside of the menu does not close a controlled menu
- Unable to select color using voice access commands.
- Async Select Multi: Options Cleared After Selection Despite Persistent Search Term
- how to get the value from select component in a form based on id
- Tooltip not working
- AsyncCreatableSelect not allowing to enter more than character to search or create
- defaultValue text gets truncated with elipsis (...) at the end HOT 1
- how to avoid this select expand while selecting multiple options
- Unexpected behaviour in combination with `react-hook-form` HOT 1
- Select not scrolling to Selected Item when menuPortalTarget={document.body}
- Incorrect user of <label for=FORM_ELEMENT>
- Pressing enter on a button in a custom option component consumes the event before it reaches the custom button. HOT 1
- Tabindex not working HOT 2
- The dropdown does not open in createable select when the search input and the options label do not match
- Clicking on an item using Custom Menu scrolls to top HOT 1
- Styles not Loading in Remix HOT 5
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.