Datalist moves when only one option remains in Edge browser

[arcmodo]

Describe the bug

When using the datalist component and the datalist has reached just one remaining item, the datalist physically moves on the screen.

How to reproduce

Clarity Angular v13 and Core v6 Stackblitz.

Steps to reproduce the behavior:

1. Click in Customer Name field
2. Enter the letter o (three results), datalist is normal
3. Enter the letter p (two results), datalist is normal
4. Enter the letter t (one result), datalist moves to the right

Expected behavior

The datalist should remain in one place regardless of the amount of results suggested

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular v13

Device:

• Type: [Dell Notebook]
• OS: [Windows 10]
• Browser: [Edge (Chromium)]
• Version: [103]

Additional notes

This is an issue in Edge 103 but not in Chrome 103. Chrome does not have this issue. You can also see this behavior using Edge in your Core storybook using cds-datalist at https://storybook.core.clarity.design/?path=/story/forms-datalist--page

Normal (2+ results)

Abnormal (1 result)

[ashleyryan]

This might only be an issue on Windows. In Edge 103 on my Macbook I'm unable to reproduce the issue in our Storybook

This is how you're reproducing it in Storybook though, right?

[arcmodo]

You are correct. I tried with Edge on my Mac, and I did not see the issue. It only appears when using Edge on Windows in both the Storybook and my Stackblitz.

[arcmodo]

Is there a plan to investigate this further for resolution? This affects anyone using Edge on Windows, which as the default browser for Windows will be quite disruptive.

[arcmodo]

I have confirmed this is still an issue on Edge 106 on Windows with CDS 6.1.3. In fact, it now seems worse. The datalist choice, when only one result is left, is now disappearing completely. @ashleyryan It looks like this issue still hasn't been assigned despite it affecting the default browser on Windows and appearing to be a significant user experience issue. Would it be possible to get someone assigned to this, please?

[Jinnie]

I am not able to reproduce this on Edge in Windows.
The provided stackblitz seems to have changed since this bug was reported. It contains different fields and a lot of unrelated forms elements. A simplified stackblitz reproduction with only a datalist will help make sure we're doing the same test.
Beyond this, our datalist is a wrapper around the native datalist, so I'd recommend also adding a native datalist to the demo for comparison.

[arcmodo]

Thank you for the follow-up. While I was going to direct you to the playbook, where I can reproduce the issue consistently, I instead did as you suggested and tested with the default html datalist and reproduced the same issue. I don't know how to explain the issue happening as I also tried with a fresh Windows install with no edge extensions and was able to reproduce with default html datalist, with the cds version in my code, and with your playbook.

However, it appears this is somehow tied to display scaling. I am using a 4K monitor with 125% scaling, and if I adjust the scaling and resolution, it physically moves where the single remaining datalist option appears on the screen. That doesn't explain why it happens in the first place, but since I can reproduce this with the html datalist it would indicate this is not a problem with CDS. Again, thank you for the follow-up and the guidance that led to the clarification.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.