diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 143864e487..ec5ed97c51 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -98,6 +98,26 @@ export const Select = React.forwardRef(function const filterRef = React.useRef(null); const listRef = React.useRef>(null); const handleControlRef = useForkRef(ref, controlRef); + + const handleFilterChange = React.useCallback( + (nextFilter: string) => { + onFilterChange?.(nextFilter); + dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}}); + }, + [onFilterChange], + ); + + const handleOpenChange = React.useCallback( + (open: boolean) => { + onOpenChange?.(open); + + if (!open && filterable) { + handleFilterChange(''); + } + }, + [filterable, onOpenChange, handleFilterChange], + ); + const { value, open, @@ -114,7 +134,7 @@ export const Select = React.forwardRef(function multiple, open: propsOpen, onClose, - onOpenChange, + onOpenChange: handleOpenChange, }); const uniqId = useUniqId(); const selectId = id ?? uniqId; @@ -197,14 +217,6 @@ export const Select = React.forwardRef(function listRef?.current?.onKeyDown(e); }, []); - const handleFilterChange = React.useCallback( - (nextFilter: string) => { - onFilterChange?.(nextFilter); - dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}}); - }, - [onFilterChange], - ); - const handleQuickSearchChange = React.useCallback((search: string) => { if (search) { const itemIndex = findItemIndexByQuickSearch(search, getListItems(listRef)); @@ -228,10 +240,8 @@ export const Select = React.forwardRef(function if (filterable) { filterRef.current?.focus(); } - } else { - handleFilterChange(''); } - }, [open, filterable, handleFilterChange]); + }, [open, filterable]); const mods: CnMods = { ...(width === 'max' && {width}), diff --git a/src/components/Select/__tests__/Select.filter.test.tsx b/src/components/Select/__tests__/Select.filter.test.tsx index 3ea9bc6cbc..eedba44e5b 100644 --- a/src/components/Select/__tests__/Select.filter.test.tsx +++ b/src/components/Select/__tests__/Select.filter.test.tsx @@ -68,7 +68,7 @@ describe('Select filter', () => { await user.keyboard('1'); // empty expect(queryAllByRole('option').length).toBe(0); - expect(onFilterChange).toBeCalledTimes(4); + expect(onFilterChange).toBeCalledTimes(3); }); test('should render node with renderEmptyOptions', async () => { diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index f4c1487824..d716f914c3 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -62,6 +62,27 @@ @include mixins.text-accent; } +// We use this mixin to correct the positioning of the text inside the input +// See https://github.com/gravity-ui/uikit/issues/975 + +@mixin input-control($size) { + @include control-mixins.input-control($size); + @if $size == 's' { + line-height: #{variables.$s-height - control-variables.$border-width * 2}; + } + + @if $size == 'm' { + line-height: #{variables.$m-height - control-variables.$border-width * 2}; + } + + @if $size == 'l' { + line-height: #{variables.$l-height - control-variables.$border-width * 2}; + } + + @if $size == 'xl' { + line-height: #{variables.$xl-height - control-variables.$border-width * 2}; + } +} $block: '.#{variables.$ns}text-input'; @@ -173,7 +194,7 @@ $block: '.#{variables.$ns}text-input'; &_size { &_s { #{$block}__control { - @include control-mixins.input-control(s); + @include input-control(s); } #{$block}__label { @@ -204,7 +225,7 @@ $block: '.#{variables.$ns}text-input'; &_m { #{$block}__control { - @include control-mixins.input-control(m); + @include input-control(m); } #{$block}__label { @@ -235,7 +256,7 @@ $block: '.#{variables.$ns}text-input'; &_l { #{$block}__control { - @include control-mixins.input-control(l); + @include input-control(l); } #{$block}__label { @@ -266,7 +287,7 @@ $block: '.#{variables.$ns}text-input'; &_xl { #{$block}__control { - @include control-mixins.input-control(xl); + @include input-control(xl); } #{$block}__label {