(null);
+ const [hideDueToOverScroll, setHideDueToOverscroll] = useState(false);
+
const isRefresh = useVisualRefresh();
// Updates the position handler.
@@ -113,8 +118,13 @@ export default function PopoverContainer({
};
const updatePositionOnResize = () => requestAnimationFrame(() => updatePositionHandler());
- const refreshPosition = () => requestAnimationFrame(() => positionHandlerRef.current());
-
+ const refreshPosition = () => {
+ const hide = !!hideOnTriggerOverflow && !!trackRef.current && !isInScroll(trackRef.current);
+ setHideDueToOverscroll(hide);
+ if (!hide) {
+ requestAnimationFrame(() => positionHandlerRef.current());
+ }
+ };
window.addEventListener('click', onClick);
window.addEventListener('resize', updatePositionOnResize);
window.addEventListener('scroll', refreshPosition, true);
@@ -124,9 +134,9 @@ export default function PopoverContainer({
window.removeEventListener('resize', updatePositionOnResize);
window.removeEventListener('scroll', refreshPosition, true);
};
- }, [keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
+ }, [hideOnTriggerOverflow, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
- return (
+ return hideDueToOverScroll ? null : (
Promise
+) {
+ return useBrowser(async browser => {
+ await browser.url(
+ `/#/light/select/disabled-reason?expandToViewport=${expandToViewport}&virtualScroll=${virtualScroll}`
+ );
+ const select = createWrapper().findSelect();
+ const page = new SelectPageObject(browser, select);
+ await testFn(page);
+ });
+}
+
+describe('Disabled reasons', () => {
+ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
+ describe.each([false, true])('virtualScroll=%s', virtualScroll => {
+ test(
+ 'shows disabled reason on hover',
+ setupTest({ expandToViewport, virtualScroll }, async page => {
+ await page.pause(100);
+ const select = createWrapper().findSelect();
+ await page.clickSelect();
+ await page.assertDropdownOpen(true, expandToViewport);
+ const firstDisabledOption = select.findDropdown({ expandToViewport }).findOption(1);
+ await page.hoverElement(firstDisabledOption.toSelector());
+ const disabledTooltip = firstDisabledOption.findDisabledReason();
+ expect(await page.isDisplayed(disabledTooltip.toSelector())).toBe(true);
+ })
+ );
+
+ test(
+ 'hides disabled reason when the disabled option is scrolled out of view',
+ setupTest({ expandToViewport, virtualScroll }, async page => {
+ await page.pause(100);
+ const select = createWrapper().findSelect();
+ await page.clickSelect();
+ await page.assertDropdownOpen(true, expandToViewport);
+ const dropdown = select.findDropdown({ expandToViewport });
+ const firstDisabledOption = select.findDropdown({ expandToViewport }).findOption(1);
+ await page.hoverElement(firstDisabledOption.toSelector());
+ const disabledTooltipSelector = firstDisabledOption.findDisabledReason().toSelector();
+ expect(await page.isDisplayed(disabledTooltipSelector)).toBe(true);
+ await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 500 });
+ await page.waitForJsTimers();
+ expect(await page.isDisplayed(disabledTooltipSelector)).toBe(false);
+ })
+ );
+ });
+ });
+});
diff --git a/src/select/__integ__/page-objects/select-page.ts b/src/select/__integ__/page-objects/select-page.ts
index 2ccedbe52e..0874b1caad 100644
--- a/src/select/__integ__/page-objects/select-page.ts
+++ b/src/select/__integ__/page-objects/select-page.ts
@@ -57,12 +57,16 @@ export default class SelectPageObject<
await this.browser.releaseActions();
}
- isDropdownOpen() {
- return this.isExisting(this.wrapper.findDropdown().findOpenDropdown().toSelector());
+ isDropdownOpen(expandToViewport = false) {
+ return this.isExisting(this.wrapper.findDropdown({ expandToViewport }).findOpenDropdown().toSelector());
}
- async assertDropdownOpen(isOpen: boolean) {
- await assert.equal(await this.isDropdownOpen(), isOpen, `Select dropdown should ${isOpen ? '' : 'not '} be open`);
+ async assertDropdownOpen(isOpen: boolean, expandToViewport?: boolean) {
+ await assert.equal(
+ await this.isDropdownOpen(expandToViewport),
+ isOpen,
+ `Select dropdown should ${isOpen ? '' : 'not '} be open`
+ );
}
async ensureDropdownOpen() {
diff --git a/src/select/parts/item.tsx b/src/select/parts/item.tsx
index 926dbb09bc..159f995212 100644
--- a/src/select/parts/item.tsx
+++ b/src/select/parts/item.tsx
@@ -108,6 +108,7 @@ const Item = (
trackRef={internalRef}
value={disabledReason!}
position="right"
+ hideOnTriggerOverflow={true}
/>
)}
>
diff --git a/src/select/parts/multiselect-item.tsx b/src/select/parts/multiselect-item.tsx
index af0a31044c..c9b8110a75 100644
--- a/src/select/parts/multiselect-item.tsx
+++ b/src/select/parts/multiselect-item.tsx
@@ -96,6 +96,7 @@ const MultiSelectItem = (
trackRef={internalRef}
value={disabledReason!}
position="right"
+ hideOnTriggerOverflow={true}
/>
)}
>