mj - dont tab to button on date input

appfolio · Jul 20, 2017 · 5aebbc0 · 5aebbc0
1 parent 14c4355
commit 5aebbc0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/DateInput.js b/src/components/DateInput.js
@@ -200,7 +200,13 @@ export default class DateInput extends Component {
               disabled={disabled}
             />
             <InputGroupButton onClick={this.toggle}>
-              <Button className="px-2" disabled={disabled} active={open} type="button">
+              <Button
+                className="px-2"
+                disabled={disabled}
+                active={open}
+                type="button"
+                tabIndex={-1}
+              >
                 <Icon name="calendar" fixedWidth />
               </Button>
             </InputGroupButton>

diff --git a/test/components/DateInput.spec.js b/test/components/DateInput.spec.js
@@ -43,6 +43,14 @@ describe('<DateInput />', () => {
     });
   });
 
+  it('should not tab to the calendar button', () => {
+    const component = mount(<DateInput />);
+
+    const toggle = component.find('InputGroupButton');
+    const calendarButton = toggle.find('Button');
+    assert.equal(calendarButton.props().tabIndex, -1);
+  });
+
   it('should should open and close when input addon clicked', () => {
     const component = mount(<DateInput />);
     const dropdown = component.find('Dropdown');