Skip to content

Commit

Permalink
feat(dropdown): optional stuck addition item
Browse files Browse the repository at this point in the history
When using a search dropdown, having allowAdditions activated and hideAdditions disabled, every time the user types something in the input, it is prepended in the menu.
Perhaps, in some cases, the user may not be aware that he has an addition option in the dropdown to click on :

there is no value selected yet in the dropdown. The user clicks on it, scrolls down, begins to type something, but there is so much results shown in the menu that the first line with the addition message displayed isn't shown
there is a value selected in the dropdown. The user clicks on it, and the value is displayed within the menu, but it is like the 50th element on 100. The scrollbar is half way. The user begins to type something else, and it doesn't show the first line with the addition message
It is even more remarkable if fullTextSearch equals true, a fuzzy search could display a lof of results while typing an addition.
If the user isn't used to that option, he may miss it or don't fully understand this option.

To activate this in dropdown, one has to add `className: {addition: 'stuck addition'}`
  • Loading branch information
xamey committed Aug 18, 2022
1 parent 4585cd0 commit 75cb2d5
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 0 deletions.
10 changes: 10 additions & 0 deletions src/definitions/modules/dropdown.less
Expand Up @@ -572,6 +572,16 @@ select.ui.dropdown {
display: none;
}

/* User addition item */
.ui.dropdown > .menu > .stuck.addition.item:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: @selectionVisibleBoxShadow;
background: @menuBackground;
z-index: @additionZIndex;
}

/* Hover */
.ui.selection.dropdown:hover {
border-color: @selectionHoverBorderColor;
Expand Down
3 changes: 3 additions & 0 deletions src/themes/default/modules/dropdown.variables
Expand Up @@ -287,6 +287,9 @@
States
--------------------*/

/* Addition */
@additionZIndex: @hoveredZIndex + 1;

/* Hovered */
@hoveredItemBackground: @transparentBlack;
@hoveredItemColor: @selectedTextColor;
Expand Down

0 comments on commit 75cb2d5

Please sign in to comment.