start working on implimenting auto-select

src/components/fields/magic-select/MagicSelect.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import {fieldInnerPropTypes, inputTypeProp, onValueChangePropType, optionsShapeProp, valuePropType} from '../propTypes';
+import classNames from 'classnames';
+import Autocomplete from 'react-autocomplete'
+import PropTypes from "prop-types";
+/**
+ * Encapsulates a complete Magic Select field
+ */
+export const MagicSelect = (props) => {
+
+	const onChange = (event) => {
+		this.props.onValueChange(event.target.value);
+	};
+
+	return (
+		<div
+			className={classNames('', props.className)}
+		>
+			<Autocomplete
+				id={props.id}
+				getItemValue={(item) => item.label}
+				items={[
+					{ label: 'apple' },
+					{ label: 'banana' },
+					{ label: 'pear' }
+				]}
+				renderItem={(item, isHighlighted) =>
+					<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
+						{item.label}
+					</div>
+				}
+				value={props.value}
+				onChange={onChange}
+				onSelect={(val) => value = val}
+			/>
+		</div>
+	);
+}
+
+/**
+ * Prop definitions for MagicSelect component
+*/
+MagicSelect.propTypes = {
+	id: PropTypes.string.isRequired,
+	fieldsList: optionsShapeProp,
+	systemTagsList: optionsShapeProp,
+	isRequired: PropTypes.bool,
+	help: PropTypes.string,
+	value: valuePropType,
+	onValueChange: onValueChangePropType,
+	options: PropTypes.array,
+	disabled: PropTypes.bool,
+};
+
+/**
+ * Default property values for MagicSelect component
+ *
+ * @type {{}}
+ */
+MagicSelect.defaultProps = {};

src/components/fields/magic-select/MagicSelect.test.js

@@ -0,0 +1,36 @@
+
+import renderer from 'react-test-renderer';
+import React from 'react';
+import {mount} from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {MagicSelect } from "./MagicSelect";
+
+Enzyme.configure({adapter: new Adapter()});
+
+const genericChangeHandler = () => {};
+describe( 'MagicSelect component', () => {
+	let selectFieldValue = 'html';
+
+
+	it( 'Matches snapshot', () => {
+		const component = renderer.create(
+			<MagicSelect
+				id={'magic-1'}
+				fieldClassName={'magic'}
+				onValueChange={genericChangeHandler}
+				options={[
+					{
+						label: 'HTML',
+						value: 'html'
+					},
+					{
+						label: 'Plain Text',
+						value: 'plain'
+					}
+				]}
+			/>
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	})
+});

src/components/fields/magic-select/__snapshots__/MagicSelect.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MagicSelect component Matches snapshot 1`] = `
+<div
+  className=""
+>
+  <div
+    style={
+      Object {
+        "display": "inline-block",
+      }
+    }
+  >
+    <input
+      aria-autocomplete="list"
+      aria-expanded={false}
+      autoComplete="off"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      role="combobox"
+      value=""
+    />
+  </div>
+</div>
+`;