@@ -1949,9 +2010,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
@@ -1967,7 +2028,8 @@ exports[`Storyshots Textarea minimal usage 1`] = `
className="form-group"
>
@@ -1976,13 +2038,12 @@ exports[`Storyshots Textarea minimal usage 1`] = `
aria-invalid={false}
className="form-control"
disabled={false}
- id="asInput20"
+ id="asInput4"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
- type="text"
value="Foo Bar"
/>
@@ -1993,7 +2054,8 @@ exports[`Storyshots Textarea scrollable 1`] = `
className="form-group"
>
@@ -2002,13 +2064,12 @@ exports[`Storyshots Textarea scrollable 1`] = `
aria-invalid={false}
className="form-control"
disabled={false}
- id="asInput21"
+ id="asInput4"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
- type="text"
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
/>
@@ -2019,27 +2080,27 @@ exports[`Storyshots Textarea validation 1`] = `
className="form-group"
>
The unique name that identifies you throughout the site.
diff --git a/src/InputSelect/index.jsx b/src/InputSelect/index.jsx
index e0b3ddf964..5216fb22d0 100644
--- a/src/InputSelect/index.jsx
+++ b/src/InputSelect/index.jsx
@@ -49,6 +49,7 @@ class Select extends React.Component {
aria-describedby={props.describedBy}
onChange={props.onChange}
onBlur={props.onBlur}
+ ref={props.inputRef}
>
{options}
diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx
index e24b93fb27..0241d3234c 100644
--- a/src/InputText/InputText.stories.jsx
+++ b/src/InputText/InputText.stories.jsx
@@ -3,6 +3,41 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import InputText from './index';
+import StatusAlert from '../StatusAlert';
+
+class FocusInputWrapper extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { open: true };
+
+ this.resetStatusAlertWrapperState = this.resetStatusAlertWrapperState.bind(this);
+ }
+
+ resetStatusAlertWrapperState() {
+ this.setState({ open: false });
+ this.inputForm.focus();
+ }
+
+ render() {
+ return (
+
+
+ { this.inputForm = input; }}
+ />
+
+ );
+ }
+}
+
storiesOf('InputText', module)
.add('minimal usage', () => (
@@ -14,6 +49,7 @@ storiesOf('InputText', module)
))
.add('validation', () => (
+ ))
+ .add('focus test', () => (
+
));
diff --git a/src/InputText/index.jsx b/src/InputText/index.jsx
index ab2b5afe0f..0c145a1263 100644
--- a/src/InputText/index.jsx
+++ b/src/InputText/index.jsx
@@ -8,7 +8,7 @@ function Text(props) {
);
}
diff --git a/src/TextArea/index.jsx b/src/TextArea/index.jsx
index 465730f228..cedcbc28df 100644
--- a/src/TextArea/index.jsx
+++ b/src/TextArea/index.jsx
@@ -8,7 +8,6 @@ function Text(props) {
);
}
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
index 7fbffc3b7e..c8c1e81e2c 100644
--- a/src/asInput/asInput.test.jsx
+++ b/src/asInput/asInput.test.jsx
@@ -8,6 +8,7 @@ import asInput, { getDisplayName } from './index';
function testComponent(props) {
return (
{
expect(wrapper.state('value')).toEqual(props.value);
});
+ it('creates generic prop id', () => {
+ const props = {
+ ...baseProps,
+ };
+ const wrapper = mount(
);
+ expect(wrapper.state('id')).toContain('asInput');
+ expect(wrapper.find('label').prop('id')).toContain('asInput');
+ expect(wrapper.find('input').prop('id')).toContain('asInput');
+ expect(wrapper.find('small').prop('id')).toContain('asInput');
+ });
+
+ it('creates generic prop id when passed null id value', () => {
+ const testId = null;
+ const props = {
+ ...baseProps,
+ id: testId,
+ };
+ const wrapper = mount(
);
+ expect(wrapper.state('id')).toContain('asInput');
+ expect(wrapper.find('label').prop('id')).toContain('asInput');
+ expect(wrapper.find('input').prop('id')).toContain('asInput');
+ expect(wrapper.find('small').prop('id')).toContain('asInput');
+ });
+
+ it('uses passed in prop id', () => {
+ const testId = 'testId';
+ const props = {
+ ...baseProps,
+ id: testId,
+ };
+ const wrapper = mount(
);
+ expect(wrapper.state('id')).toEqual(testId);
+ expect(wrapper.find('label').prop('id')).toEqual(`label-${testId}`);
+ expect(wrapper.find('input').prop('id')).toEqual(testId);
+ expect(wrapper.find('small').prop('id')).toEqual(`description-${testId}`);
+ });
+
describe('fires', () => {
it('blur handler', () => {
const spy = jest.fn();
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
index 55415a3f9c..da9f3d5091 100644
--- a/src/asInput/index.jsx
+++ b/src/asInput/index.jsx
@@ -11,6 +11,7 @@ export const getDisplayName = WrappedComponent =>
export const inputProps = {
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
+ id: PropTypes.string,
value: PropTypes.string,
description: PropTypes.oneOfType([
PropTypes.string,
@@ -31,7 +32,7 @@ const asInput = (WrappedComponent, labelFirst = true) => {
this.handleChange = this.handleChange.bind(this);
this.handleBlur = this.handleBlur.bind(this);
- const id = newId('asInput');
+ const id = this.props.id ? this.props.id : newId('asInput');
this.state = {
id,
value: this.props.value,
@@ -90,7 +91,7 @@ const asInput = (WrappedComponent, labelFirst = true) => {
const { description, error, describedBy } = this.getDescriptions();
return (
- {labelFirst && }
+ {labelFirst && }
{
NewComponent.defaultProps = {
onChange: () => {},
onBlur: () => {},
+ id: newId('asInput'),
value: '',
description: undefined,
disabled: false,