onivim/oni

Outline showing on Menu when clicking on it with mouse

Open

#1750 opened on Mar 8, 2018

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (11,389 stars) (336 forks)batch import
bughelp wanted

Description

I was playing around with the Menu (QuickOpen - Control+P / Command Palette - Control+Shift+P), and just noticed that when clicking inside the menu, we get a yellow outline border:

image

I believe this may be a result / regression from switching to react-virtualized. Might just need some styling tweaks on one of the containers here: https://github.com/onivim/oni/blob/bffb10f4c9808261259061bb0f9416a351b555c0/browser/src/Services/Menu/MenuComponent.tsx#L86

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Examine the MenuComponent.tsx file around line 86 (https://github.com/onivim/oni/blob/bffb10f4c9808261259061bb0f9416a351b555c0/browser/src/Services/Menu/MenuComponent.tsx#L86) to identify the container causing the yellow outline on click. The issue likely stems from a missing 'outline: none' CSS property on the focused element. Check if there is a global style or a library like react virtualized that sets an outline. The fix is to add CSS to remove the outline for menu items. Test by clicking the menu after the change.