OWASP / OWASP/Nest

Search bar hint text is selectable via mouse and keyboard

Open Beginner friendly
#5,602 0 comments 0 reactions 0 assignees View on GitHub
bug
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**

Image

**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.