diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
index 198ee8cb738..0a45aaaaf63 100644
--- a/packages/dnb-ui-lib/src/components/input/Input.js
+++ b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -148,11 +148,7 @@ export default class Input extends PureComponent {
static getDerivedStateFromProps(props, state) {
const value = Input.getValue(props)
- if (
- state._listenForPropChanges &&
- value !== null &&
- value !== state.value
- ) {
+ if (state._listenForPropChanges && value !== state.value) {
state.value = value
}
if (props.input_state) {
@@ -222,8 +218,9 @@ export default class Input extends PureComponent {
dispatchCustomElementEvent(this, 'on_change', { value, event })
}
onKeyDownHandler = event => {
+ const value = event.target.value
+ dispatchCustomElementEvent(this, 'on_key_down', { value, event })
if (event.key === 'Enter') {
- const { value } = event.target
dispatchCustomElementEvent(this, 'on_submit', { value, event })
}
}
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js
index c559fee0fa8..791d2456e8d 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/Input.test.js
@@ -66,23 +66,64 @@ describe('Input component', () => {
'false'
)
- const value = 'new value'
- Comp.find('input').simulate('change', { target: { value } })
+ const newValue = 'new value'
+ Comp.find('input').simulate('change', { target: { value: newValue } })
expect(Comp.find('.dnb-input__shell').prop('data-has-content')).toBe(
'true'
)
- expect(Comp.state().value).toBe(value)
+ expect(Comp.state().value).toBe(newValue)
+ })
+
+ it('events gets emmited correctly: "on_change" and "onKeyDown"', () => {
+ const initValue = 'init value'
+ const newValue = 'new value'
+ const emptyValue = null // gets emmited also on values as null
+
+ const on_change = jest.fn()
+ const onKeyDown = jest.fn() // additional native event test
+
+ const Comp = mount(
+
+ )
+
+ expect(Comp.state().value).toBe(initValue)
+
+ Comp.find('input').simulate('change', {
+ target: { value: newValue }
+ })
+ expect(on_change.mock.calls.length).toBe(1)
+ expect(Comp.state().value).toBe(newValue)
+
+ Comp.find('input').simulate('change', {
+ target: { value: emptyValue }
+ })
+ expect(on_change.mock.calls.length).toBe(2)
+ expect(Comp.state().value).toBe(emptyValue)
+
+ // additional native event test
+ Comp.find('input').simulate('keydown', { key: 'Space', keyCode: 84 }) // space
+ expect(onKeyDown.mock.calls.length).toBe(1)
})
// make sure getDerivedStateFromProps works
it('has correct state after changeing "value" prop (set by getDerivedStateFromProps)', () => {
- const value = 'new prop value'
+ const initValue = 'new prop value'
+ const emptyValue = null
+
Comp.setProps({
- value
+ value: initValue
})
- expect(Comp.state().value).toBe(value)
+ expect(Comp.state().value).toBe(initValue)
+
+ Comp.setProps({ value: emptyValue })
+ expect(Comp.state().value).toBe(emptyValue)
// get dom node
// console.log('domNode', Comp.find('input').getDOMNode().value)
diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
index 08cf3b00ae2..bfaa6915f69 100644
--- a/packages/dnb-ui-lib/src/components/textarea/Textarea.js
+++ b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -31,10 +31,10 @@ export const propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
id: PropTypes.string,
label: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.func,
- PropTypes.node
-]),
+ PropTypes.string,
+ PropTypes.func,
+ PropTypes.node
+ ]),
label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
status: PropTypes.oneOfType([
PropTypes.string,
@@ -119,11 +119,7 @@ export default class Textarea extends PureComponent {
static getDerivedStateFromProps(props, state) {
const value = Textarea.getValue(props)
- if (
- state._listenForPropChanges &&
- value !== null &&
- value !== state.value
- ) {
+ if (state._listenForPropChanges && value !== state.value) {
state.value = value
}
if (isTrue(props.disabled)) {
diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js
index 1a1856861b3..c162e3491a0 100644
--- a/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js
+++ b/packages/dnb-ui-lib/src/components/textarea/__tests__/Textarea.test.js
@@ -69,11 +69,16 @@ describe('Textarea component', () => {
// // make sure getDerivedStateFromProps works
it('has correct state after changeing "value" prop (set by getDerivedStateFromProps)', () => {
- const value = 'new prop value'
+ const initValue = 'new prop value'
+ const emptyValue = null
+
Comp.setProps({
- value
+ value: initValue
})
- expect(Comp.state().value).toBe(value)
+ expect(Comp.state().value).toBe(initValue)
+
+ Comp.setProps({ value: emptyValue })
+ expect(Comp.state().value).toBe(emptyValue)
})
it('has to to have a prop value like value', () => {
diff --git a/packages/dnb-ui-lib/stories/components/Input.js b/packages/dnb-ui-lib/stories/components/Input.js
index 53e952e1863..2cb78f38b47 100644
--- a/packages/dnb-ui-lib/stories/components/Input.js
+++ b/packages/dnb-ui-lib/stories/components/Input.js
@@ -3,7 +3,7 @@
*
*/
-import React /* , { useState, useEffect } */ from 'react'
+import React, { useState, useEffect } from 'react'
import { Wrapper, Box } from '../helpers'
import styled from '@emotion/styled'
@@ -181,27 +181,12 @@ export default [