fix: fix missing on_state_update event for #input and #textarea

dnbexperience · Oct 6, 2019 · d01ff8c · d01ff8c
1 parent 66f0d2a
commit d01ff8c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 5 deletions.
diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -43,6 +43,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     on_blur={null}
     on_change={null}
     on_focus={null}
+    on_state_update={null}
     on_submit={null}
     on_submit_blur={null}
     on_submit_focus={null}

diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -29,7 +29,8 @@ const renderProps = {
   on_focus: null,
   on_blur: null,
   on_submit_focus: null,
-  on_submit_blur: null
+  on_submit_blur: null,
+  on_state_update: null
 }
 
 export const propTypes = {
@@ -99,7 +100,8 @@ export const propTypes = {
   on_focus: PropTypes.func,
   on_blur: PropTypes.func,
   on_submit_focus: PropTypes.func,
-  on_submit_blur: PropTypes.func
+  on_submit_blur: PropTypes.func,
+  on_state_update: PropTypes.func
 }
 
 export const defaultProps = {
@@ -165,6 +167,13 @@ export default class Input extends PureComponent {
       value !== 'initval' &&
       value !== state.value
     ) {
+      if (
+        value !== state.value &&
+        value !== state._value &&
+        typeof props.on_state_update === 'function'
+      ) {
+        dispatchCustomElementEvent({ props }, 'on_state_update', { value })
+      }
       state.value = value
     }
     if (props.input_state) {
@@ -208,6 +217,7 @@ export default class Input extends PureComponent {
     if (props.input_state) {
       this.state.inputState = props.input_state
     }
+    this.state._value = props.value
   }
   onFocusHandler = event => {
     const { value } = event.target

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -26,6 +26,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
         "on_blur": [Function],
         "on_change": [Function],
         "on_focus": [Function],
+        "on_state_update": [Function],
         "on_submit": [Function],
         "on_submit_blur": [Function],
         "on_submit_focus": [Function],
@@ -84,6 +85,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   on_blur={null}
   on_change={null}
   on_focus={null}
+  on_state_update={null}
   on_submit={null}
   on_submit_blur={null}
   on_submit_focus={null}
@@ -155,6 +157,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
                 "on_blur": [Function],
                 "on_change": [Function],
                 "on_focus": [Function],
+                "on_state_update": [Function],
                 "on_submit": [Function],
                 "on_submit_blur": [Function],
                 "on_submit_focus": [Function],
@@ -205,6 +208,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
           on_blur={null}
           on_change={null}
           on_focus={null}
+          on_state_update={null}
           on_submit={null}
           on_submit_blur={null}
           on_submit_focus={null}
@@ -357,6 +361,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
         "on_blur": [Function],
         "on_change": [Function],
         "on_focus": [Function],
+        "on_state_update": [Function],
         "on_submit": [Function],
         "on_submit_blur": [Function],
         "on_submit_focus": [Function],
@@ -415,6 +420,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
   on_blur={null}
   on_change={null}
   on_focus={null}
+  on_state_update={null}
   on_submit={null}
   on_submit_blur={null}
   on_submit_focus={null}

diff --git a/packages/dnb-ui-lib/src/components/textarea/Textarea.js b/packages/dnb-ui-lib/src/components/textarea/Textarea.js
@@ -25,7 +25,8 @@ import Context from '../../shared/Context'
 const renderProps = {
   on_change: null,
   on_focus: null,
-  on_blur: null
+  on_blur: null,
+  on_state_update: null
 }
 
 export const propTypes = {
@@ -74,7 +75,8 @@ export const propTypes = {
   custom_method: PropTypes.func,
   on_change: PropTypes.func,
   on_focus: PropTypes.func,
-  on_blur: PropTypes.func
+  on_blur: PropTypes.func,
+  on_state_update: PropTypes.func
 }
 
 export const defaultProps = {
@@ -130,6 +132,13 @@ export default class Textarea extends PureComponent {
       value !== 'initval' &&
       value !== state.value
     ) {
+      if (
+        value !== state.value &&
+        value !== state._value &&
+        typeof props.on_state_update === 'function'
+      ) {
+        dispatchCustomElementEvent({ props }, 'on_state_update', { value })
+      }
       state.value = value
     }
     if (props.textarea_state) {
@@ -157,7 +166,8 @@ export default class Textarea extends PureComponent {
 
   state = {
     textareaState: 'virgin',
-    value: null
+    value: null,
+    _value: null
   }
 
   constructor(props) {
@@ -171,6 +181,7 @@ export default class Textarea extends PureComponent {
     if (props.textarea_state) {
       this.state.textareaState = props.textarea_state
     }
+    this.state._value = props.value
   }
   onFocusHandler = event => {
     const { value } = event.target

diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -21,6 +21,7 @@ exports[`Textarea component have to match snapshot 1`] = `
         "on_blur": [Function],
         "on_change": [Function],
         "on_focus": [Function],
+        "on_state_update": [Function],
         "placeholder": "placeholder",
         "readOnly": "readOnly",
         "rows": 1,
@@ -50,6 +51,7 @@ exports[`Textarea component have to match snapshot 1`] = `
   on_blur={null}
   on_change={null}
   on_focus={null}
+  on_state_update={null}
   placeholder={null}
   readOnly={false}
   rows={null}

diff --git a/packages/dnb-ui-lib/stories/components/Input.js b/packages/dnb-ui-lib/stories/components/Input.js
@@ -27,6 +27,9 @@ export default [
   () => (
     <CustomStyle>
       <Wrapper>
+        <Box>
+          <CustomInput />
+        </Box>
         <Box>
           <FormSet>
             <FormRow
@@ -233,3 +236,29 @@ const InputUpdate = () => {
     />
   )
 }
+
+const CustomInput = () => {
+  const [value, setValue] = useState('2019-02-15')
+  return (
+    <>
+      <Input
+        value={value}
+        on_change={({ value }) => {
+          console.log('on_change', value)
+          setValue(value)
+        }}
+        on_state_update={({ value }) => {
+          console.warn('on_state_update', value)
+          setValue(value)
+        }}
+        right
+      />
+      <Button
+        text="Reset"
+        on_click={() => {
+          setValue('123')
+        }}
+      />
+    </>
+  )
+}