Can't Select Suggestion when input cut-off top of screen. (Mi Tab) specific.

[poonam-tru]

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:

1. Scroll up the input field top of the screen and its showing half of the input
2. Select suggestion, it will firstly focus to input, and not selecting the field
3. 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

[i-like-robots]

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/

[poonam-tru]

Hi, Thanks for the reply. I have generated a video with the link attached below. When my input is out of screen and not visible. I am unable to select the suggestion in one click. It's first scrolled down and I have to click once again to select.

https://www.awesomescreenshot.com/video/13955894?key=41e04ad8a657922385ce8bbb9c919426

On Wed, Jan 11, 2023 at 10:06 PM Matt Hinchliffe @.***> wrote:

Thank you for your report @poonam-tru https://github.com/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/

— Reply to this email directly, view it on GitHub https://github.com/i-like-robots/react-tags/issues/274#issuecomment-1379112096, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEATGJGZWFOXH3DXVJPZL3WR3OPRANCNFSM6AAAAAATWSW43M . You are receiving this because you were mentioned.Message ID: @.***>

[i-like-robots]

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.

[poonam-tru]

Great, thanks for letting me know.

On Mon, Jan 23, 2023 at 5:43 PM Matt Hinchliffe @.***> wrote:

Thank you for the video @poonam-tru https://github.com/poonam-tru, following this I have been able to re-create the issue in both Chrome and Safari on MacOS. The issue does not seem to be present in Firefox on MacOS nor Safari on iOS. I will continue to test with further browsers and devices.

— Reply to this email directly, view it on GitHub https://github.com/i-like-robots/react-tags/issues/274#issuecomment-1400244436, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEATGJLTHIYA3YFUUB6U5LWTZYVTANCNFSM6AAAAAATWSW43M . You are receiving this because you were mentioned.Message ID: @.***>

[i-like-robots]

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.

[i-like-robots]

Closing to track in the new repo https://github.com/i-like-robots/react-tag-autocomplete/issues/30

[poonam-tru]

Thanks, I'll check it out.

On Mon, Jan 23, 2023 at 11:39 PM Matt Hinchliffe @.***> wrote:

Closing in favour of i-like-robots/react-tag-autocomplete#30 https://github.com/i-like-robots/react-tag-autocomplete/issues/30

— Reply to this email directly, view it on GitHub https://github.com/i-like-robots/react-tags/issues/274#issuecomment-1400766203, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEATGKXLK6HBGQGQGJAHR3WT3CMVANCNFSM6AAAAAATWSW43M . You are receiving this because you were mentioned.Message ID: @.***>

[poonam-tru]

@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?