diff --git a/src/utils/dates/DateRangeSelector.scss b/src/utils/dates/DateRangeSelector.scss
index c8df5a84..114c2b12 100644
--- a/src/utils/dates/DateRangeSelector.scss
+++ b/src/utils/dates/DateRangeSelector.scss
@@ -1,8 +1,9 @@
 @import '../../utils/mixins/vertical-align';
 
 .date-range-selector__btn.date-range-selector__btn,
-.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):active,
 .date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled).active,
+.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):active,
+.date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):focus,
 .date-range-selector__btn.date-range-selector__btn:not(:disabled):not(.disabled):hover,
 .show > .date-range-selector__btn.date-range-selector__btn.dropdown-toggle {
   color: #6c757d;
diff --git a/test/utils/dates/DateRangeSelector.test.tsx b/test/utils/dates/DateRangeSelector.test.tsx
index 7daadeb1..0df6fa18 100644
--- a/test/utils/dates/DateRangeSelector.test.tsx
+++ b/test/utils/dates/DateRangeSelector.test.tsx
@@ -3,12 +3,13 @@ import { DropdownItem } from 'reactstrap';
 import moment from 'moment';
 import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
 import { DateInterval } from '../../../src/utils/dates/types';
+import { Mock } from 'ts-mockery';
 
 describe('<DateRangeSelector />', () => {
   let wrapper: ShallowWrapper;
   const onDatesChange = jest.fn();
   const createWrapper = (props: Partial<DateRangeSelectorProps> = {}) => {
-    wrapper = shallow(<DateRangeSelector {...props} onDatesChange={onDatesChange} />);
+    wrapper = shallow(<DateRangeSelector {...Mock.of<DateRangeSelectorProps>(props)} onDatesChange={onDatesChange} />);
 
     return wrapper;
   };