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: Menu places itself under topnav (#96545)

Browse Source
This commit is contained in:
Laura Fernández 2024-11-18 12:00:24 +01:00 committed by GitHub
parent 76444c7913
commit 30bbcf8200
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import { AutoSizeInput } from '../Input/AutoSizeInput';
import { Input, Props as InputProps } from '../Input/Input';
import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack';
import { Portal } from '../Portal/Portal';
import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
import { getComboboxStyles, MENU_OPTION_HEIGHT } from './getComboboxStyles';
@ -379,68 +380,70 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
placeholder,
})}
/>
<div
className={cx(styles.menu, !isOpen && styles.menuClosed)}
style={{
...floatStyles,
}}
{...getMenuProps({
ref: floatingRef,
'aria-labelledby': ariaLabelledBy,
})}
>
{isOpen && (
<ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}>
{!asyncError && (
<ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
return (
<li
key={`${items[virtualRow.index].value}-${virtualRow.index}`}
data-index={virtualRow.index}
className={cx(
styles.option,
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>
<Portal>
<div
className={cx(styles.menu, !isOpen && styles.menuClosed)}
style={{
...floatStyles,
}}
{...getMenuProps({
ref: floatingRef,
'aria-labelledby': ariaLabelledBy,
})}
>
{isOpen && (
<ScrollContainer showScrollIndicators maxHeight="inherit" ref={scrollRef}>
{!asyncError && (
<ul style={{ height: rowVirtualizer.getTotalSize() }} className={styles.menuUlContainer}>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
return (
<li
key={`${items[virtualRow.index].value}-${virtualRow.index}`}
data-index={virtualRow.index}
className={cx(
styles.option,
selectedItem && items[virtualRow.index].value === selectedItem.value && styles.optionSelected,
highlightedIndex === virtualRow.index && styles.optionFocused
)}
</div>
</li>
);
})}
</ul>
)}
<div aria-live="polite">
{asyncError && (
<MessageRow>
<Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
<Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
</MessageRow>
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>
</li>
);
})}
</ul>
)}
{items.length === 0 && !asyncError && (
<MessageRow>
<Trans i18nKey="combobox.options.no-found">No options found.</Trans>
</MessageRow>
)}
</div>
</ScrollContainer>
)}
</div>
<div aria-live="polite">
{asyncError && (
<MessageRow>
<Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
<Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
</MessageRow>
)}
{items.length === 0 && !asyncError && (
<MessageRow>
<Trans i18nKey="combobox.options.no-found">No options found.</Trans>
</MessageRow>
)}
</div>
</ScrollContainer>
)}
</div>
</Portal>
</div>
);
};