diff --git a/packages/components/src/components/TreeSelect/TreeSelect.test.tsx b/packages/components/src/components/TreeSelect/TreeSelect.test.tsx index 58569af8..2dbe4f40 100644 --- a/packages/components/src/components/TreeSelect/TreeSelect.test.tsx +++ b/packages/components/src/components/TreeSelect/TreeSelect.test.tsx @@ -6,6 +6,7 @@ import { userEvent } from '@testing-library/user-event'; import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'; import { Form } from '../Form'; +import { Popover } from '../Popover'; import { Provider } from '../Provider'; import { Tree } from '../Tree'; @@ -490,6 +491,18 @@ describe('TreeSelect', () => { }); describe('clear button', () => { + it('should not throw on render in a popover', () => { + expect(() => { + render( + + + + + + ); + }).not.toThrow(); + }); + it('should be visible only when a value is selected', () => { const { rerender } = renderTreeSelect({ value: null, isClearable: true }); diff --git a/packages/components/src/components/TreeSelect/TreeSelect.tsx b/packages/components/src/components/TreeSelect/TreeSelect.tsx index e116288e..b79d488c 100644 --- a/packages/components/src/components/TreeSelect/TreeSelect.tsx +++ b/packages/components/src/components/TreeSelect/TreeSelect.tsx @@ -22,9 +22,12 @@ import { } from '@koobiq/react-core'; import { IconChevronDownS16 } from '@koobiq/react-icons'; import { + ButtonContext, CollectionBuilder, Collection, + DEFAULT_SLOT, FieldErrorContext, + Provider, composeRenderProps, useTreeSelect, useTreeSelectState, @@ -408,38 +411,52 @@ export function TreeSelectInner< ); return ( - - -
- - - {state.selectedItems.length ? renderValue : undefined} - - - - - - -
- -
- {isSearchable && ( - <> - - - - )} - - - {dropdownFooter} - + + + +
+ + + {state.selectedItems.length ? renderValue : undefined} + + + + + +
- -
+ +
+ {isSearchable && ( + <> + + + + )} + + + {dropdownFooter} + +
+
+ +
); }