prevent submitting forms only on formSubmit=false (#135)

* prevent submitting forms only on formSubmit=false
* fix style
* rename formSubmit to submitFormOnEnter
* prevent for submitting form if menu is shown and we have active item
* add description of new property
* add tests for submitFormOnEnter option

docs/Props.md

@@ -36,6 +36,7 @@ renderMenu | function | | Callback for custom menu rendering.
 renderMenuItemChildren | function | | Provides a hook for customized rendering of menu item contents.
 renderToken | function | | Provides a hook for customized rendering of tokens when multiple selections are enabled.
 selected | array | `[]` | The selected option(s) displayed in the input. Use this prop if you want to control the component via its parent.
+submitFormOnEnter | boolean | false | Propagate <RETURN> event to parent form. 
 
 ### `<AsyncTypeahead>`
 Name | Type | Default | Description

src/Typeahead.react.js

@@ -142,6 +142,11 @@ const Typeahead = React.createClass({
  * to control the component via its parent.
  */
  selected: PropTypes.array,
+
+ /**
+ * Propagate <Enter> to parent form
+ */
+ submitFormOnEnter: PropTypes.bool,
  },
 
  getDefaultProps() {
@@ -167,6 +172,7 @@ const Typeahead = React.createClass({
  onPaginate: noop,
  paginate: true,
  selected: [],
+ submitFormOnEnter: false,
  };
  },
 
@@ -540,11 +546,15 @@ const Typeahead = React.createClass({
  this._hideDropdown();
  break;
  case RETURN:
- // Prevent submitting forms.
- e.preventDefault();
+ // if menu is shown and we have active item
+ // there is no any sense to submit form on <RETURN>
+ if (!this.props.submitFormOnEnter || showMenu && activeItem) {
+ // Prevent submitting forms.
+ e.preventDefault();
+ }
 
- if (showMenu) {
- activeItem && this._handleAddOption(activeItem);
+ if (showMenu && activeItem) {
+ this._handleAddOption(activeItem);
  }
  break;
  }

test/TypeaheadSpec.js

@@ -6,6 +6,7 @@ import ReactTestUtils from 'react-addons-test-utils';
 import TokenizerInput from '../src/TokenizerInput';
 import Typeahead from '../src/Typeahead';
 import TypeaheadInput from '../src/TypeaheadInput';
+import {RETURN} from '../src/utils/keyCode';
 
 import states from '../example/exampleData';
 
@@ -33,6 +34,20 @@ function getTypeaheadInstance(props) {
  return ReactTestUtils.renderIntoDocument(<Typeahead {...props} />);
 }
 
+class FormWrapper extends React.Component {
+ render() {
+ return (
+ <form onKeyDown={this.props.onKeyDown}>
+ <Typeahead {...this.props} />
+ </form>
+ );
+ }
+}
+
+function getFormWithTypeaheadInstance(props) {
+ return ReactTestUtils.renderIntoDocument(<FormWrapper {...props}/>);
+}
+
 describe('<Typeahead>', () => {
 
  it('should have a TypeaheadInput', () => {
@@ -214,4 +229,50 @@ describe('<Typeahead>', () => {
  expect(InputNode).to.exist;
  });
 
+ describe('form integration', () => {
+ let onKeyDownEvent = null;
+ const onKeyDown = evt => onKeyDownEvent = evt;
+
+ beforeEach(() => {
+ onKeyDownEvent = null;
+ });
+
+ /**
+ * since react test simulation doesn't trigger form submit
+ * on RETURN press, we should handle key down event on form level
+ * and test whether default was prevented or not
+ */
+ it('should not submit form when `submitFormOnEnter=false', () => {
+ const instance = getFormWithTypeaheadInstance({
+ ...baseProps,
+ submitFormOnEnter: false,
+ onKeyDown,
+ });
+
+ const inputNode = getInputNode(instance);
+ ReactTestUtils.Simulate.focus(inputNode);
+ ReactTestUtils.Simulate.keyDown(inputNode, {
+ key: 'Enter', keyCode: RETURN, which: RETURN,
+ });
+
+ expect(onKeyDownEvent).to.have.property('defaultPrevented', true);
+ });
+
+ it('should submit form when `submitFormOnEnter=true', () => {
+ const instance = getFormWithTypeaheadInstance({
+ ...baseProps,
+ submitFormOnEnter: true,
+ onKeyDown,
+ });
+
+ const inputNode = getInputNode(instance);
+ ReactTestUtils.Simulate.focus(inputNode);
+ ReactTestUtils.Simulate.keyDown(inputNode, {
+ key: 'Enter', keyCode: RETURN, which: RETURN,
+ });
+
+ expect(onKeyDownEvent).to.have.property('defaultPrevented', undefined);
+ });
+ });
+
 });