Search bar hint text is selectable via mouse and keyboard
- Dominant language
- Python
- Stars
- 451
- Forks
- 707
- Avg merge
- 22h 59m
- Merged PRs (30d)
- 91
Description
Community & Support: [LinkedIn Group](https://www.linkedin.com/groups/14656108/) · [Slack #project-nest](https://owasp.slack.com/archives/project-nest)
Active project leaders: Arkadii Yakovets -- [GitHub](https://github.com/arkid15r/) · [LinkedIn](https://www.linkedin.com/in/arkid15r/) · [Slack](https://owasp.slack.com/team/U060W3NKLTF); Kate Golovanova -- [GitHub](https://github.com/kasya/) · [LinkedIn](https://www.linkedin.com/in/kate-golovanova/) · [Slack](https://owasp.slack.com/team/U07PWB1JZ6Z)
[Contributing](https://github.com/owasp/nest/blob/main/CONTRIBUTING.md) · [Code of Conduct](https://github.com/owasp/nest/blob/main/CODE_OF_CONDUCT.md) · [GSoC Mentors](https://github.com/owasp/nest/blob/main/MENTORS.md)
---
**Describe the bug**
Placeholder text in the search input can be selected/highlighted like real text, even though the field is empty. This isn't limited to double-clicking or drag-selecting: it can also be selected via keyboard shortcuts like `Ctrl+A` and `Shift+Arrow` keys.
This happens across Chrome, Edge, Firefox, and Brave since it's default browser behavior for the `placeholder` attribute, not a Nest-specific defect. Flagging it purely as a small UX polish item.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to [nest.owasp.org](https://nest.owasp.org/)
2. Click into the search bar without typing anything
3. Try any of the following: drag-select across the placeholder text ("Type / to search"), press `Ctrl+A`, or use `Shift+Arrow` keys
4. Notice the placeholder gets highlighted like selected text in all cases
**Expected behavior**
Placeholder hint text shouldn't visually behave like selectable content via mouse or keyboard, since it's not real input data.
**Are you going to work on fixing this?**
- [ ] Yes
- [x] No
**Screenshots**
**Desktop (please complete the following information):**
- OS: Windows
- Browser: Chrome / Edge / Firefox / Brave
- Version: latest as of testing
**Additional context**
This is a low-severity UI issue, reproducible via mouse drag-select, double-click, `Ctrl+A`, and `Shift+Arrow` keys.
Inspecting the element shows it's a `` [or: ``], so normal text selection applies by default even though there's no real content to select.
Suggested fix: apply **`user-select: none`** (or Tailwind's **`select-none`** class) to the element or its inner text span. Exact implementation depends on the current component structure.
Reference: https://stackoverflow.com/questions/29221991/prevent-select-on-input-text-field
Contributor guide
Research direction
Start by reproducing the issue in the search bar at nest.owasp.org, then locate the component that renders the “Type / to search” hint and inspect its selectable element or inner text. Apply the existing project styling approach so the hint cannot be selected with mouse or keyboard while normal search input still works, and verify the reported interaction across browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100