diff --git a/src/Input.js b/src/Input.js
index b973c0410..7c3d058cb 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -81,6 +81,8 @@ class Input extends React.Component {
formControlClass = `${formControlClass}-file`;
} else if (rangeInput) {
formControlClass = `${formControlClass}-range`;
+ } else if (selectInput) {
+ formControlClass = "form-select";
} else if (checkInput) {
if (addon) {
formControlClass = null;
@@ -102,7 +104,11 @@ class Input extends React.Component {
className,
invalid && 'is-invalid',
valid && 'is-valid',
- bsSize ? `form-control-${bsSize}` : false,
+ bsSize
+ ? selectInput
+ ? `form-select-${bsSize}`
+ : `form-control-${bsSize}`
+ : false,
formControlClass
),
cssModule
diff --git a/src/__tests__/Input.spec.js b/src/__tests__/Input.spec.js
index 50f7c914c..317312fc5 100644
--- a/src/__tests__/Input.spec.js
+++ b/src/__tests__/Input.spec.js
@@ -117,6 +117,12 @@ describe('Input', () => {
expect(wrapper.hasClass('form-control-lg')).toBe(true);
});
+ it('should render with "form-select-${bsSize}" class when bsSize is "lg" or "sm" and type is select', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.hasClass('form-select-lg')).toBe(true);
+ });
+
it('should render with "form-control" class when size is nor "lg" nor "sm"', () => {
const wrapper = shallow();
@@ -125,12 +131,26 @@ describe('Input', () => {
expect(wrapper.hasClass('form-control')).toBe(true);
});
+ it('should render with "form-select" class when size is nor "lg" nor "sm" and type is select', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.hasClass('form-select-sm')).toBe(false);
+ expect(wrapper.hasClass('form-select-lg')).toBe(false);
+ expect(wrapper.hasClass('form-select')).toBe(true);
+ });
+
it('should render with "form-control-${bsSize}" class when bsSize is provided', () => {
const wrapper = shallow();
expect(wrapper.hasClass('form-control-sm')).toBe(true);
});
+ it('should render with "form-select-${bsSize}" class when bsSize is provided and type is select', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.hasClass('form-select-sm')).toBe(true);
+ });
+
it('should render with "form-control" class by default', () => {
const wrapper = shallow();
@@ -153,6 +173,14 @@ describe('Input', () => {
expect(wrapper.hasClass('form-check-input')).toBe(false);
});
+ it('should not render with "form-control" nor "form-control-plaintext" nor "form-check-input" class when type is select', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.hasClass('form-control')).toBe(false);
+ expect(wrapper.hasClass('form-control-plaintext')).toBe(false);
+ expect(wrapper.hasClass('form-check-input')).toBe(false);
+ });
+
it('should not render with "form-control-file" nor "form-control" nor "form-check-input" class when plaintext prop is truthy', () => {
const wrapper = shallow();
@@ -202,6 +230,12 @@ describe('Input', () => {
expect(wrapper.hasClass('form-control')).toBe(false);
});
+ it('should render with "form-select" class when type is select', () => {
+ const wrapper = shallow();
+
+ expect(wrapper.hasClass('form-select')).toBe(true);
+ });
+
it('should render with "form-control-file" class when type is file', () => {
const wrapper = shallow();