diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index 401c37e7d..33c14417d 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -136,7 +136,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri tagRender?: (props: CustomTagProps) => React.ReactElement; direction?: 'ltr' | 'rtl'; maxLength?: number; - + showScrollBar?: boolean | 'optional'; // MISC tabIndex?: number; autoFocus?: boolean; @@ -223,6 +223,7 @@ const BaseSelect = React.forwardRef((props, ref) className, showSearch, tagRender, + showScrollBar = 'optional', direction, omitDomProps, @@ -693,8 +694,19 @@ const BaseSelect = React.forwardRef((props, ref) showSearch: mergedShowSearch, multiple, toggleOpen: onToggleOpen, + showScrollBar, }), - [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen], + [ + props, + notFoundContent, + triggerOpen, + mergedOpen, + id, + mergedShowSearch, + multiple, + onToggleOpen, + showScrollBar, + ], ); // ================================================================== diff --git a/src/OptionList.tsx b/src/OptionList.tsx index d4c0109fb..7932cf34f 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -44,6 +44,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r toggleOpen, notFoundContent, onPopupScroll, + showScrollBar, } = useBaseProps(); const { maxCount, @@ -325,6 +326,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r virtual={virtual} direction={direction} innerProps={virtual ? null : a11yProps} + showScrollBar={showScrollBar} > {(item, itemIndex) => { const { group, groupOption, data, label, value } = item; diff --git a/tests/OptionList.test.tsx b/tests/OptionList.test.tsx index ba7186a08..c97102298 100644 --- a/tests/OptionList.test.tsx +++ b/tests/OptionList.test.tsx @@ -6,7 +6,9 @@ import OptionList from '../src/OptionList'; import SelectContext from '../src/SelectContext'; import { fillFieldNames, flattenOptions } from '../src/utils/valueUtil'; import { injectRunAllTimers } from './utils/common'; -import { createEvent, fireEvent, render } from '@testing-library/react'; +import { createEvent, fireEvent, render, waitFor } from '@testing-library/react'; +import Select from '../src'; +import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; jest.mock('../src/utils/platformUtil'); @@ -459,4 +461,74 @@ describe('OptionList', () => { }); expect(onActiveValue).not.toHaveBeenCalledWith('3', expect.anything(), expect.anything()); }); + + describe('List.ScrollBar', () => { + let mockElement; + let boundingRect = { + top: 0, + bottom: 0, + width: 100, + height: 50, + }; + + beforeAll(() => { + mockElement = spyElementPrototypes(HTMLElement, { + offsetHeight: { + get: () => 100, + }, + clientHeight: { + get: () => 50, + }, + getBoundingClientRect: () => boundingRect, + offsetParent: { + get: () => document.body, + }, + }); + }); + + afterAll(() => { + mockElement.mockRestore(); + }); + + beforeEach(() => { + boundingRect = { + top: 0, + bottom: 0, + width: 100, + height: 50, + }; + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + + it('should show scrollbar when showScrollBar is true', async () => { + const options = Array.from({ length: 10 }, (_, index) => ({ + label: `${index + 1}`, + value: `${index + 1}`, + })); + + const { container } = render(); + + await waitFor(() => { + const scrollbarElement = container.querySelector('.rc-virtual-list-scrollbar-visible'); + expect(scrollbarElement).toBeNull(); + }); + }); + }); });