🐛 settings add tabs with numpad enter works

Signed-off-by: Marc Nuri <[email protected]>
manusa · Nov 18, 2022 · 2cd2837 · 2cd2837
1 parent 4a29e53
commit 2cd2837
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/settings/__tests__/settings.browser.test.mjs b/src/settings/__tests__/settings.browser.test.mjs
@@ -85,12 +85,15 @@ describe('Settings in Browser test suite', () => {
       await waitFor(() => expect($input.value).toBe('A'));
       expect($tabContainer.childElementCount).toBe(2);
     });
-    describe('keydown event, Enter key with URLS', () => {
+    describe.each([
+      'Enter',
+      'NumpadEnter'
+    ])('keydown event, "%s" key with URLS', code => {
       test('Empty URL, should do nothing', async () => {
         // Given
         fireEvent.input($input, {target: {value: ''}});
         // When
-        fireEvent.keyDown($input, {code: 'Enter'});
+        fireEvent.keyDown($input, {code});
         // Then
         expect($tabContainer.childElementCount).toBe(2);
         expect($addTabButton.hasAttribute('disabled')).toBe(true);
@@ -100,7 +103,7 @@ describe('Settings in Browser test suite', () => {
         // Given
         fireEvent.input($input, {target: {value: 'invalid:1337:url'}});
         // When
-        fireEvent.keyDown($input, {code: 'Enter'});
+        fireEvent.keyDown($input, {code});
         // Then
         expect($tabContainer.childElementCount).toBe(2);
         await waitFor(() =>
@@ -114,7 +117,7 @@ describe('Settings in Browser test suite', () => {
         // Given
         fireEvent.input($input, {target: {value: 'info.cern.ch'}});
         // When
-        fireEvent.keyDown($input, {code: 'Enter'});
+        fireEvent.keyDown($input, {code});
         // Then
         await waitFor(() =>
           expect($tabContainer.childElementCount).toBe(3));
@@ -129,7 +132,7 @@ describe('Settings in Browser test suite', () => {
         // Given
         fireEvent.input($input, {target: {value: 'http://info.cern.ch'}});
         // When
-        fireEvent.keyDown($input, {code: 'Enter'});
+        fireEvent.keyDown($input, {code});
         // Then
         await waitFor(() =>
           expect($tabContainer.childElementCount).toBe(3));

diff --git a/src/settings/settings.browser.mjs b/src/settings/settings.browser.mjs
@@ -17,7 +17,7 @@ const {ipcRenderer} = window;
 
 import {APP_EVENTS, html, render, useReducer, Checkbox, IconButton, TopAppBar} from '../components/index.mjs';
 import {
-  ACTIONS, reducer, dictionariesEnabled, setTabProperty, toggleTabProperty
+  ACTIONS, reducer, addTab, dictionariesEnabled, setTabProperty, toggleTabProperty
 } from './settings.reducer.browser.mjs';
 import {
   OtherContainer
@@ -106,10 +106,10 @@ const Settings = ({initialState}) => {
     type: ACTIONS.UPDATE_NEW_TAB_VALUE,
     payload: value
   });
-  const addTab = () => dispatch({type: ACTIONS.ADD});
+  const onAddTab = addTab({dispatch});
   const onNewKeyDown = ({code}) => {
-    if (code === 'Enter') {
-      addTab();
+    if (code === 'Enter' || code === 'NumpadEnter') {
+      onAddTab();
     }
   };
   const save = () => ipcRenderer.send(APP_EVENTS.settingsSave, {
@@ -140,7 +140,7 @@ const Settings = ({initialState}) => {
               onkeydown=${onNewKeyDown}
             />
           </div>
-          <${SettingsButton} icon='fa-plus' onClick=${addTab} disabled=${!state.newTabValid} />
+          <${SettingsButton} icon='fa-plus' onClick=${onAddTab} disabled=${!state.newTabValid} />
         </div>
         <div class="settings__tabs container field">
           ${state.tabs.map(tab => (html`

diff --git a/src/settings/settings.reducer.browser.mjs b/src/settings/settings.reducer.browser.mjs
@@ -143,6 +143,8 @@ export const reducer = (state, action) => {
 };
 
 // Action creators
+export const addTab = ({dispatch}) =>
+  () => dispatch({type: ACTIONS.ADD});
 export const setTabProperty = ({dispatch, property, value, id}) =>
   dispatch({type: ACTIONS.SET_TAB_PROPERTY, payload: {id, property, value}});
 export const setTheme = ({dispatch}) =>