fix: make #input not suppressing enter key on submit forms. Thanks to…

… Reidun!
dnbexperience · May 20, 2019 · a752fe6 · a752fe6
1 parent 94af1cd
commit a752fe6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -186,15 +186,15 @@ export default class Input extends PureComponent {
     dispatchCustomElementEvent(this, 'on_blur', { value, event })
   }
   onChangeHandler = event => {
+    event.persist()
     const { value } = event.target
     this.setState({ value, _listenForPropChanges: false })
-    event.preventDefault()
     dispatchCustomElementEvent(this, 'on_change', { value, event })
   }
   onKeyDownHandler = event => {
     if (event.key === 'Enter') {
+      event.persist()
       const { value } = event.target
-      event.preventDefault()
       dispatchCustomElementEvent(this, 'on_submit', { value, event })
     }
   }
@@ -214,17 +214,17 @@ export default class Input extends PureComponent {
       submit_button_title,
       submit_button_variant,
       submit_button_icon,
-      on_submit,
       submitButton,
       autocomplete,
       readOnly,
       class: _className,
       className,
 
-      id: _id /* eslint-disable-line */,
-      children /* eslint-disable-line */,
-      value: _value /* eslint-disable-line */,
-      inputElement: _inputElement /* eslint-disable-line */,
+      id: _id, //eslint-disable-line
+      children, //eslint-disable-line
+      value: _value, //eslint-disable-line
+      on_submit, //eslint-disable-line
+      inputElement: _inputElement, //eslint-disable-line
 
       ...attributes
     } = this.props
@@ -233,7 +233,7 @@ export default class Input extends PureComponent {
 
     const id = this._id
     const showStatus = status && status !== 'error'
-    const hasSubmitButton = on_submit || submitButton || type === 'search'
+    const hasSubmitButton = submitButton || type === 'search'
 
     const classes = classnames(
       'dnb-input',

diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes.scss b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
@@ -139,7 +139,5 @@
   }
 }
 .dnb-form-row {
-  display: flex;
-
   margin-bottom: 1.5rem;
 }
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -157,7 +157,14 @@ stories.push([
     <CustomStyle>
       <Wrapper>
         <Box>
-          <Input label="Label:">Input ...</Input>
+          <Input
+            label="Label:"
+            on_change={event => {
+              console.log('on_change', event)
+            }}
+          >
+            Input ...
+          </Input>
         </Box>
         <Box>
           <p className="dnb-p">
@@ -221,6 +228,27 @@ stories.push([
             show_mask="true"
           />
         </Box>
+        <Box>
+          <form
+            onSubmit={event => {
+              console.log('onSubmit', event)
+              event.preventDefault()
+              // event.persist()
+            }}
+          >
+            <Input
+              label="Label:"
+              on_change={event => {
+                console.log('on_change', event)
+              }}
+              on_submit={event => {
+                console.log('on_submit', event)
+              }}
+              value="Input ..."
+            />
+            <Button text="Submit" type="submit" />
+          </form>
+        </Box>
       </Wrapper>
     </CustomStyle>
   )