Enterprise: Autocomplete: Selected event not fired when partially overflowing its parent

[volante007]

Describe the bug
If an autocomplete input element is partially overflowing its parent, the selected event will not fire when selecting an item from the list. Gif below demonstrates the issue:

To Reproduce
Steps to reproduce the behavior:

1. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/autocomplete/example-templates
2. Open dev tools
3. Enlarge dev tools so that the autocomplete demo view is very small and scroll appears
4. Adjust scroll position so that the autocomplete is not fully visible
5. Search for "q" and select the option
   Result: Nothing happens

The scenario above is not very likely, but it will occur anytime the autocomplete parent has vertical scroll and the autocomplete is not 100% within the view.

Expected behavior
The selected event is fired with the selected item.

Version

• ids-enterprise: 4.22.1

[janahintal]

QA Passed. Will now move do Done. Thanks!
Tested in http://master-enterprise.demo.design.infor.com/components/autocomplete/example-templates.html?theme=uplift&variant=light

[volante007]

We still see this issue in 4.27.4. Can be reproduced in above QA page

[tmcconechy]

@volante007 im not seeing it. everytime i try it i se the toast message indicating that the selected event fires.

Tried on: http://master-enterprise.demo.design.infor.com/components/autocomplete/example-templates.html (4.28)
And: https://design.infor.com/code/ids-enterprise/latest/demo/components/autocomplete/example-templates (4.27.4)

Video: https://drive.google.com/file/d/1Uv_6hU85o7uzIIpKIbREN2zu9s5LMoju/view

[volante007]

Hi Tim,

It seems from your video that the autocomplete input isn't partially hidden / scrolled out of view, so the issue will not be seen. See GIF & description in original post (even as small as 1 pixel overflow will show the issue).

Edit: It works fine on second link (design.infor.com @ latest), but not on master. So I assume the problem occured again after 4.26.2?

GIF from master:

[EdwardCoyle]

I tried this on https://4274-enterprise.demo.design.infor.com/components/autocomplete/example-templates.html (which is running 4.27.4) and I wasn't able to reproduce any errors - seemed ok to me:

My screen recording tool got in the way a bit on this GIF but I was seeing the same results without it present.

[EdwardCoyle]

However... confirmed that doing the same on https://master-enterprise.demo.design.infor.com/components/autocomplete/example-templates.html reproduces the bug:

[volante007]

@EdwardCoyle Hm, right, seems to work fine on 4.27.4 on that link, but not on master. Very strange, we see this with 4.27.4. Our cases are all in modals though, not sure if that can differ somehow?

One of our examples in a modal @ 4.27.4:

1. Fully visible input -> event + adds
2. Partially visible input -> nothing (scrolls to top?)
   
   I

[tmcconechy]

Yeah i see it now on master which is most important to fix it... If i open the chrome tools and cover the autocomplete bottom border.

Also only the first time

[volante007]

Added a GIF to previous post for one of our scenarios.

"Also only the first time"
I think that's because when you select, it will actually auto. scroll into view fully. So for issue to appear again, need to make it "hidden" again.

[volante007]

As part of the fix, it would be great if a test page could be added with an autocomplete used in a modal as well! I couldn't find any test page for that.

Similar to:
https://design.infor.com/code/ids-enterprise/latest/demo/components/dropdown/test-in-modal-content.html

[jbrcna]

This issue is now resolved. moving this ticket to Done. please see screenshot for reference
v4.28.0-rc0

https://4280-rc0-enterprise.demo.design.infor.com/components/autocomplete/example-templates.html

[jbrcna]

just some observation with the other test page.
https://4280-rc0-enterprise.demo.design.infor.com/components/autocomplete/test-in-modal-content.html

Expected behavior:
Scrolling inside of this Modal component should cause the Autocomplete list to close, if the list is open when attempting to scroll.

Actual Result:
In test-content (scrollable-y section)
after you scroll, Autocomplete list does not close

_screenshot from Safari browser_

[tmcconechy]

The point about it not closing is worth an issue i think. @jbrcna