Combobox: 🚸 hide caret on select (until options list opened) #3071
Conversation
🦋 Changeset detectedLatest commit: 4702bfc The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| @@ -69,6 +71,7 @@ const InputProvider = ({ children, value: props }: Props) => { | |||
| const inputRef = useRef<HTMLInputElement | null>(null); | |||
| const toggleOpenButtonRef = useRef<HTMLButtonElement>(null); | |||
| const [internalValue, setInternalValue] = useState<string>(defaultValue); | |||
| const [showCaret, setShowCaret] = useState(true); | |||
There was a problem hiding this comment.
ideally I wanted to solve this with pure CSS, but on some deliberation, I found it to require a state / state-machine.
"when you open the list of suggestions / focus the input show blinking caret, but don't show it even when focused if the user recently selected something"
Storybook demoEndringer til review: 430f91d5ae | 88 komponenter | 139 stories |
| onPointerUp={() => toggleIsListOpen()} | ||
| onPointerUp={() => { | ||
| toggleIsListOpen(); | ||
| focusInput(); |
There was a problem hiding this comment.
I added focusInput() here because it seemed like a bug to not focus the input when you toggle the "show list of selections" via clicking on the button? 🤔 At least this seems like intended behavior now (post change).
There was a problem hiding this comment.
Might argue that its as intended for not focusing input. For desktopusers it might be nice to save a click, but for mobile/touch users a virtual keyboard will pop up when a textfield is focused. This might be worse then since if they wanted to type, they would have clicked the input.
There was a problem hiding this comment.
True, can argue for both. I did some testing just now however, and it seems like the behaviour is already like this on mobile? 🤔 (maybe I'm just not precise enough with my taps, and keep missing the dropdown button). If so it's not going to change anything on mobile.
I'd argue that since the arrow is visually "inside" the border rectangle.
Then this is an ok change? I'll remove it if you have a stronger opinion on it of course.
There was a problem hiding this comment.
I think I agree about this change. The only issue I see is that the focus is lost while the pointer is down, so that the focus border appears to blink.
I think the argument about the arrow being inside the border makes sense. Even though it might be annoying that the virtual keyboard pops up, you might not understand that you can write/search otherwise.
JulianNymark
changed the title
|
Should the caret be hidden in multiselect Comboboxes? (It is now) For these, we can still select more values, so maybe we should indicate this by showing the caret? We could possibly hide it if the maximum selected options is reached. 🤔 Also, clicking the input field should probably show the caret again. Right now the user has to click outside the Combobox or open the list to bring back the caret. (Or start typing, which is a hidden feature) |
yeah... a bit unfortunate, I think it's because it's technically focused, but not virtually focused? 🤔 |
Should be fixed now (with more edge-case code logic 🙈 ) |
|
I also fixed the broken placeholder in this branch (seems like overkill to make a whole branch for that, it has its own internal story too, don't want to talk loudly about placeholders 🙊 ) |
|
Would it make sense to hide the caret when in multiselect mode and |
Yeah, @it-vegard also suggested that above (i'm still struggling to bring the isLimitReached state change into the useCallback hook 😳, trying different things with useRef, but it seems to break things...), at least it's now always on for multiselect, which is a step better. Getting the caret to be hidden on reaching the limit. |
|
it seems to be perfect now! (fixes all the mentioned issues) 🤞 |
@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
Outdated
Show resolved
Hide resolved
@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
Outdated
Show resolved
Hide resolved
@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx
Show resolved
Hide resolved
@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx
Show resolved
Hide resolved
@navikt/core/react/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx
Outdated
Show resolved
Hide resolved
|
Remember changeset ;) |
…ptionsContext.tsx Co-authored-by: Halvor Haugan <[email protected]>
Co-authored-by: Halvor Haugan <[email protected]>
HalvorHaugan
changed the title
combobox hide caret on selection (mouse or keyboard)
closes #2891
Hides the blinking cursor/caret when it's appropriate (on isLimitReached for multiSelect, and also on selection for single select). Should help indicate that "there is nothing more to do here" in the combobox.
closes https://github.com/navikt/team-aksel/issues/568
Fixes the placeholder bug, so placeholders will disappear when an option is selected.
ticks box in https://github.com/navikt/team-aksel/issues/524: Når bruker velger noe med "Enter" slutter "input-cursor å blinke (frem til de begynner å skrive på nytt)