Search bar improvements (eclipse#662)

* Search bar improvements * Remove 'Space' key in extension-list-header.tsx Change charCode 13 to key 'Enter' in namespace-input.tsx --------- Co-authored-by: amvanbaren <aart.vanbaren@eclipse-foundation.org>
che-incubator · Jul 18, 2023 · ccc8b45 · ccc8b45
1 parent dd38653
commit ccc8b45
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/webui/src/pages/admin-dashboard/namespace-input.tsx b/webui/src/pages/admin-dashboard/namespace-input.tsx
@@ -71,7 +71,7 @@ export const StyledInput: FunctionComponent<InputProps> = props => {
             placeholder={props.placeholder}
             onChange={onChangeInputValue}
             onKeyPress={(e: React.KeyboardEvent) => {
-                if (e.charCode === 13 && props.onSubmit) {
+                if (e.key === 'Enter' && props.onSubmit) {
                     props.onSubmit(inputValue);
                 }
             }}

diff --git a/webui/src/pages/extension-list/extension-list-header.tsx b/webui/src/pages/extension-list/extension-list-header.tsx
@@ -217,6 +217,13 @@ class ExtensionListHeaderComp extends React.Component<ExtensionListHeaderComp.Pr
                                 <Box
                                     className={classes.resultSortOrder}
                                     title={this.state.sortOrder === 'asc' ? 'Ascending' : 'Descending'}
+                                    tabIndex={0}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            this.handleSortOrderChange();
+                                        }
+                                    }}
                                     onClick={this.handleSortOrderChange}>
                                     {
                                         this.state.sortOrder === 'asc' ?

diff --git a/webui/src/pages/extension-list/extension-list-searchfield.tsx b/webui/src/pages/extension-list/extension-list-searchfield.tsx
@@ -72,8 +72,10 @@ export const ExtensionListSearchfield: FunctionComponent<ExtensionListSearchfiel
                 className={classes.input}
                 placeholder={props.placeholder}
                 id='search-input'
+                type='search'
+                inputMode='search'
                 onKeyPress={(e: React.KeyboardEvent) => {
-                    if (e.charCode === 13 && props.onSearchSubmit) {
+                    if (e.key === 'Enter' && props.onSearchSubmit) {
                         props.onSearchSubmit(props.searchQuery || '');
                     }
                 }}