fix: fix #input and #textarea empty value change

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 })
     }
   }

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(
+      <Component
+        {...props}
+        value={initValue}
+        on_change={on_change}
+        onKeyDown={onKeyDown} // additional native event test
+      />
+    )
+
+    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)

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)) {

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', () => {

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 [
         <Box>
           <form
             onSubmit={event => {
-              console.log('onSubmit', event)
+              // console.log('onSubmit', event)
               event.preventDefault()
               // event.persist()
             }}
           >
-            <Input
-              label="Label:"
-              on_change={event => {
-                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 ..."
-            />
+            <InputUpdate />
             <Button
               text="Submit"
               type="submit"
@@ -218,3 +203,33 @@ export default [
     </CustomStyle>
   )
 ]
+
+const InputUpdate = () => {
+  const [initValue, setNewValue] = useState('Input ...')
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setNewValue('')
+    }, 1e3)
+    return () => clearTimeout(timeoutId)
+  })
+
+  return (
+    <Input
+      label="Label:"
+      on_change={({ value }) => {
+        console.log('on_change', value)
+      }}
+      onChange={({ value }) => {
+        console.log('onChange', value)
+      }}
+      on_submit={({ value }) => {
+        console.log('on_submit', value)
+      }}
+      onSubmit={({ value }) => {
+        console.log('onSubmit', value)
+      }}
+      value={initValue}
+    />
+  )
+}