feat: add clear button to the project search field

Clears only the search text and reopens the list, the selected project
stays. Requested during manual testing.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Тимур Городецкий
2026-10-16 12:33:38 +05:00
parent 45c974d0c6
commit c69a11d167
3 changed files with 39 additions and 0 deletions
@@ -50,6 +50,25 @@ $dropdown-max-height: 340px;
color: $gray-900;
}
.clearButton {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: $sp-1;
margin-right: $sp-2;
border: 0;
border-radius: $r-full;
background: transparent;
color: $gray-400;
cursor: pointer;
&:hover {
background: $gray-100;
color: $gray-700;
}
}
.selectedBadge {
flex-shrink: 0;
}
@@ -40,6 +40,14 @@ export const ProjectPicker: React.FC = () => {
setIsOpen(true);
};
// Очистка не сбрасывает выбранный проект — только текст поиска, чтобы сразу искать другой.
const onClear = (event: React.MouseEvent): void => {
event.preventDefault();
setQuery('');
setIsOpen(true);
inputRef.current?.focus();
};
// mousedown, а не click: иначе поле теряет фокус раньше, чем срабатывает выбор.
const onPick = (event: React.MouseEvent, project: IAccessibleProject): void => {
event.preventDefault();
@@ -67,6 +75,17 @@ export const ProjectPicker: React.FC = () => {
onFocus={onFocus}
onChange={onChange}
/>
{query && (
<button
type="button"
className={styles.clearButton}
title={TEXTS.clear}
aria-label={TEXTS.clear}
onMouseDown={onClear}
>
<Icon name="close" size="sm" />
</button>
)}
{currentProject?.status && (
<span className={styles.selectedBadge}>
<ProjectStatusBadge status={currentProject.status} />
+1
View File
@@ -4,6 +4,7 @@ export const HUB_TEXTS = {
picker: {
label: 'Проект:',
placeholder: 'Выберите проект',
clear: 'Очистить',
loading: 'Загрузка проектов…',
noProjects: 'Нет доступных проектов',
notFound: 'Проекты не найдены',