The problem

In the Prometheus data source's query builder, the Metric select can display metric name options that extend past the viewport, which presents some challenges to users who aren't aware of this quirk:

• Makes it difficult for users to find their metrics of interest
• Gives the false impression that metric name results are incomplete

Note how the select is capable of displaying metric name options either above or below the select, but the select is displaying options past the bottom of the viewport when there is neither (a) enough space to display all results below the select, nor (b) sufficiently little space to trigger the select to display results above the select:

Findings

The Prometheus data source's querybuilder/components/MetricSelect.tsx uses an <AsyncSelect /> component from @grafana/ui. As you can see in the Saga design system docs, the select should display results on top of the select when there isn't sufficient space to display results on the bottom:

So why isn't the Metric select working this way? Local testing suggests that it's because of the metric name loading strategy used in MetricsSelect.tsx's implementation of <AsyncSelect />. The select is initialized with empty options (or a single Metrics Modal option). When this happens, the options aren't long enough to trigger the select to display options above the select. The options are updated via onOpenMenu in a way that is contrary to the loading strategies described in the Saga design system and the react-select docs.

Fixing this likely requires updating the metric names loading strategy to align with the canonical approaches described in the Saga and react-select docs.