feat: use form-select class with native select

https://getbootstrap.com/docs/5.0/migration/#forms-2 https://getbootstrap.com/docs/5.0/forms/select/
reactstrap · Oct 27, 2021 · 1e6204b · 1e6204b
1 parent 1adc147
commit 1e6204b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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(<Input type="select" bsSize="lg" />);
+
+    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(<Input bsSize="5" />);
 
@@ -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(<Input type="select" bsSize="5" />);
+
+    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(<Input bsSize="sm" />);
 
     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(<Input type="select" bsSize="sm" />);
+
+    expect(wrapper.hasClass('form-select-sm')).toBe(true);
+  });
+
   it('should render with "form-control" class by default', () => {
     const wrapper = shallow(<Input />);
 
@@ -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(<Input type="select" />);
+
+    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(<Input type="file" plaintext />);
 
@@ -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(<Input type="select" />);
+
+    expect(wrapper.hasClass('form-select')).toBe(true);
+  });
+
   it('should render with "form-control-file" class when type is file', () => {
     const wrapper = shallow(<Input type="file" />);