Added keyboard support when navigating suggested usernames #1122

balsa-asanovic · 2024-03-27T23:51:26Z

Problem

In #1022 the username auto-suggest feature was introduced, but the dropdown with usernames didn't support keyboard navigation.

This PR aims to solve this, It introduces navigation with arrow keys (up and down) and sets the value on the press of Enter.

fixes #1070

Solution

Now checking for keyboard events on the username input field and on the arrow presses changing the index of the selected menu item, highlighting the appropriate one. On the press of Enter, again using the current value of index, the text input is populated with a value from the usernames array.

Testing

Tested manually

Screenshots

dgdavid · 2024-04-02T14:45:05Z

web/src/components/users/FirstUser.jsx

+        break;
+      case 'ArrowUp':
+        event.preventDefault(); // Prevent page scrolling
+        setFocusedIndex((prevIndex) => (prevIndex - 1 + suggestions.length) % suggestions.length);


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

dgdavid

Ey @balsa-asanovic,

Thank you for this one. I have had a quick look and added two minor comments, but I'd like to think a about it a bit more to see if there is another approach not using these two new internal pieces of state in the component. Nothing again them, but maybe we can avoid the extra re-renders when the focused suggestion change.

Meanwhile, I think we can go ahead adding the tests for this feature because it does not depend on the implementation. Let me know if you need help with these tests.

web/src/components/users/FirstUser.jsx

This fixes the issue, as it doesn't substract -1 when starting with arrow up

…ct#1124

web/src/components/users/FirstUser.test.jsx

…gest

balsa-asanovic · 2024-04-30T22:07:35Z

Hey @dgdavid

Addressed the comments.

Sorry for the big delay in dealing with these small issues.

Just saying, maybe there is a better, more elegant solution.

I went with the ref choice, since I didn't come up with anything better.
I am not sure here, why does it lose focus in the first place when using click action, but with the keyboard it remains.. 🤔

dgdavid · 2024-05-02T09:34:26Z

Hey @dgdavid

Addressed the comments.

Sorry for the big delay in dealing with these small issues.

No problem at all!

Just saying, maybe there is a better, more elegant solution.

I went with the ref choice, since I didn't come up with anything better. I am not sure here, why does it lose focus in the first place when using click action, but with the keyboard it remains.. 🤔

Honestly, I'm a bit lost with such an issue too. I have tracked it in my personal todo list in order to understand why it happens there when I've time to do so. But, unfortunately, it will have to wait.

dgdavid

@balsa-asanovic

Once more, thanks a ton!

I've fixed minor ESLint complains and... will merge as soon as everything is green in CI.

coveralls · 2024-05-02T09:41:49Z

coverage: 75.077% (+0.02%) from 75.053%
when pulling 3b0ab83 on balsa-asanovic:keyboard-support-username-autosuggest
into 7e43d58 on openSUSE:master.

dgdavid · 2024-05-02T10:14:50Z

will merge as soon as everything is green in CI.

Ouch!

Do you mind add an entry in the changes file? Or do you prefer that I add it?

balsa-asanovic · 2024-05-02T10:59:57Z

will merge as soon as everything is green in CI.

Ouch!

Do you mind add an entry in the changes file? Or do you prefer that I add it?

Don't mind at all, I'll add it soon.

balsa-asanovic · 2024-05-02T11:13:09Z

@dgdavid Added entry to changes file.

dgdavid · 2024-05-02T13:05:04Z

Great! Thanks!

Prepare for releasing Agama 8. It includes the following pull requests: * #884 * #886 * #914 * #918 * #956 * #957 * #958 * #959 * #960 * #961 * #962 * #963 * #964 * #965 * #966 * #969 * #970 * #976 * #977 * #978 * #979 * #980 * #981 * #983 * #984 * #985 * #986 * #988 * #991 * #992 * #995 * #996 * #997 * #999 * #1003 * #1004 * #1006 * #1007 * #1008 * #1009 * #1010 * #1011 * #1012 * #1014 * #1015 * #1016 * #1017 * #1020 * #1022 * #1023 * #1024 * #1025 * #1027 * #1028 * #1029 * #1030 * #1031 * #1032 * #1033 * #1034 * #1035 * #1036 * #1038 * #1039 * #1041 * #1042 * #1043 * #1045 * #1046 * #1047 * #1048 * #1052 * #1054 * #1056 * #1057 * #1060 * #1061 * #1062 * #1063 * #1064 * #1066 * #1067 * #1068 * #1069 * #1071 * #1072 * #1073 * #1074 * #1075 * #1079 * #1080 * #1081 * #1082 * #1085 * #1086 * #1087 * #1088 * #1089 * #1090 * #1091 * #1092 * #1093 * #1094 * #1095 * #1096 * #1097 * #1098 * #1099 * #1100 * #1102 * #1103 * #1104 * #1105 * #1106 * #1109 * #1110 * #1111 * #1112 * #1114 * #1116 * #1117 * #1118 * #1119 * #1120 * #1121 * #1122 * #1123 * #1125 * #1126 * #1127 * #1128 * #1129 * #1130 * #1131 * #1132 * #1133 * #1134 * #1135 * #1136 * #1138 * #1139 * #1140 * #1141 * #1142 * #1143 * #1144 * #1145 * #1146 * #1147 * #1148 * #1149 * #1151 * #1152 * #1153 * #1154 * #1155 * #1156 * #1157 * #1158 * #1160 * #1161 * #1162 * #1163 * #1164 * #1165 * #1166 * #1167 * #1168 * #1169 * #1170 * #1171 * #1172 * #1173 * #1174 * #1175 * #1177 * #1178 * #1180 * #1181 * #1182 * #1183 * #1184 * #1185 * #1187 * #1188 * #1189 * #1190 * #1191 * #1192 * #1193 * #1194 * #1195 * #1196 * #1198 * #1199 * #1200 * #1201 * #1203 * #1204 * #1205 * #1206 * #1207 * #1208 * #1209 * #1210 * #1211 * #1212 * #1213 * #1214 * #1215 * #1216 * #1217 * #1219 * #1220 * #1221 * #1222 * #1223 * #1224 * #1225 * #1226 * #1227 * #1229

ancorgs · 2024-05-17T18:15:56Z

ntioned in the announcement of Agama 8.

Thanks for your contributions!

added keyboard support when navigating suggested usernames

3b36d8d

dgdavid reviewed Apr 2, 2024

View reviewed changes

This comment was marked as off-topic.

Sign in to view

dgdavid reviewed Apr 2, 2024

View reviewed changes

web/src/components/users/FirstUser.jsx Show resolved Hide resolved

dgdavid mentioned this pull request Apr 3, 2024

web: unexpected user suggestions behavior #1124

Closed

This comment was marked as resolved.

Sign in to view

balsa-asanovic added 5 commits April 8, 2024 23:53

when starting to scroll using arrow up, it started from one before last

b5d0869

This fixes the issue, as it doesn't substract -1 when starting with arrow up

In case of empty suggestions array, blank dropdown was shown

25c8063

Closing dropdown on Escape button press

a08eea0

Hiding suggestions on Tab press fixes unexpected behavior agama-proje…

00b6c53

…ct#1124

Code simplification. The same action for two cases in a switch

1a99b2c

This comment was marked as resolved.

Sign in to view

added some unit test for usernames suggestions

5170908

This comment was marked as resolved.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment was marked as off-topic.

Sign in to view

added more tests for username suggestions functionality

70b7f74

This comment was marked as outdated.

Sign in to view

dgdavid reviewed Apr 19, 2024

View reviewed changes

web/src/components/users/FirstUser.test.jsx Outdated Show resolved Hide resolved

web/src/components/users/FirstUser.test.jsx Outdated Show resolved Hide resolved

dgdavid reviewed Apr 19, 2024

View reviewed changes

web/src/components/users/FirstUser.test.jsx Outdated Show resolved Hide resolved

dgdavid reviewed Apr 19, 2024

View reviewed changes

web/src/components/users/FirstUser.test.jsx Outdated Show resolved Hide resolved

dgdavid reviewed Apr 19, 2024

View reviewed changes

web/src/components/users/FirstUser.test.jsx Outdated Show resolved Hide resolved

This comment was marked as outdated.

Sign in to view

balsa-asanovic added 3 commits April 30, 2024 19:47

Merge branch 'openSUSE:master' into keyboard-support-username-autosug…

33fa3ad

…gest

corrections to first user test cases

ff1cdb9

focus now comes back to input after click in dropdown

1fcc14c

web: Please ESLint

eed3917

dgdavid approved these changes May 2, 2024

View reviewed changes

update to changes file

3b0ab83

dgdavid merged commit 13ddc2e into agama-project:master May 2, 2024
1 check passed

imobachgs mentioned this pull request May 17, 2024

Update to release 8 #1232

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added keyboard support when navigating suggested usernames #1122

Added keyboard support when navigating suggested usernames #1122

balsa-asanovic commented Mar 27, 2024 •

edited

Loading

dgdavid Apr 2, 2024 •

edited

Loading

dgdavid left a comment

This comment was marked as off-topic.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as off-topic.

This comment was marked as outdated.

This comment was marked as outdated.

balsa-asanovic commented Apr 30, 2024

dgdavid commented May 2, 2024

dgdavid left a comment •

edited

Loading

coveralls commented May 2, 2024 •

edited

Loading

dgdavid commented May 2, 2024

balsa-asanovic commented May 2, 2024

balsa-asanovic commented May 2, 2024

dgdavid commented May 2, 2024

ancorgs commented May 17, 2024

Added keyboard support when navigating suggested usernames #1122

Added keyboard support when navigating suggested usernames #1122

Conversation

balsa-asanovic commented Mar 27, 2024 • edited Loading

Problem

Solution

Testing

Screenshots

dgdavid Apr 2, 2024 • edited Loading

Choose a reason for hiding this comment

dgdavid left a comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as outdated.

This comment was marked as off-topic.

This comment was marked as outdated.

This comment was marked as outdated.

balsa-asanovic commented Apr 30, 2024

dgdavid commented May 2, 2024

dgdavid left a comment • edited Loading

Choose a reason for hiding this comment

coveralls commented May 2, 2024 • edited Loading

dgdavid commented May 2, 2024

balsa-asanovic commented May 2, 2024

balsa-asanovic commented May 2, 2024

dgdavid commented May 2, 2024

ancorgs commented May 17, 2024

balsa-asanovic commented Mar 27, 2024 •

edited

Loading

dgdavid Apr 2, 2024 •

edited

Loading

dgdavid left a comment •

edited

Loading

coveralls commented May 2, 2024 •

edited

Loading