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); + }); }); });