fix(ToggleButton): fixes error when pressing enter (#2183)

* fix(ToggleButton): fixes error when pressing enter * Add a test --------- Co-authored-by: Tobias Høegh <tobias@tujo.no>
dnbexperience · May 31, 2023 · a5188da · a5188da
1 parent ea811e5
commit a5188da
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js b/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.js
@@ -205,15 +205,15 @@ export default class ToggleButton extends React.PureComponent {
   onKeyDownHandler = (event) => {
     switch (keycode(event)) {
       case 'enter':
-        this.onClickHandler(event)
+        this.onClickHandler({ event })
         break
     }
   }
 
   onKeyUpHandler = (event) => {
     switch (keycode(event)) {
       case 'enter':
-        this.onClickHandler(event)
+        this.onClickHandler({ event })
         break
     }
   }
@@ -232,7 +232,7 @@ export default class ToggleButton extends React.PureComponent {
       return
     }
 
-    // else we change the checked sstate
+    // else we change the checked state
     const checked = !this.state.checked
     this.setState({
       checked,

diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx
@@ -3,7 +3,7 @@
  *
  */
 
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 import {
   mount,
@@ -235,6 +235,19 @@ describe('ToggleButton component', () => {
     )
   })
 
+  it('should support enter key', () => {
+    const onChange = jest.fn()
+    render(<Component on_change={onChange} />)
+
+    const element = document.querySelector('button')
+
+    fireEvent.keyDown(element, { keyCode: 13 }) // enter
+    expect(onChange).toHaveBeenCalledTimes(1)
+
+    fireEvent.keyUp(element, { keyCode: 13 }) // enter
+    expect(onChange).toHaveBeenCalledTimes(2)
+  })
+
   it('should support spacing props', () => {
     render(<Component top="2rem" />)