[Search] Add keyboard shortcuts and improve clear button UX
Los mantenedores suelen responder en 2 días
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 48/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- react, typescript
- Área
- accessibility, frontend
Línea de trabajo
Empieza en packages/raystack/raystack/components/search/ y lee el componente Search junto con su integración de InputField. Comprueba el comportamiento existente del componente antes de abordar Escape-to-clear, el foco del clear-button, el reenvío de eventos y el default search type. Se considera hecho cuando las interacciones indicadas funcionan de forma consistente y los elementos CSS-token y !important movidos siguen fuera del alcance.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Summary
Search is a custom component wrapping InputField with search-specific functionality. Has CSS specificity issues, hardcoded values, and missing UX patterns.
Improvements
3. Add Escape key to clear input
Common search UX pattern — pressing Escape should clear the input and optionally blur it.
4. Improve clear button focus management
After clearing, focus stays on the clear button instead of returning to the input field.
6. Pass event object to onClear callback
onClear() fires without the event object, inconsistent with other event handlers.
7. Default type="search" on input
For semantic HTML, the underlying input should default to type="search".
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (#672)
- Remove !important declarations (#678)
Files
packages/raystack/raystack/components/search/
- Lenguaje dominante
- TypeScript
- Estrellas
- 69
- Forks
- 13
- Merge medio
- 3 d 15 h
- PR fusionados (30 d)
- 24
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Tiene una plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de raystack/apsara
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
Los mantenedores suelen responder en 2 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
Los mantenedores suelen responder en 2 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
Los mantenedores suelen responder en 2 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
Los mantenedores suelen responder en 2 días
-
DataView: don't offer select/multiselect filters with empty filterOptionsPosiblemente ocupada @rohanchkrabrty la tomó hoy. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
raystack/apsara#849 · 1 asignado ·
Los mantenedores suelen responder en 2 días
Todos los issues de raystack/apsara
Issues similares
-
nextjs-tracking
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
cloudflare/vinext#3887 ·
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
apache/rocketmq-dashboard#6331 ·
Los mantenedores suelen responder en 5 días
-
bug cache clinical-safety P1-critical
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
juspay/blend-design-system#1788 ·
Los mantenedores suelen responder en 1 día
-
[Analytics] Add Focus Time-Block Efficiency Ratio Calculator in src/lib/focus/efficiency-ratio.tsAbiertoanalytics beginner friendly community contributions-welcome enhancement good first issue hacktoberfest help wanted up-for-grabs
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día