From 1e6204b925e23d97d38532265f4828964e0e1638 Mon Sep 17 00:00:00 2001
From: Darren Eng <darren.eng@appfolio.com>
Date: Fri, 11 Dec 2020 15:01:00 -0800
Subject: [PATCH] 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/
---
 src/Input.js                |  8 +++++++-
 src/__tests__/Input.spec.js | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

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(<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" />);