Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.76k stars 1.17k forks source link

Delayed Display of Dynamically Rendered ListBox Component #11542

Closed romidane closed 2 weeks ago

romidane commented 7 months ago

Issue summary

I've discovered a bug with the Combobox component. The <ListBox /> component, when dynamically rendered based on input, does not appear as expected. The issue manifests under the following conditions:

Expected behavior

The ListBox should become visible as soon as a single character is inserted into the TextField.

Actual behavior

The ListBox remains invisible until two characters have been inserted into the TextField.

https://github.com/Shopify/polaris/assets/5043138/94abcf6c-dedb-474d-a4e7-9692ef33df89

Steps to reproduce the problem

  1. Load the component.
  2. Begin typing in the <Combobox />.
  3. Observe that the <Listbox /> only becomes visible after typing two characters.

Reduced test case

This issue seems to occur only on the initial render. Once two characters are entered and then cleared, the component appears to function as expected. I've set up a sandbox to illustrate the issue: https://codesandbox.io/p/sandbox/quizzical-tree-ztr6sh?file=%2FApp.tsx%3A83%2C15.

Thank you for your attention to this matter.

github-actions[bot] commented 1 month ago

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.