My turn

mui · Sep 26, 2017 · 5ac72b2 · 5ac72b2
1 parent 46ae7c2
commit 5ac72b2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/Select/SelectInput.d.ts b/src/Select/SelectInput.d.ts
@@ -2,19 +2,19 @@ import * as React from 'react';
 import { StyledComponent } from '..';
 
 export interface SelectInputProps {
-  autoWidth?: boolean,
-  disabled?: boolean,
-  native: boolean,
-  multiple: boolean,
-  MenuProps?: Object,
-  name?: string,
+  autoWidth: boolean;
+  disabled?: boolean;
+  native: boolean;
+  multiple: boolean;
+  MenuProps?: Object;
+  name?: string;
   onBlur?: React.FocusEventHandler<any>;
   onChange?: (event: React.ChangeEvent<{}>, child: React.ReactNode) => void,
   onFocus?: React.FocusEventHandler<any>;
-  readOnly?: boolean,
-  renderValue?: Function,
-  selectRef?: Function,
-  value?: string | number | Array<string | number>,
+  readOnly?: boolean;
+  renderValue?: Function;
+  selectRef?: Function;
+  value?: string | number | Array<string | number>;
 }
 
 declare const SelectInput: StyledComponent<SelectInputProps>;

diff --git a/src/Select/SelectInput.js b/src/Select/SelectInput.js
@@ -14,7 +14,7 @@ export type Props = {
    * If true, the width of the popover will automatically be set according to the items inside the
    * menu, otherwise it will be at least the width of the select input.
    */
-  autoWidth?: boolean,
+  autoWidth: boolean,
   /**
    * The option elements to populate the select with.
    * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
@@ -308,7 +308,7 @@ class SelectInput extends React.Component<AllProps, State> {
     }
 
     const minimumMenuWidth =
-      this.state.anchorEl != null && !autoWidth ? this.state.anchorEl.clientWidth : 0;
+      this.state.anchorEl != null && !autoWidth ? this.state.anchorEl.clientWidth : undefined;
 
     return (
       <div className={classes.root}>

diff --git a/src/Select/SelectInput.spec.js b/src/Select/SelectInput.spec.js
@@ -6,7 +6,7 @@ import { spy } from 'sinon';
 import { ReactWrapper } from 'enzyme';
 import keycode from 'keycode';
 import { createShallow, createMount } from '../test-utils';
-import { MenuItem } from '../Menu';
+import Menu, { MenuItem } from '../Menu';
 import consoleErrorMock from '../../test/utils/consoleErrorMock';
 import SelectInput from './SelectInput';
 
@@ -17,6 +17,7 @@ describe('<SelectInput />', () => {
     classes: {
       select: 'select',
     },
+    autoWidth: false,
     value: 10,
     native: false,
     multiple: false,
@@ -66,15 +67,31 @@ describe('<SelectInput />', () => {
 
   describe('prop: MenuProps', () => {
     it('should apply additional properties to the Menu component', () => {
-      const wrapper = mount(
+      const wrapper = shallow(
         <SelectInput
           {...props}
           MenuProps={{
             transitionDuration: 100,
           }}
         />,
       );
-      assert.strictEqual(wrapper.find('Menu').props().transitionDuration, 100);
+      assert.strictEqual(wrapper.find(Menu).props().transitionDuration, 100);
+    });
+
+    it('should be able to override PaperProps minWidth', () => {
+      const wrapper = shallow(
+        <SelectInput
+          {...props}
+          MenuProps={{
+            PaperProps: {
+              style: {
+                minWidth: 12,
+              },
+            },
+          }}
+        />,
+      );
+      assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, 12);
     });
   });
 
@@ -190,6 +207,28 @@ describe('<SelectInput />', () => {
     });
   });
 
+  describe('prop: autoWidth', () => {
+    it('should take the anchor width into account', () => {
+      const wrapper = shallow(<SelectInput {...props} />);
+      wrapper.setState({
+        anchorEl: {
+          clientWidth: 14,
+        },
+      });
+      assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, 14);
+    });
+
+    it('should not take the anchor width into account', () => {
+      const wrapper = shallow(<SelectInput {...props} autoWidth />);
+      wrapper.setState({
+        anchorEl: {
+          clientWidth: 14,
+        },
+      });
+      assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, undefined);
+    });
+  });
+
   describe('prop: multiple', () => {
     before(() => {
       consoleErrorMock.spy();