reactivesearch
reactivesearch copied to clipboard
appbaseio
MultiDropdownList broken in VueJs since 1.1.0
Since version 1.1.0 MultiDropdownList is broken.
It's easy reproducible, just head to your own demo site. The Issue is both in Firefox and Chrome. Double click sometimes works.
https://reactivesearch-vue-playground.netlify.app/?path=/story/list-components-multidropdownlist--basic
https://user-images.githubusercontent.com/9919465/104859383-43239700-5925-11eb-9f44-f7a2c3715ee1.mov
@infinitodk I am not able to replicate it with the latest version. We had this issue before but it was fixed a long time back. https://www.loom.com/share/13baa18e46c44560882e1279f569a972
Just tried my iMac here at home. Same issue. Phoned up a colleague - same issue on his machine. Phoned up a friend with Windows. Same issue. Thats a total of 12 different browsers, 4 different machines - same issue. I even went to Browserling to see if it worked on a Windows machine. It did not. Included link below to try for yourself.
https://www.browserling.com/browse/win/7/chrome/86/https%3A%2F%2Freactivesearch-vue-playground.netlify.app%2F%3Fpath%3D%2Fstory%2Flist-components-multidropdownlist--basic
https://user-images.githubusercontent.com/9919465/105607730-d2ef9800-5da0-11eb-9712-d47331f55517.mov
Again, Browserstack.com instance of Windows 10, latest Chrome. Same issue in Firefox in Windows + Safari for mac.
https://user-images.githubusercontent.com/9919465/105608294-704bcb80-5da3-11eb-9f44-2462c638e4c0.mov
Had a chance to test it at the office today with lots of different machines. All of them did not work.
@infinitodk I tried the link that you shared but not able to replicate it. https://www.loom.com/share/afd7ff5a59a94fc4b60c5d158d3ff956
@infinitodk I can replicate it in the following way. The tick icon is only visible when you move the cursor after clicking. We'll check on this issue. https://www.loom.com/share/fa8e78e9931844189f75b620165efd46
Hey,
It's good that you were able to reproduce it, but I want to be clear - with this issue, users are unable to use the multidropdownlist (or the dropdownlist for that matter) as it's not altering the results / adding the filter to the query. Sometimes, with doubleclick, it works.
It's not about a missing tick icon, it's entirely broken for us. As you can see in my videos I uploaded, the total number of items remains unchanged. For half a second, it goes down to 40-ish number of items, before going up again. It seems like the filter is applied for half a second before it's removed again.
I can DM you a link if you want to see it in action in one of our systems.
It's not about a missing tick icon, it's entirely broken for us. I can DM you a link if you want to see it in action in one of our systems.
Sure, that would be helpful. or you can modify the below sandbox without sharing ES credentials. https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/next/packages/web/examples/MultiDropdownList?from-embed
On a sidenote - when checking the console, two POST requests are sent when selecting an option from the dropdown.
First one contains the selected book filter, but 14ms later, a second POST-request is sent, without the book filter.
It's not about a missing tick icon, it's entirely broken for us. I can DM you a link if you want to see it in action in one of our systems.
Sure, that would be helpful. or you can modify the below sandbox without sharing ES credentials. https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/next/packages/web/examples/MultiDropdownList?from-embed
Was surprised to see it was working until I saw it was the React-version. We haven't had any issues with reactivesearch in any of our React-based apps btw!
My bad, can you try this one https://codesandbox.io/s/github/appbaseio/reactivesearch/tree/next/packages/vue/examples/multi-dropdown-list?from-embed
For me, the issue seems to be to many click / mousedown events attached. If i remove one of the mousedown-events in Chromes developer console, it works. It's also consistent with the behavior, it's being selected, then de-selected instantly.
This is still broken? Are you actively looking at this issue or should we recommend our clients switching to Algolia?
@infinitodk This issue is still open because we don't have the replicable steps or a reproducible example. I can replicate a different issue as mentioned here. We can work on fixing it but not sure if that would solve the issue that you are seeing.
Error still persistent on FF 90 on Mac here https://reactivesearch-vue-playground.netlify.app/?path=/story/list-components-multidropdownlist--basic
I am also seeing this behavior on the multi select dropdown list.
The sandbox @bietkul linked in this comment exhibits this behavior as well as the Storybook link @infinitodk posted in this comment.
I think infinitodk is correct that this has to do with click event listener handling. The behavior is different depending on how you click, and strangely the correct behavior happens only when using right click! Using Event Listener breakpoints in Chrome Devtools on Mouse events you can walk through the various behaviors and that should be a route to debug this issue. It looks like there's some issues with handling mouseup & mousedown events and contextmenu events happen to bypass those issues, though I'm not clear how.
Click:
- Item Selected before Click: mousedown will deselect the item and search without filter, then mouseup will reselect and search with filter.
- Item Deselected before Click: mousedown will select the item and search with filter, then mouseup will deselect and search without filter.
"Double" Click: The "dbclick" event is not actually being listened to here.
- Item Selected before DoubleClick: Will deselect and search without filter, then reselect and search with filter.
- Item Deselected before DoubleClick: Will select and search with filter, then deselect and search without filter, then reselect and search with filter.
RightClick: (Exhibits the correct behavior!)
- Item Deselected before RightClick: contextmenu Will select, then perform the search with filter.
- Item Selected before RightClick: contextmenu Will deselect, then perform the search without filter.
In the attached video I perform this sequence of clicks in the sandbox provided by bietkul with selection state before | after:
- Click (Deselected | Deselected)
- Click (Deselected | Deselected)
- "Double" Click (Deselected | Selected)
- "Double Click" (Selected | Selected)
- Right Click (Selected | Deselected)
- Right Click (Deselected | Selected)
https://user-images.githubusercontent.com/14061841/138495836-b478ad59-d517-41c6-9ef3-6e3bded2c98e.mp4
