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:
@@ -50,6 +50,25 @@ $dropdown-max-height: 340px;
|
|||||||
color: $gray-900;
|
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 {
|
.selectedBadge {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,6 +40,14 @@ export const ProjectPicker: React.FC = () => {
|
|||||||
setIsOpen(true);
|
setIsOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Очистка не сбрасывает выбранный проект — только текст поиска, чтобы сразу искать другой.
|
||||||
|
const onClear = (event: React.MouseEvent): void => {
|
||||||
|
event.preventDefault();
|
||||||
|
setQuery('');
|
||||||
|
setIsOpen(true);
|
||||||
|
inputRef.current?.focus();
|
||||||
|
};
|
||||||
|
|
||||||
// mousedown, а не click: иначе поле теряет фокус раньше, чем срабатывает выбор.
|
// mousedown, а не click: иначе поле теряет фокус раньше, чем срабатывает выбор.
|
||||||
const onPick = (event: React.MouseEvent, project: IAccessibleProject): void => {
|
const onPick = (event: React.MouseEvent, project: IAccessibleProject): void => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -67,6 +75,17 @@ export const ProjectPicker: React.FC = () => {
|
|||||||
onFocus={onFocus}
|
onFocus={onFocus}
|
||||||
onChange={onChange}
|
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 && (
|
{currentProject?.status && (
|
||||||
<span className={styles.selectedBadge}>
|
<span className={styles.selectedBadge}>
|
||||||
<ProjectStatusBadge status={currentProject.status} />
|
<ProjectStatusBadge status={currentProject.status} />
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ export const HUB_TEXTS = {
|
|||||||
picker: {
|
picker: {
|
||||||
label: 'Проект:',
|
label: 'Проект:',
|
||||||
placeholder: 'Выберите проект',
|
placeholder: 'Выберите проект',
|
||||||
|
clear: 'Очистить',
|
||||||
loading: 'Загрузка проектов…',
|
loading: 'Загрузка проектов…',
|
||||||
noProjects: 'Нет доступных проектов',
|
noProjects: 'Нет доступных проектов',
|
||||||
notFound: 'Проекты не найдены',
|
notFound: 'Проекты не найдены',
|
||||||
|
|||||||
Reference in New Issue
Block a user