IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Combobox: only render ScrollContainer when menu is open (#96271)

Browse Source 
only render ScrollContainer when menu is open
This commit is contained in:
Ashley Harrison 2024-11-12 13:15:22 +00:00 committed by GitHub
parent 69a38c634c
commit 265342fbae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
packages/grafana-ui/src/components/Combobox/Combobox.tsx
View File

@ -375,55 +375,57 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
'aria-labelledby': ariaLabelledBy, 'aria-labelledby': ariaLabelledBy,
})} })}
> >
<ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}> {isOpen && (
{isOpen && !asyncError && ( <ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}>
<ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}> {!asyncError && (
{rowVirtualizer.getVirtualItems().map((virtualRow) => { <ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>
return ( {rowVirtualizer.getVirtualItems().map((virtualRow) => {
<li return (
key={`${items[virtualRow.index].value}-${virtualRow.index}`} <li
data-index={virtualRow.index} key={`${items[virtualRow.index].value}-${virtualRow.index}`}
className={cx( data-index={virtualRow.index}
styles.option, className={cx(
selectedItem && items[virtualRow.index].value === selectedItem.value && styles.optionSelected, styles.option,
highlightedIndex === virtualRow.index && styles.optionFocused selectedItem && items[virtualRow.index].value === selectedItem.value && styles.optionSelected,
)} highlightedIndex === virtualRow.index && styles.optionFocused
style={{
height: virtualRow.size,
transform: `translateY(${virtualRow.start}px)`,
}}
{...getItemProps({
item: items[virtualRow.index],
index: virtualRow.index,
})}
>
<div className={styles.optionBody}>
<span className={styles.optionLabel}>
{items[virtualRow.index].label ?? items[virtualRow.index].value}
</span>
{items[virtualRow.index].description && (
<span className={styles.optionDescription}>{items[virtualRow.index].description}</span>
)} )}
</div> style={{
</li> height: virtualRow.size,
); transform: `translateY(${virtualRow.start}px)`,
})} }}
</ul> {...getItemProps({
)} item: items[virtualRow.index],
<div aria-live="polite"> index: virtualRow.index,
{asyncError && ( })}
<MessageRow> >
<Icon name="exclamation-triangle" size="md" className={styles.warningIcon} /> <div className={styles.optionBody}>
<Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans> <span className={styles.optionLabel}>
</MessageRow> {items[virtualRow.index].label ?? items[virtualRow.index].value}
</span>
{items[virtualRow.index].description && (
<span className={styles.optionDescription}>{items[virtualRow.index].description}</span>
)}
</div>
</li>
);
})}
</ul>
)} )}
{items.length === 0 && !asyncError && ( <div aria-live="polite">
<MessageRow> {asyncError && (
<Trans i18nKey="combobox.options.no-found">No options found.</Trans> <MessageRow>
</MessageRow> <Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
)} <Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
</div> </MessageRow>
</ScrollContainer> )}
{items.length === 0 && !asyncError && (
<MessageRow>
<Trans i18nKey="combobox.options.no-found">No options found.</Trans>
</MessageRow>
)}
</div>
</ScrollContainer>
)}
</div> </div>
</div> </div>
); );