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
Mobile touch events cause multiple onSelectedItemChange calls #1534
Comments
Yes I am able to reproduce this issue on real devices, also on Firefox mobile emulator. |
Yes, it runs on my iPhone without any issues. Here are the exact steps:
|
I was testing on Android device |
I can confirm, tested on Android device today and was able to reproduce! |
I am having the same issue with the newest downshift version, even on desktop without devtools. If I set the menu to stay open after clicking an item and then double click on an item it will crash the application. See my comment in this other issue that seems to be related: #1511 (comment) |
This is also affecting me on react 18 w/downshift 8.2.0 |
If someone can investigate this issue it will be really helpful. |
I did some investigating. In React18, for touch events, there is one extra click event. For instance, if you select an item by touch, the events are: click, mouse move, click. In 17, there is only mouse move then click. Investigating further. |
Still looking into it, as I went along a wrong trail previously. |
This issue seems to happen when we have both onClick and onMouseMove that trigger dispatch. Updated the Issue on React: facebook/react#27666 I hope to find an elegant solution, as our state logic with useReducer is pretty complex and I would not want to refactor that. |
Thanks so much for taking a look at it @silviuaavram ! Your work is impressive |
Everyone, try |
It appears fixed with 8.2.4. I cannot repro it in that sandbox anymore. |
@silviuaavram I'm still facing this issue when running e2e with cypress, onClick is firing twice and as soon as I I'll try to put together a repro branch over the next few days. |
@ramon-villain this is something that's related to React 18, I filed an issue there but no luck so far. I may need to dig into React myself. For instance, this code will trigger the clicking action twice. import * as React from 'react'
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
console.log('here')
return {
name: state.name,
age: state.age + 1,
}
}
case 'changed_name': {
console.log('here 2')
return {
name: action.nextName,
age: state.age,
}
}
case 'haha': {
console.log('here 3')
return {
name: 'haha',
age: state.age,
}
}
default: {
throw Error('Unknown action: ' + action.type)
}
}
}
const initialState = {name: 'Taylor', age: 42}
export default function App() {
return (
// <React.StrictMode>
<Form />
// </React.StrictMode>
)
}
function Form() {
const [state, dispatch] = React.useReducer(reducer, initialState)
function handleButtonClick() {
dispatch({type: 'incremented_age'})
}
function handleInputChange(e) {
dispatch({
type: 'changed_name',
nextName: e.target.value,
})
}
function handleMove(e) {
e.preventDefault()
dispatch({type: 'haha'})
}
return (
<>
<input value={state.name} onChange={handleInputChange} />
<button onClick={handleButtonClick} onMouseMove={handleMove}>
Increment agess
</button>
<p>
Hello, {state.name}. You are {state.age}.
</p>
</>
)
} |
downshift
version: 7.6.0node
version: 20What you did:
On my project I have an issue that in some cases downshift calls onSelectedItemChange in a loop which crash application.
I made an reproduction which reproduce this problem with double call.
Seems to be the cause of issue: 1511
What happened:
onSelectedItemChange function is called multiple times on mobile devices, depending on how complex component is, number of calls increase
Reproduction repository:
Reproduction
Problem description:
Issue seems to be connected to re-renders on onSelectedItemChange cause more calls it cause.
The text was updated successfully, but these errors were encountered: