Can't Select Suggestion when input cut-off top of screen. (Mi Tab) specific.
poonam-tru opened this issue · 8 comments
Your issue may already be reported! Please search on the issue tracker before creating one.
Expected behaviour
I want to add selected suggestion in box when input is behind the window screen.
Current behaviour
When input field is behind the window screen and input visibility is cutting off in small screen , On click from suggestion box, first come to focus the input and after then i need to again select the item to add it.
Steps to Reproduce
Steps to reproduce the problem:
- Scroll up the input field top of the screen and its showing half of the input
- Select suggestion, it will firstly focus to input, and not selecting the field
- I need to again click on the suggestion
Example and screenshots
When my input is out of screen and i am trying ti select suggestion, It move me to scrollintoView and not selecting suggestions.
Your environment
- OS: Catalina
- Browser: Chrome, safari, mozilla
- Version of the component: beta
- React version: 16
Thank you for your report @poonam-tru but I'm afraid I cannot recreate any unexpected behaviour following your instructions. Are you able to provide a Gif or video clearly demonstrating the issue?
From your screenshot I can see you are using the v7 component which actually lives in a new repository here: https://github.com/i-like-robots/react-tag-autocomplete/
Thank you for the video @poonam-tru, following this I have been able to re-create the issue in both Chrome and Safari on MacOS. The issue is inconsistent in Firefox on MacOS and does not effect Safari on iOS. I will continue to test with further browsers and devices.
I've now been able to diagnose the issue. There is a blur event listener on the input that forces focus to return to it when a user interacts with the combobox. This is causing the document to scroll enough to display the input within the viewport and this scroll is happening before the click is triggered on the option.
To resolve I can either refactor the focus handling a little or use the prevent scroll option.
Closing to track in the new repo i-like-robots/react-tag-autocomplete#30
@i-like-robots , I have implemented the same as you mentioned. Its working nicely on the desktop browsers. But It create problem in the mi tab. The same issue I have faced in the Mi Tab Chrome. Can you please try to regenerate it?