diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js
index de55a593a..b4b5ea51d 100644
--- a/docs/lib/Components/FormPage.js
+++ b/docs/lib/Components/FormPage.js
@@ -79,7 +79,13 @@ export default class FormPage extends React.Component {
invalid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
bsSize: PropTypes.string,
cssModule: PropTypes.object,
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]) // for type="select"
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select"
+ // innerRef would be referenced to select node or input DOM node, depends on type property
+ innerRef: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string,
+ PropTypes.func,
+ ])
};`}
diff --git a/src/CustomInput.js b/src/CustomInput.js
index 23d075d33..6ec6a9a1b 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -13,7 +13,12 @@ const propTypes = {
invalid: PropTypes.bool,
bsSize: PropTypes.string,
cssModule: PropTypes.object,
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func])
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
+ innerRef: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string,
+ PropTypes.func,
+ ])
};
function CustomInput(props) {
@@ -26,6 +31,7 @@ function CustomInput(props) {
cssModule,
children,
bsSize,
+ innerRef,
...attributes
} = props;
@@ -43,20 +49,20 @@ function CustomInput(props) {
), cssModule);
if (type === 'select') {
- return ;
+ return ;
}
if (type === 'file') {
return (
-
+
);
}
if (type !== 'checkbox' && type !== 'radio') {
- return ;
+ return ;
}
const wrapperClasses = classNames(
@@ -71,6 +77,7 @@ function CustomInput(props) {
diff --git a/src/__tests__/CustomInput.spec.js b/src/__tests__/CustomInput.spec.js
index 52ed0bb87..9a05a2212 100644
--- a/src/__tests__/CustomInput.spec.js
+++ b/src/__tests__/CustomInput.spec.js
@@ -44,6 +44,13 @@ describe('Custom Inputs', () => {
const checkbox = mount();
expect(checkbox.find('input').prop('data-testprop')).toBe('yo');
});
+
+ it('should reference innerRef to the input node', () => {
+ const ref = React.createRef();
+ mount();
+ expect(ref.current).not.toBeNull();
+ expect(ref.current).toBeInstanceOf(HTMLInputElement);
+ });
});
describe('CustomRadio', () => {
@@ -87,6 +94,13 @@ describe('Custom Inputs', () => {
const radio = mount();
expect(radio.find('input').prop('data-testprop')).toBe('yo');
});
+
+ it('should reference innerRef to the input node', () => {
+ const ref = React.createRef();
+ mount();
+ expect(ref.current).not.toBeNull();
+ expect(ref.current).toBeInstanceOf(HTMLInputElement);
+ });
});
describe('CustomSelect', () => {
@@ -119,6 +133,13 @@ describe('Custom Inputs', () => {
const select = mount();
expect(select.find('select').prop('data-testprop')).toBe('yo');
});
+
+ it('should reference innerRef to the select node', () => {
+ const ref = React.createRef();
+ mount();
+ expect(ref.current).not.toBeNull();
+ expect(ref.current).toBeInstanceOf(HTMLSelectElement);
+ });
});
describe('CustomFile', () => {
@@ -162,6 +183,13 @@ describe('Custom Inputs', () => {
const file = mount();
expect(file.find('input').prop('data-testprop')).toBe('yo');
});
+
+ it('should reference innerRef to the input node', () => {
+ const ref = React.createRef();
+ mount();
+ expect(ref.current).not.toBeNull();
+ expect(ref.current).toBeInstanceOf(HTMLInputElement);
+ });
});
describe('CustomRange', () => {
@@ -189,5 +217,12 @@ describe('Custom Inputs', () => {
const range = mount();
expect(range.find('input').prop('data-testprop')).toBe('yo');
});
+
+ it('should reference innerRef to the input node', () => {
+ const ref = React.createRef();
+ mount();
+ expect(ref.current).not.toBeNull();
+ expect(ref.current).toBeInstanceOf(HTMLInputElement);
+ });
});
});