feat(select): add scroll indicators showing when there is hidden items - #775
Open
MichaelMure wants to merge 1 commit into
Open
feat(select): add scroll indicators showing when there is hidden items#775MichaelMure wants to merge 1 commit into
MichaelMure wants to merge 1 commit into
Conversation
Disclaimer: tool assisted change.
Select and MultiSelect have this issue that there is no visual indication showing if there is items outside of the visible range. This leads to viewer being mislead of confused, not recognising what could be selected or what is selected at the moment. Paired with pre-selecting fields that trigger pre-scrolling, extreme case can show a single selected items while there is more items available when scrolling up.
This PR adds scrolling indicators for both Select and MultiSelect, with the behavior descrived below:
## Scroll indicators for Select and MultiSelect
### Basic indicator placement
When the list is taller than the visible area, arrows appear **inline** on the first and last visible items to signal hidden content. The field height never changes.
```
βββββββββββββββββββ
β Pick a fruit β Items above are hidden β β on first visible line
β β Apple β β scroll up indicator, on same line as item text
β Banana β
β > Cherry β β cursor
β Date β
β β Elderberry β β scroll down indicator
βββββββββββββββββββ Items below are hidden β β on last visible line
```
No new rows are added β the arrows share the line with the option text.
---
### No hidden content β no indicator
When all items fit in the viewport, or when the cursor has reached the actual end of the list, there is simply nothing to indicate.
```
βββββββββββββββββββ
β Pick a fruit β
β Apple β β no β: nothing is hidden above
β Banana β
β Cherry β
β > Date β β no β: nothing is hidden below
βββββββββββββββββββ
```
---
### Arrow suppressed when cursor is on the edge item
If the cursor happens to sit on the first or last visible item while content is hidden in that direction, that arrow is omitted β it can't share the line with the cursor.
```
βββββββββββββββββββ
β Pick a fruit β Items above are still hidden, but β is suppressed
β > Apple β β cursor here, so no β on this line
β Banana β
β Cherry β
β β Date β
βββββββββββββββββββ
```
---
### Lookahead scrolling keeps the indicator alive
When navigating, the viewport scrolls **one item early** so the indicator stays visible. The cursor rests at second-from-edge while more content exists in that direction.
Pressing **β** repeatedly (items 1β8, viewport shows 4 at a time):
```
Step 1 β cursor on item 2 Step 2 β cursor on item 3 Step 3 β cursor on item 4
βββββββββββββββ βββββββββββββββ βββββββββββββββ
β Item 1 β β Item 1 β β Item 2 β
β > Item 2 β β cursor β Item 2 β β Item 3 β
β Item 3 β β > Item 3 β β cursor β > Item 4 β β cursor
β β Item 4 β β indicator β β Item 4 β β indicator β β Item 5 β β indicator
βββββββββββββββ βββββββββββββββ βββββββββββββββ
viewport scrolled
```
The cursor never lands on the β row while more items exist below β the viewport shifts to keep one item ahead visible.
Once the cursor reaches the **actual last item**, there is nothing below, so the indicator disappears and the cursor sits at the bottom naturally:
```
βββββββββββββββ
β Item 5 β
β Item 6 β
β Item 7 β
β > Item 8 β β last item, no β indicator
βββββββββββββββ
```
---
### Small viewport (β€ 2 items visible) β no indicators
With only 1 or 2 items visible there is no room to maintain the lookahead invariant, so indicators are suppressed and normal cursor-tracking scrolling is used instead.
```
βββββββββββββββ
β > Item 3 β β no β, no β, even if items exist above and below
β Item 4 β
βββββββββββββββ
```
---
### Inline select β no indicators
The horizontal single-item select already has its own `β` / `β` navigation indicators and is unaffected.
```
β Cherry β
```
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Disclaimer: tool assisted change, but with heavy cleanups
Select and MultiSelect have this issue that there is no visual indication showing if there is items outside of the visible range. This leads to viewer being mislead of confused, not recognising what could be selected or what is selected at the moment. Paired with pre-selecting fields that trigger pre-scrolling, extreme case can show a single selected items while there is more items available when scrolling up.
This PR adds scrolling indicators for both Select and MultiSelect, with the behavior descrived below:
Scroll indicators for Select and MultiSelect
Basic indicator placement
When the list is taller than the visible area, arrows appear inline on the first and last visible items to signal hidden content. The field height never changes.
No new rows are added β the arrows share the line with the option text.
No hidden content β no indicator
When all items fit in the viewport, or when the cursor has reached the actual end of the list, there is simply nothing to indicate.
Arrow suppressed when cursor is on the edge item
If the cursor happens to sit on the first or last visible item while content is hidden in that direction, that arrow is omitted β it can't share the line with the cursor.
Lookahead scrolling keeps the indicator alive
When navigating, the viewport scrolls one item early so the indicator stays visible. The cursor rests at second-from-edge while more content exists in that direction.
Pressing β repeatedly (items 1β8, viewport shows 4 at a time):
The cursor never lands on the β row while more items exist below β the viewport shifts to keep one item ahead visible.
Once the cursor reaches the actual last item, there is nothing below, so the indicator disappears and the cursor sits at the bottom naturally:
Small viewport (β€ 2 items visible) β no indicators
With only 1 or 2 items visible there is no room to maintain the lookahead invariant, so indicators are suppressed and normal cursor-tracking scrolling is used instead.
Inline select β no indicators
The horizontal single-item select already has its own
β/βnavigation indicators and is unaffected.CONTRIBUTING.md.