Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added keyboard support when navigating suggested usernames #1122

Merged
merged 13 commits into from
May 2, 2024
Merged

Added keyboard support when navigating suggested usernames #1122

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3b36d8d
added keyboard support when navigating suggested usernames
balsa-asanovic Mar 27, 2024
b5d0869
when starting to scroll using arrow up, it started from one before last
balsa-asanovic Apr 8, 2024
25c8063
In case of empty suggestions array, blank dropdown was shown
balsa-asanovic Apr 8, 2024
a08eea0
Closing dropdown on Escape button press
balsa-asanovic Apr 8, 2024
00b6c53
Hiding suggestions on Tab press fixes unexpected behavior #1124
balsa-asanovic Apr 8, 2024
1a99b2c
Code simplification. The same action for two cases in a switch
balsa-asanovic Apr 8, 2024
5170908
added some unit test for usernames suggestions
balsa-asanovic Apr 16, 2024
70b7f74
added more tests for username suggestions functionality
balsa-asanovic Apr 18, 2024
33fa3ad
Merge branch 'openSUSE:master' into keyboard-support-username-autosug…
balsa-asanovic Apr 30, 2024
ff1cdb9
corrections to first user test cases
balsa-asanovic Apr 30, 2024
1fcc14c
focus now comes back to input after click in dropdown
balsa-asanovic Apr 30, 2024
eed3917
web: Please ESLint
dgdavid May 2, 2024
3b0ab83
update to changes file
balsa-asanovic May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions web/src/components/users/FirstUser.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const UserData = ({ user, actions }) => {
);
};

const UsernameSuggestions = ({ entries, onSelect, setInsideDropDown }) => {
const UsernameSuggestions = ({ entries, onSelect, setInsideDropDown, focusedIndex = -1 }) => {
return (
<Menu
aria-label={_("Username suggestion dropdown")}
Expand All @@ -96,6 +96,7 @@ const UsernameSuggestions = ({ entries, onSelect, setInsideDropDown }) => {
<MenuItem
key={index}
itemId={index}
isFocused={focusedIndex === index}
onClick={() => onSelect(suggestion)}
>
{ /* TRANSLATORS: dropdown username suggestions */}
Expand Down Expand Up @@ -131,6 +132,8 @@ export default function FirstUser() {
const [isSettingPassword, setIsSettingPassword] = useState(false);
const [showSuggestions, setShowSuggestions] = useState(false);
const [insideDropDown, setInsideDropDown] = useState(false);
const [focusedIndex, setFocusedIndex] = useState(-1);
const [suggestions, setSuggestions] = useState([]);

useEffect(() => {
cancellablePromise(client.users.getUser()).then(userValues => {
Expand Down Expand Up @@ -220,11 +223,38 @@ export default function FirstUser() {
const submitDisable = formValues.userName === "" || (isSettingPassword && !usingValidPassword);

const displaySuggestions = !formValues.userName && formValues.fullName && showSuggestions;
useEffect(() => {
if (displaySuggestions) {
setFocusedIndex(-1);
setSuggestions(suggestUsernames(formValues.fullName));
}
}, [displaySuggestions, formValues.fullName]);

const onSuggestionSelected = (suggestion) => {
setInsideDropDown(false);
setFormValues({ ...formValues, userName: suggestion });
dgdavid marked this conversation as resolved.
Show resolved Hide resolved
};

const handleKeyDown = (event) => {
switch (event.key) {
case 'ArrowDown':
event.preventDefault(); // Prevent page scrolling
setFocusedIndex((prevIndex) => (prevIndex + 1) % suggestions.length);
break;
case 'ArrowUp':
event.preventDefault(); // Prevent page scrolling
setFocusedIndex((prevIndex) => (prevIndex - 1 + suggestions.length) % suggestions.length);
Copy link
Contributor

@dgdavid dgdavid Apr 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this code, when pressing the Arrow Up when suggestion does not have the focus yet, the next-to-last suggestion get focused instead of the last one.

For example, having 4 suggestions (index from 0 to 3):

FirstUser.jsx:247 prevIndex: -1
FirstUser.jsx:248 suggestions.length: 4
FirstUser.jsx:249 result of (prevIndex - 1 + suggestions.length) % suggestions.length: 2

break;
case 'Enter':
if (focusedIndex >= 0) {
onSuggestionSelected(suggestions[focusedIndex]);
}
break;
default:
dgdavid marked this conversation as resolved.
Show resolved Hide resolved
break;
}
};

if (isLoading) return <Skeleton />;

return (
Expand Down Expand Up @@ -266,14 +296,16 @@ export default function FirstUser() {
label={_("Username")}
isRequired
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<If
condition={displaySuggestions}
then={
<UsernameSuggestions
entries={suggestUsernames(formValues.fullName)}
entries={suggestions}
onSelect={onSuggestionSelected}
setInsideDropDown={setInsideDropDown}
focusedIndex={focusedIndex}
/>
}
/>
Expand Down