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 [
{ - console.log('onSubmit', event) + // console.log('onSubmit', event) event.preventDefault() // event.persist() }} > - { - console.log('on_change', event) - }} - onChange={event => { - console.log('onChange', event) - }} - on_submit={event => { - console.log('on_submit', event) - }} - onSubmit={event => { - console.log('on_submit', event) - }} - value="Input ..." - /> +