Semantic-ui: [Dropdown] Search in Menu should not have text overlap

[jlafleche]

See this fiddle: http://jsfiddle.net/x2zd9wxo/1/

There are two spans of text in the search dropdown, a black one for the text input box, and a grey one for the selection. Normally these overlap perfectly, but when a search dropdown is embedded into a menu, they are slightly offset which makes for an ugly experience. The issue is exacerbated if the menu bar's height is stretched.

[PhilLehmann]

For me, the gray one is being made invisible when I type the first letter for the search. So at least I cannot reproduce your issue. :(

[jlafleche]

To reproduce, first type a few letters (e.g. som), then use arrow keys to navigate between sub-selections.

[jlafleche]

[PhilLehmann]

Have a look at an updated fiddle: http://jsfiddle.net/x2zd9wxo/2/.

This change seems to do the trick:

.ui.search.dropdown > input.search {
    top: initial;
    margin-top: -1px;
}

The entered text seems to be bolder than the one from the item selected via cursor, but that may be intended.

[J-tt]

@philrykoff

Hello!
I am helping triage issues via codetriage.com

Have you made a pull request with these changes?
And is this still an issue?

Thanks 😄

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[Dan1ve]

Still an issue

[Shaika-K]

I'm having a similar issue. I would really appreciate it if anyone has found a method to fix this.

My goal:
I'm using a Semantic UI drop down with Vue that filters the drop down results on the search criteria.
Basically like example the the Search Selection website.

My bug:
When typing the _first_ character in my search drop down, certain characters (keys U,O,A,S,D,F,K,N) will be drawn over the placeholder text while for other characters the placeholder disappears. Not every key match with any of the word in the drop down.
I've narrowed this down to the fact that for those characters (U,O,A,S,D,F,K,N), the filtering of the drop down isn't triggered until the second character is typed.

When inspecting on developer tools, when typing the class of the Vue component is _supposed_ to be changed to 'filtered text' but for those certain characters (U,O,A,S,D,F,K,N) its left as 'text' (side note: when its blank or not touched the class is 'text filtered').

[AaronGoldsmith1]

I'm having the same issue, once text is present in the search field, it will overlap text as you scroll down the list of filtered items.

[lubber-de]

This seems to be fixed in the community fork Fomantic-UI
See http://jsfiddle.net/lubber/g9Lmsztw/